CSS: having align / overflow problems

  • Resolved Guido

    (@guido07111975)


    7 years, 8 months ago

    [ Moderator note: moved to Fixing WordPress. ]

    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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello 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

    Thread Starter Guido

    (@guido07111975)

    Hi 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

    Thread Starter Guido

    (@guido07111975)

    Oh, about the clearfix.. I do use it sometimes but in my opinion you should only use this if there’s absolutely no alternative.. I cannot imagine there’s no alternative for the problem described in my previous response.

    Guido

    Thread Starter Guido

    (@guido07111975)

    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..

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS: having align / overflow problems’ is closed to new replies.