-2

I have a problem with the floating. I'll try to explain my problem. What I have is 6 menu bars I want to float. 3 on the left and 3 on the right. However I want the ones on the right to come after the 3 on the left. As in they are no higher than the bottom of the last left one. Similar to the picture someone else had (Credit goes to the topic here

enter image description here

However instead I am getting all of the bars in the same rows like so.

enter image description here

I have provided ALL CSS proporties below. Can anyone figure out why I can't get it the way I wanted? (The bar-groups go inside the gameplay-info-content)

#gameplay-info-content {width: 688px;}
#bar-group-left {float: left; margin: 8px;}
#bar-group-right {float: right; margin: 8px;}
Community
  • 1
  • 1
Jeremy Beare
  • 489
  • 3
  • 8
  • 22
  • 1
    WHen you float something, those somethings are removed from all kinds of sizing/positioning calculations. if you want your "right" elements to be "below" the "left" elements, you'll have to do something like put a `
    ` in between.     – Marc B Feb 15 '14 at 21:30

1 Answers1

2

HTML:

<div class="leftcolums">
    <div class="left">1</div>
    <div class="left">2</div>
    <div class="left">3</div>    
</div>

//If you want to achieve the first image add a div with class clear below
<div class="clear"></div>

<div class="rightcolums">
    <div class="right">4</div>
    <div class="right">5</div>
    <div class="right">6</div>
</div>
<div class="clear"></div>

STYLES:

.leftcolums{float:left;}
.rightcolums{float:right;}
.clear{clear:both;}
Ricky Stam
  • 2,116
  • 21
  • 25