CODEWITHSUNDEEP
csscss-float
CSharper
CSharper

Reputation: 5580

Floated Element applies background to other div as well

Ok So the title is kind've confusing but this is my set up.

<div id="leftPanel">
   // blah blah
</div>

<div id="rightPanel">
   // blah blah
</div>

I am floating the rightPanel next to the Left Panel. When I apply a background CSS to rightPanel it flows through and also applies to leftPanel. Why is this? Is it because I haven't defined widths? When I do define widths, it behaves as if float-left wasn't in place.

#leftPanel {
      float: left;                      
  }

  #rightPanel {       
      background: blue;       
  }

Upvotes: 0

Views: 28

Answers (1)

Ruddy
Ruddy

Reputation: 9923

Right you have an div with no defined width this is going to stretch 100% of the window width (by default).

DEMO HERE

HTML:

<div id="rightPanel">
   // blah blah
</div>

CSS:

#rightPanel {
    background: blue;
}

So what's going to happen when you float a div in front of it? The floated div is going to allow the next div to sit on the same line as it.

DEMO HERE

HTML:

<div id="leftPanel">// blah blah</div>
<div id="rightPanel">// blah blah</div>

CSS:

#leftPanel {
    float: left;
}
#rightPanel {
    background: blue;
}

Here you can see that the floated div is just sitting there and the background on the other div is not 100% any more due to the width we have now given it.

DEMO HERE

HTML:

<div id="leftPanel">// blah blah</div>
<div id="rightPanel">// blah blah</div>

CSS:

#leftPanel {
    float: left;
}
#rightPanel {
    background: blue;
    width: 32px;
}

I would recommend taking a look at this to find more out about how floats works.

Upvotes: 1

Related Questions