-1

I am trying to make 4 columns side by side, but the middle two are slightly shorter and have a single div underneath both of them. See image here: http://postimg.org/image/rw67rh5zf/

I'm sure it's something simple I'm screwing up but I can't tell what it is.

All the other posts on here similar to this are resolved by either correcting the float or the width but the inner divs have enough room to fit side by side inside and they're all float left.

HTML:

<div id="bottomDiv" style="clear:both; width:478px">
    <div id="firstCol" style="float:left; width:239px; background-color:white">
        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ol>
    </div>
    <div id="midCols" style="width:478px">
        <div id="secCol" style="float:left; clear:none; width:239px; background-color:white">
            <ol>
                <li>four</li>
                <li>five</li>
                <li>six</li>
            </ol>
        </div>
        <div id="thirdCol" style="float:left; clear:none; width:239px; background-color:white">
            <ol>
                <li>seven</li>
                <li>eight</li>
                <li>nine</li>
            </ol>
        </div>
        <div id="divBenefits" style="width:478px; background-color:#941a41; color:white">
            Benefits and Cost of Membership
        </div>
    </div>
    <div id="fourthCol" style="float:left; width:239px">
        <ol>
            <li>ten</li>
            <li>eleven</li>
            <li>twelve</li>
        </ol>
    </div>
</div>

2 Answers 2

2

You will need to float the midCols to the left and set your main div width to a wider value so it doesn't force the floating divs to wrap.

Example: http://jsfiddle.net/j1voh4kf/

<div id="midCols" style="width:478px;float:left;">

Here's a screenshot diffing your code with my changes:

enter image description here

1
  • 1
    Adam - thanks, I knew it would be something stupidly simple I missed. I had the bottomDiv set to 956 which is big enough but I must have changed it on accident while resizing things. Staring at the code so long made it hard to see my mistake. Dec 15, 2014 at 0:39
0

I would suggest separating your styles from your markup to make it a little more clear to see what is going on.

You can tweak the widths as needed from here:

#bottomDiv > div {
  float: left;
}
#midCols > div {
  float: left;
}
#divBenefits {
  background-color: #941a41;
  color: white;
  clear: both;
}
<div id="bottomDiv">
  <div>
    <ol>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </div>
  <div id="midCols">
    <div>
      <ol>
        <li>four</li>
        <li>five</li>
        <li>six</li>
      </ol>
    </div>
    <div>
      <ol>
        <li>seven</li>
        <li>eight</li>
        <li>nine</li>
      </ol>
    </div>
    <div id="divBenefits">
      Benefits and Cost of Membership
    </div>
  </div>
  <div>
    <ol>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ol>
  </div>
</div>

2
  • i do, I just combined it to keep it all together so you wouldn't have to look at two different code snippets to determine what was going on. Dec 15, 2014 at 0:29
  • Talmid - I do, I combined it to make it so I could ask the question with 1 code snippet. Thought it would make it easier to read. Dec 15, 2014 at 0:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.