PDA

Click to See Complete Forum and Search --> : CSS div in div

leagal4ever
04-25-2009, 08:19 PM
I cant solve thise problem hoping somebody can :) there is quick sketch!
http://www.shrani.si/f/2l/Kv/4H0dv7zD/ex.png
A width should be 100% of content
B should be 100% of all place left
C 100% height of main div, if right side is larger
coldwerturkey
04-26-2009, 02:41 AM
<div style='width:100%;overflow:hidden;'>
<div style='width:50%;float:left;'></div>
<div style='width:50%;float:right;'></div>
</div>
leagal4ever
04-26-2009, 07:24 AM
Im alredy have code didnt think its important.

body{
background-image:url(graphic/background/body.jpg);
/*font-family: Verdana, Arial;
font-size:9pt;*/
font: normal 12px 'Lucida Grande',Verdana,sans-serif;
margin: 2 auto;
width: 1000px;}

/* main */
.main_windows_border {
position: absolute;
border:2px solid #804000;
padding: 2 10 2 10;
clear:both;
margin-top: 45px;
background-image:url(graphic/background/main.jpg);
width: 100%;/* make 100% screen not 1000px */}

/* left div */
.main_border {
position:relative;
border:1px solid #804000;
width:600px;
float:left;}

/* right */
.main_no_border {
float:left;
border:5px solid #804000;
width:100%;/* it make it under left div 100% need for remaining space*/
/*margin:0 0 0 3;*/
}
bpat1434
04-27-2009, 04:36 PM
Unfortunately there's no real CSS way of doing what you ask. If C is taller than B, you're fine. But if B is taller than C, then C will not automatically expand to the height of B. There is another scenario here. Here's a quick ascii sketch for you
+------------------------------------------------------------------------------+
| +--------------------------------------------------------------------------+ |
| | <----------------- A ----------------------> +-------------------------+ | |
| | ^ | | | |
| | | | <---------- B --------> | | |
| | | | | | |
| | | | | | |
| | C | | | |
| | | +-------------------------+ | |
| | | | |
| | | | |
| | v | |
| +--------------------------------------------------------------------------+ |
+------------------------------------------------------------------------------+

Now, what you do here is have some html like so:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="a">
<div id="b">
</div>
</div>
</div>
</body>
</html>

Now, if you specify A to have a width of X, with a padding-right of Y and the float right B, and give B a width of Z, the give B a display: block it will be "out of the document flow" and will be in that padded area on the right. So now C will always be at least as tall as B ;)

I hope that makes sense. You may need to tweak the css a bit here and there, but that's how I'd do it. It's considered a pseudo column. We can't do columns in CSS, so this is as close as it comes.