Menu
I don't know if it's a common problem, but I can't find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>liquid test</title> <style type="text/css" media="screen"> body { margin: 0; padding: 0; height:100%; } #nav { float: left; width: 25%; height: 150px; background-color: #999; margin-bottom: 10px; } #content { float: left; margin-left: 1%; width: 65%; height: 150px; background-color: #999; margin-bottom: 10px; } #wrap { background-color:#DDD; height:100%; } </style> </head> <body> <div id="wrap"> <h1>wrap1 </h1> <div id="nav"></div> <div id="content"><a href="index.htm">< Back to article</a></div> </div> </body> </html> 
895
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
Nesting DivA div can contain a number of other divs ( child div ) like HTML Tables . This is called Nesting Div .
If you want the two div s to be displayed one above the other, the simplest answer is to remove the float: left; from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
Aside from the clear: both hack, you can skip the extra element and use overflow: hidden on the wrapping div:
<div style="overflow: hidden;"> <div style="float: left;"></div> <div style="float: left;"></div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
