0

I have the following code:

<div style="background-color:Aqua">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>

I want to display...

left                                                                        right

...with an aqua background, but blocks do not fill with color.

What am I doing wrong?

iegik
  • 1,429
  • 1
  • 18
  • 30
clarity
  • 421
  • 1
  • 8
  • 19

3 Answers3

0

Clear your floats, for example with overflow: hidden

<div style="background-color:Aqua; overflow: hidden">
    <div style="float:left">left</div>
    <div style="float:right">right</div>
</div>
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • `overflow` triggers `hasLayout` in IE7 – IE8 treats it differently – crowjonah Nov 27 '12 at 00:54
  • @crowjonah so what? the question wasn't how different versions of IE treating it - and it works in IE7 and IE8 – Zoltan Toth Nov 27 '12 at 01:04
  • Your answer doesn't work if there are absolutely positioned elements at play – I'm just trying to help the asker, and I was the first to upvote your answer, so calm down, eh? – crowjonah Nov 27 '12 at 01:17
  • 1
    @crowjonah sorry man.. you're right about absolutely positioned elements, but the OP didn't mention anything except 2 floated div-s in a container.. even the IE7 requirement came later in the comments.. – Zoltan Toth Nov 27 '12 at 01:31
0

Float - rule for positioning depended on something, so you will never align object without that something. So, you should use following sequence:

<div style="background-color:Aqua">
  <div style="float:right;max-width:50%;">Right</div><!-- 100% by default -->
  <div>Left</div>
  <div style="clear:right;"></div><!-- closing the floating -->
</div>

and otherwise:

<div style="background-color:Aqua">
  <div style="float:left;max-width:50%;">Left</div>
  <div>Right</div>
  <div style="clear:left;"></div>
</div>

or both:

<div style="background-color:Aqua">
  <div style="float:left;max-width:30%;">Left</div>
  <div style="float:right;max-width:30%;">Right</div>
  <div>Center</div>
  <div style="clear:both;"></div>
</div>
iegik
  • 1,429
  • 1
  • 18
  • 30
  • You can also try to another solutions: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell – iegik Nov 27 '12 at 13:58
0

Might I suggest using a robust clearfix, particularly this one: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

Add this CSS:

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

and then give your containing, parent aqua div a class="clearfix"

Here's a fiddle demonstration.

crowjonah
  • 2,858
  • 1
  • 23
  • 27