Hi forum users,

I did use this to style a full width block element:

.div {clear:both; display:block;}

But while developing a theme I now and then encounter problems with elements which don’t align properly and overflow the margin/padding top/bottom of the element above/underneath.

So in those cases I use this CSS:

.div {width:100%; clear:both; float:left; display:block;}

In case with border:

.div {width:100%; clear:both; float:left; display:block; border:2px solid #333; box-sizing:border-box;}

But I don’t want to use the width property too much, is there another way to solve the alignment/overflow issue?

Guido

It might be useful to put an actual example into Codepen so we can see these things in action.

You also shouldn’t need to add ‘display: block;’ to a div element as they are block by default. They should also fill the full width of its parent so the width property isn’t needed. If you have any examples in real scenarios it would help.

Put the clearfix on the parent of the floated element.

~ Steven

Thanks for your response. Although I’m developing themes for several years now, I clearly still don’t know everything about CSS… shame on me ??

I have set up a temp test site, check this link.

Example: if you inspect .div postmetadata, located underneath .div entry-content, you will notice it overflows the margin of the paragraph tag which is inside .div entry-content.

I did solve this by adding width and float to .div postmetadata. But what’s the proper way?

Guido

Guido

Example: if you inspect .div postmetadata, located underneath .div entry-content, you will notice it overflows the margin of the paragraph tag which is inside .div entry-content.

I’ve found out why… collapsing margins! Never heard of this before..