Geek Answers Handbook

CSS: the main layout issue is keeping nested elements inside each other

I continue to discover that if I have nested divs inside each other, and one of the inner ones is floating, the outer one will not expand around it.

Example:

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

What do I need to do for the outer div to cover the inner div? IE: Does this place a border / background color around it?

Also, is there a general principle that I come across here? If so, what should I look for to get a clear idea of ​​what it is?

Thanks!

Edit

Hello everybody,

Thanks for the answers, semantically correct and not, and for the links.

, Ant P , , , , .

html-, css, , , , , , , = o )

+5
6

CSS, :

<div style='background-color:red;overflow:hidden;'>
...
</div>
+15

, ( " " ), , :

+4

, CSS SO. , - Ant P. , . . overflow:hidden div. , IE, . , .

+3

div, , div. .

+1

, , , .

CSS , :

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

, , ( , " a <br> clear: both), <div>, - CSS , voodoo. , , , CSS, CSS, .

+1

This article on CSS systems is definitely worth a read. Because Darko Z said he was stunned to see the semantically incorrect answer given by Ant P.

0
source

More articles:


All Articles