'Basic CSS: Float left and inline divs

I've captured an illustration of a CSS two-column layout I've set up, while using the following rule for the orange containers:

.embedded_post{
    float: left;
    width: 46%;
    margin-right: 20px;
    padding: 10px;
    display: inline-block;
}

As can be seen, the second orange container on the right column is preventing the second orange container on the left column from floating up to the top left box.

This happens apparently since float:left automatically grants the element with a block level flow.

How can I get the second box on the left column to be positioned under the first one?

csslayout


Solution 1:[1]

can you wrap your columns in another pair of divs, so that floating in the right column won't affect floating in the left?

<div id='left_column'>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
</div>

<div id='right_column'>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
</div>

css:

#left_column, #right_column {
  float:left;
}

Solution 2:[2]

you've answered it yourself, there are a couple of options:

  1. trick yourself by granting the div elements with an inline level flow, i.e. specifying display: inline (not recommended).
  2. update the markup to be more semantic and alter the layout to conform to the desired result, e.g. replacing the divs with spans (preferred).

Solution 3:[3]

The second div on the left has less width than the rest of the divs, this might have something to do with it. Also, the combination with your (desired) structure and the margin-right isn't how I would do it. In fact, the margin-right may, depending on the with of the parent div of the embedded_post divs, screw up your structure and cause postioning problems.

It works fine when I try it.

p.s. keep in mind that in Firefox, the padding adds to the width/height of the div while this doesn't happen in other browsers.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ray
Solution 2
Solution 3 paddotk

Related Questions