CSS div in div

leagal4ever

I cant solve thise problem hoping somebody can 🙂 there is quick sketch!

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

<div style='width:100%;overflow:hidden;'>
  <div style='width:50%;float:left;'></div>
  <div style='width:50%;float:right;'></div>
</div>

leagal4ever

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

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.