CSS: background color pf parent DIVs not wrapping around child DIVs?

CSS: background color pf parent DIVs not wrapping around child DIVs? - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: CSS: background color pf parent DIVs not wrapping around child DIVs? (/showthread.php?tid=25707)

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]chson[/eluser]
I've attached how the following code is rendered in Firefox. What I'm attempting to do is wrap the black background around the #logo and #menu DIVs. I realize I can do this by specifying a fixed height in #header but I'd like for this background to be dynamic. Anybody have any ideas? Thanks.

CSS:

Code:
#header, #footer {

        background-color:#222222;

        color:#FFFFFF;

        margin:0;

        padding:5px;

}

#logo {

        margin:0;

        padding:0;

        float: left;

}

#menu {

        margin:0 10px;

        padding:0;

        color:#BCFC3D;

        float:left;

}

HTML:

Code:
<div id="header">

        <div id="logo">

                &lt;?=anchor('/','Logo');?&gt;

        </div>

        <div id="menu">

                &lt;?=anchor('/tour','Tour');?&gt;

                &lt;?=anchor('/about','About');?&gt;

        </div>

</div>

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]LifeSteala[/eluser]
You need to add this CSS.

Code:
.clearLeft {

  clear: left;

}

Then add a br as I have shown you here.

Code:
<div id="header">

        <div id="logo">

                &lt;?=anchor('/','Logo');?&gt;

        </div>

        <div id="menu">

                &lt;?=anchor('/tour','Tour');?&gt;

                &lt;?=anchor('/about','About');?&gt;

        </div>

        <br class="clearLeft" /> &lt;!-- ADD THIS LINE --&gt;

</div>

That should do it.

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]chson[/eluser]
Thanks LifeSteala! I also noticed that just adding the BR by itself with no css works as well. Crazy!

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]LifeSteala[/eluser]
Your welcome. I'll try to explain why: you have two divs, logo and menu, which are both floating. So your basically saying that both div's is not quite within the header div. So you add a line break after the floating div's which then renders correctly.

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]dchuk[/eluser]
You could also add overflow: hidden to the header div. That would eliminate the need for the additional br tag which is good for limiting code clutter.

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]Aken[/eluser]
A set height of the parent div is an ideal solution, but if the height will be variable, a clearing element is the recommended method. Doesn't need to be a <br /> tag, can be almost anything.

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]umefarooq[/eluser]
just put will work

#header, #footer {
background-color:#222222;
color:#FFFFFF;
margin:0;
padding:5px;
float:left
}

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-21-2009

[eluser]Aken[/eluser]
[quote author="umefarooq" date="1261482559"]just put will work

#header, #footer {
background-color:#222222;
color:#FFFFFF;
margin:0;
padding:5px;
float:left
}[/quote]
Won't work without writing more CSS. This isn't a suitable solution for fixing the most basic "problem" of floating elements.

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 12-22-2009

[eluser]John_Betong[/eluser]
 
Here we go - try this

 
 
 

CSS: background color pf parent DIVs not wrapping around child DIVs? - El Forum - 01-06-2010

[eluser]cyberbuff[/eluser]
I had the same problem with two floated divs (one floated right and the other left). I just added <div style="clear:both;"></div> and it worked.