Trying to obtain a simple div page layout

[david263]

I want to have a top, middle, and bottom division to my page.

I want the middle to contain a left and right division.

The CodePen example is at https://codepen.io/david263/pen/VdPbgP .

The output isn’t in blocks at all. What did I do wrong?

[Beverleyh]

what did I do wrong?

Malformed class attribute syntax in the HTML.
Help here https://www.w3schools.com/tags/att_global_class.asp

Malformed syntax in CSS / property:value pairing mistakes.
Help here https://www.w3schools.com/css/css_syntax.asp

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

[david263]

Thank you! I fixed the errors, but I’m still not seeing two side-by-side boxes inside the middle box.

[Beverleyh]

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.

[Beverleyh]

p.s. you don’t need to define .hdiv as display:block; in the CSS. Divs are block-level elements by default.

[david263]

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.

https://codepen.io/david263/pen/VdPbgP

[david263]

I have found this good answer on another forum:

https://codepen.io/pixlforge/pen/wXgyMd

[Beverleyh]

Your last two answers did not help

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

And conversely, flex fails with the LEFT/RIGHT text present https://codepen.io/anon/pen/oyBQdo

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.

[david263]

Beverly, thanks for your comments. I think they are all appropriate.

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.

https://codepen.io/david263/pen/VdPbgP

[Author]

Posts