CODEWITHSUNDEEP
css
JayPrime2012
JayPrime2012

Reputation: 2692

Why does adding content inside of a layout screw up the layout?

The following layout 2 column layout will get screwed up by adding the <p>Hello</p>... Can anyone give me a clue?

<div style="width:1280px; font-size:0;">
   <div style="width:640px; height:200px; background:blue; display:inline-block;">
      <p>Hello</p>
   </div>
   <div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>

I could see if the height of the "p" was actually larger than 200px, but it isn't. So why doesn't it just go inside of its parent and stop messing with my layout?

To fix this, I ended up making the layout column divs relative, and using the absolute position on a child div that would be the container of the "p", but it seems like there is something obvious I am missing to make this situation simpler...

Upvotes: 0

Views: 70

Answers (2)

Josh R.
Josh R.

Reputation: 275

Inline-block does leave some whitespace that is undesired most of the time do to spaces in your code. The best solution I think is to float it and use 50% for the width.

div {
  float: right;
  width: 50%;
  height: 200px;
  background:blue;

}

the p tag will go in nicely.

example here on jsfiddle

other solutions and information here http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 4

Paulie_D
Paulie_D

Reputation: 115145

Inline block items are vertically aligned as baseline by default. Add vertical-align:top

Jsfiddle Demo

div {
    font-size:0; /* remove whitespace */
}

div div {
    font-size:1rem; /* reset font-size*/
    vertical-align: top;
}

Upvotes: 1

Related Questions