Horizontal borders add to the box-model, pushing out the overall width so that the 2 floats don’t sit side-by-side. Theyll each sit on a new line. This can be fixed by removing the borders, or change 50% to 49% to see effect of the intended layout in action. If you want to keep all the borders, you could look into removing 2 pixels from each side of the floated divs with calc() https://www.w3schools.com/cssref/func_calc.asp

Have you added “LEFT/RIGHT” text now too? I can’t remember seeing that yesterday. Never mind. Remember that text is an inline element, trying to occupy the same line space as the 2 half-width floated elements, so their overall width (text + left float + right float) is going to exceed 100%. In other words, there’s not enough room for everything to sit on one line so something is going to spill onto another line. Take out the text so that it doesn’t interfere with the floats.

Your last two answers did not help, because blocks are useless to my design unless they contain text and other elements. I’m sorry I did not make it clear that this is for presentation on the Web as a Web page.

I want a top block, middle block, and bottom block. Inside the middle block I want a left block and a right block, no matter what the viewport size. The design must be liquid and adaptable between tiny cell phone and large desktop.

With all due respect, the reason why my answers did not help you is because you don’t understand enough about the tools you’re working with. I would respectfully suggest that you learn more about layout so that you are better placed to decide what is best in a given situation. Here’s a good place to start http://learnlayout.com/

And if you’re going to critique what a good answer is, at least base both cases on the same criteria. The floats work fine with the LEFT/RIGHT text removed https://codepen.io/anon/pen/WyRYzB

Please research more about flex, vendor prefixes (you’ll need them), and suitable fallbacks for older browsers, before you decide to use it for a full web page structure because the demo you posted (which is a reduced test case) won’t be compatible for all users as it currently stands. The floats, while limited by the constraints of older tech, are stable in older browsers and more likely to give the same output for the vast majority of users. Both methods have pros and cons so I recommend you do more research before you commit.

Indeed, I got exactly the behavior I wanted by doing more reading about this wonderful new “flex” css element.

I’ve got it fixed now and it works great. I just had to use the right css. Thanks, all.

Of course, I will need some support for older browsers (maybe through the amazing Autoprefixer, or as you say through floats), and perhaps a little better customization for two or three major width “breakpoints” when I go production.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.