• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 520
  • Last Modified:

Grow div according to inside div's height

Hi there,

I am trying to make the green area go below the white one and the white one to grow at the size of the blue. I also need the two small lines from my left menu to disappear,  I have tried somethings but it is not working. Can you help me please? I am stocked here

Cheers! Screen shot of what my page looks like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
        height:100%;
	background-color: #eeeeee;
	text-align: center;
	top:0px;
	margin: 0px;
}
h1{
	color:#666666;
}
.container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	min-width: 960px;
	max-width: 1100px;
	left: 0px;
	top: 0px;
	background-color: #FFFFFF;
}
.header {
	width:960px;
	top: 0px;
	position: relative;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	text-align:left;
	vertical-align: super;
	z-index:1;
}
.content {
	position:relative; 
	left:0px; 
	top:0px; 
	width: auto;
	height: auto;
	min-height:960px;
	z-index:2;
	layer-background-color: #ffffff; 
	border: 1px none #000000;
}
.footer {
	position:relative; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100px; 
	z-index:3; 
	background-color: #00FF00; 
	layer-background-color: #00FF00; 
	border: 1px none #000000;
}
.left-bar{
	position:relative;
	left:4px;
	top:0px;
	width:inherit;
	min-height:200px;
	z-index:4;
	background-color: #ffffff;
	float:left;
	layer-background-color: #00FF00;
	border: 1px none #000000;
	background-image: url(images/linea-med-naranja-dyd.jpg);
	background-repeat: repeat-y;
	color: #167bb2;
	font-weight: bold;
}
h3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-indent: 10px;
}
.content-main{
	position:relative;
	float:left;
	left:15px;
	right: 15px;
	top:20px;
	min-width: 737px;
	min-height: 1000px;
	z-index:4;
	border: 2px solid #157ab3;
	background-color: #c9e9fa;
	padding: 5px;
}
.content-message{
	position:relative; 
	left:15px; 
	right: 15px;
	top:10px; 
	width: auto; 
	min-height: inherit;
	z-index:4; 
	background-color: #CCCCCC;
	layer-background-color: #00FF00; 
	border: 1px none #000000;
}
.content-title{
	position:relative;
	left:15px;
	right: 15px;
	top:10px;
	width: auto;
	min-height: inherit;
	z-index:4;
	layer-background-color: #00FF00;
	border-top: 1px none #000000;
	border-right: 1px none #000000;
	border-bottom: 2px solid #167bb2;
	border-left: 1px none #000000;
}
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
}

/*Table CSS */

table.nice-table  {border:2px solid #f9bf16; border-collapse:collapse; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;}
table.nice-table th {background:#f9bf16; padding:5px 0; border-right:1px solid #f8ca45;}
table.nice-table td {background:#e5f7fd; padding:5px 10px; color:#1a4657; border-right:1px solid #f9bf16; vertical-align:top; text-align:left;}
table.nice-table tr.row-yallow td {background:#fde5a2; border-bottom:2px solid #f9bf16; color:#3a3321;}
.content-title1 {	position:relative;
	left:15px;
	right: 15px;
	top:10px;
	width: auto;
	min-height: inherit;
	z-index:4;
	layer-background-color: #00FF00;
	border-top: 1px none #000000;
	border-right: 1px none #000000;
	border-bottom: 2px solid #167bb2;
	border-left: 1px none #000000;
}

-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
	
	  <div id="Layer1" style="position:absolute; left:0px; top:52px; width:100%; height:43px; z-index:1; background-color: #fabf16; layer-background-color: #FF9933; border: 1px none #000000;"></div>
	  <div align="left">
	  <div class="container">
	    <div class="header" id="Header-Layer" >
			<div style="position:relative">
				<img src="images/dando-y-dando.png" width="120px" height="100px">
			DYDS
			</div>
	    </div>
	      <div class="content" id="Content-Layer" >
		  	<div class="left-bar" id="Content-Left-Bar-Layer">
			<img src="images/linea-sup-naranja-dyd.jpg" >
		  	  <h3>Barra de navegaci&oacute;n</h3>
		  	  <blockquote style="text-decoration:underline; ">
				  Opcion 1<BR>
				  Opcion 2
	  	      </blockquote>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <img src="images/linea-inf-naranja-dyd.jpg" width="192" height="25">
		  	</div>
		  	<div style="float:left;">
		  	<div class="content-message" id="Content-Message-Layer">Mensaje de </div>
            <div class="content-title1" id="Content-Title-Layer">
              <h1>T¿tulo</h1>
            </div>			  
            <div class="content-main" id="Content-Main-Layer">Contenido
				  <table width="700px" class="nice-table">
                    <tr>
                      <th>asdfa</th>
                      <th>3214432</th>
                      <th>42134321</th>
                      <th>dsasdadsafsddfdsafsfasdfas</th>
                      <th>2134</th>
                      <th>dsfaf</th>
                      <th>dsfadsa</th>
                      <th>dsasdfsad</th>
                      <th>rewrenndwrtes dafsdafsadfasfs adrwterre</th>
                      <th>qerrewq</th>
                    </tr>
                    <tr>
                      <td>4123432</td>
                      <td>ewqrew</td>
                      <td>65745</td>
                      <td>&nbsp;</td>
                      <td>qwerewr kjlkjlk klj lkjlklk lkj </td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="row-yallow">
                      <td>324341</td>
                      <td>&nbsp;</td>
                      <td>wqeerw</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                      <td>!@#$@#$</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>weqrew</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>weqrewr</td>
                    </tr>
                  </table>
				</div>
			</div>
        </div>
	      <div class="footer" id="Footer-Layer" >c</div>
      </div>
</div>
      </div>
    </div>
</body>
</html>

Open in new window

0
degaray
Asked:
degaray
2 Solutions
 
P1ST0LPETECommented:
The problem with your content extending beyond your footer is caused by applying "float" to some of your inner <div> tags.  To counter this, you need to clear the float at the end of the <div>'s that you have this applied on.

See code below:
 
</div>
            <div style="clear: both;"></div>
        </div>
	      <div class="footer" id="Footer-Layer" >c</div>
      </div>

Open in new window


Also, attached below is your full code with the content growing to fit.

Regarding the 2 lines in your menu, I'm not sure what you are talking about.  Are you talking about your Opcion's being underlined?
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
        height:100%;
	background-color: #eeeeee;
	text-align: center;
	top:0px;
	margin: 0px;
}
h1{
	color:#666666;
}
.container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	min-width: 960px;
	max-width: 1100px;
	left: 0px;
	top: 0px;
	background-color: #FFFFFF;
}
.header {
	width:960px;
	top: 0px;
	position: relative;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	text-align:left;
	vertical-align: super;
	z-index:1;
}
.content {
	position:relative; 
	left:0px; 
	top:0px; 
	width: auto;
	height: auto;
	min-height:960px;
	z-index:2;
	layer-background-color: #ffffff; 
	border: 1px none #000000;
}
.footer {
	position:relative; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100px; 
	z-index:3; 
	background-color: #00FF00; 
	layer-background-color: #00FF00; 
	border: 1px none #000000;
}
.left-bar{
	position:relative;
	left:4px;
	top:0px;
	width:inherit;
	min-height:200px;
	z-index:4;
	background-color: #ffffff;
	float:left;
	layer-background-color: #00FF00;
	border: 1px none #000000;
	background-image: url(images/linea-med-naranja-dyd.jpg);
	background-repeat: repeat-y;
	color: #167bb2;
	font-weight: bold;
}
h3{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-indent: 10px;
}
.content-main{
	position:relative;
	float:left;
	left:15px;
	right: 15px;
	top:20px;
	min-width: 737px;
	min-height: 1000px;
	z-index:4;
	border: 2px solid #157ab3;
	background-color: #c9e9fa;
	padding: 5px;
}
.content-message{
	position:relative; 
	left:15px; 
	right: 15px;
	top:10px; 
	width: auto; 
	min-height: inherit;
	z-index:4; 
	background-color: #CCCCCC;
	layer-background-color: #00FF00; 
	border: 1px none #000000;
}
.content-title{
	position:relative;
	left:15px;
	right: 15px;
	top:10px;
	width: auto;
	min-height: inherit;
	z-index:4;
	layer-background-color: #00FF00;
	border-top: 1px none #000000;
	border-right: 1px none #000000;
	border-bottom: 2px solid #167bb2;
	border-left: 1px none #000000;
}
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
}

/*Table CSS */

table.nice-table  {border:2px solid #f9bf16; border-collapse:collapse; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;}
table.nice-table th {background:#f9bf16; padding:5px 0; border-right:1px solid #f8ca45;}
table.nice-table td {background:#e5f7fd; padding:5px 10px; color:#1a4657; border-right:1px solid #f9bf16; vertical-align:top; text-align:left;}
table.nice-table tr.row-yallow td {background:#fde5a2; border-bottom:2px solid #f9bf16; color:#3a3321;}
.content-title1 {	position:relative;
	left:15px;
	right: 15px;
	top:10px;
	width: auto;
	min-height: inherit;
	z-index:4;
	layer-background-color: #00FF00;
	border-top: 1px none #000000;
	border-right: 1px none #000000;
	border-bottom: 2px solid #167bb2;
	border-left: 1px none #000000;
}

-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
    function MM_reloadPage(init)
    {  //reloads the window if Nav4 resized
        if (init == true) with (navigator)
        {
            if ((appName == "Netscape") && (parseInt(appVersion) == 4))
            {
                document.MM_pgW = innerWidth; document.MM_pgH = innerHeight; onresize = MM_reloadPage;
            } 
        }
        else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
//-->
</script>
</head>

<body>
	
	  <div id="Layer1" style="position:absolute; left:0px; top:52px; width:100%; height:43px; z-index:1; background-color: #fabf16; layer-background-color: #FF9933; border: 1px none #000000;"></div>
	  <div align="left">
	  <div class="container">
	    <div class="header" id="Header-Layer" >
			<div style="position:relative">
				<img src="images/dando-y-dando.png" width="120px" height="100px">
			DYDS
			</div>
	    </div>
	      <div class="content" id="Content-Layer" >
		  	<div class="left-bar" id="Content-Left-Bar-Layer">
			<img src="images/linea-sup-naranja-dyd.jpg" >
		  	  <h3>Barra de navegaci&oacute;n</h3>
		  	  <blockquote style="text-decoration:underline; ">
				  Opcion 1<BR>
				  Opcion 2
	  	      </blockquote>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <p>&nbsp;</p>
		  	  <img src="images/linea-inf-naranja-dyd.jpg" width="192" height="25">
		  	</div>
		  	<div style="float:left;">
		  	<div class="content-message" id="Content-Message-Layer">Mensaje de </div>
            <div class="content-title1" id="Content-Title-Layer">
              <h1>T¿tulo</h1>
            </div>			  
                <div class="content-main" id="Content-Main-Layer">Contenido
				  <table width="700px" class="nice-table">
                    <tr>
                      <th>asdfa</th>
                      <th>3214432</th>
                      <th>42134321</th>
                      <th>dsasdadsafsddfdsafsfasdfas</th>
                      <th>2134</th>
                      <th>dsfaf</th>
                      <th>dsfadsa</th>
                      <th>dsasdfsad</th>
                      <th>rewrenndwrtes dafsdafsadfasfs adrwterre</th>
                      <th>qerrewq</th>
                    </tr>
                    <tr>
                      <td>4123432</td>
                      <td>ewqrew</td>
                      <td>65745</td>
                      <td>&nbsp;</td>
                      <td>qwerewr kjlkjlk klj lkjlklk lkj </td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="row-yallow">
                      <td>324341</td>
                      <td>&nbsp;</td>
                      <td>wqeerw</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                      <td>!@#$@#$</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>weqrew</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>&nbsp;</td>
                      <td>weqrewr</td>
                    </tr>
                  </table>
				</div>
                
			</div>
            <div style="clear: both;"></div>
        </div>
	      <div class="footer" id="Footer-Layer" >c</div>
      </div>
</div>
</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
also i see that min-height of content and content-main is different. Please make them same
0
 
thehagmanCommented:
Maybe this is helpful (or other search results for "css holy grail")
http://matthewjamestaylor.com/blog/perfect-3-column.htm
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
degarayAuthor Commented:
Hi P1ST0LPETE thanks, that solved it! About the lines in the menu. I have set up a background with two orange/yellow lines to simulate the right and left borders of the menu (left bar), then I am placing an image with the top border and the curved corners, same thing with in the bottom of the menu, however the bottom part of the menu shows two small lines below my bottom line corresponding to the background's border simulation.
0
 
P1ST0LPETECommented:
Degaray,

I took some spare time and re-made your layout, as your markup was hurting my eyes :-)  Hope you don't mind.
The content section now grows to fit it's content properly and your menu no longer has the lines that were giving you trouble.
Also I followed some of the styling patterns from the website: http://www.dandoydando.mx/ which seems to be what you were following as well.

Concerning the gold bar at the top of the page, given your layout I personally thought it looked best if it didn't stretch across the full screen, however I provided styling to make it do that as well.  Simply un-comment the body style at the top of the css and the gold bar will stretch across the screen. I also created a graphic that makes the gold bar, which you will find attached.

Anyway, here is the re-make of your markup:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>dando-y-dando</title>
    <style type="text/css">
        body { background-color: #EEE; margin: 0px; }
        /*body { background-image: url("gold-bar.png"); background-repeat: repeat-x; }*/
        .page { margin: 0px auto; width: 1100px; background-color: #FFF; }
        .header { height: 150px; width: 100%; background-image: url("gold-bar.png"); background-repeat: repeat-x; }
        .header img { margin-left: 30px; }
        .content { margin: 25px 0px; width: 100%; }
        .footer { height: 100px; width: 100%; background-color: #F9BF16; }
        
        .menu { float: left; margin-left: 30px; }
        .menu-content { min-height: 250px; width: 174px; padding: 0px 5px; }
        .menu-content { border: solid 4px #F9BF16; border-top: 0px; border-bottom: 0px; }
        .menu-content h3 { color: #167BB2; margin: 0px auto; }
        .menu-content ul { margin: 10px 0px 0px 30px; padding: 0px; }
        .menu-content li { list-style-image: url("http://www.dandoydando.mx/images/arrow-2.gif"); }
        .menu-content a { color: #167bb2; text-decoration: none; font-weight: bold; }
        .menu-content a:hover { color: #F00; }
        
        .content-main { width: 815px; float: left; margin-left: 30px; }
        .content-message { background-color: #CCC; width: 100%; }
        .content-title { border-bottom: 2px solid #167BB2; }
        .content-body { border: solid 2px #167BB2; min-height: 400px; width: 801px; margin-top: 10px; padding: 5px; background-color: #C9E9FA; }
        .content-body table { border: solid 2px #F9BF16; border-collapse: collapse; }
        .content-body td { text-align: center; padding: 0px 5px; }
        .content-body thead { background-color: #F9BF16; }
        .content-body thead td { font-weight: bold; border: solid 1px #F8CA45; border-bottom: 0px; padding: 15px 0px; }
        .content-body tbody { background-color: #E5F7FD; }
        .content-body tbody td { border: solid 1px #F9BF16; border-bottom: solid 1px #FDE5A2; }
        .content-body tbody .yallow { background-color: #FDE5A2; }
        .content-body tfoot { background-color: #E5F7FD; }
        .content-body tfoot td { border: solid 1px #F9BF16; border-top: solid 2px #F9BF16; }
    </style>
</head>
<body>
    <div class="page">
        <div class="header"><img alt="" src="http://www.dandoydando.mx/images/dandoy-dando.png" /></div>
        <div class="content">
            <div class="menu">
                <img alt="" src="http://www.dandoydando.mx/images/categories-bg-t.gif" />
                <div class="menu-content">
                    <h3>Barra de navegación</h3>
                    <ul>
                        <li><a href="#">Opcion 1</a></li>
                        <li><a href="#">Opcion 2</a></li>
                    </ul>
                </div>
                <img alt="" src="http://www.dandoydando.mx/images/categories-bg-b.gif" />
            </div>
            <div class="content-main">
                <div class="content-message">
                    <span>Mensaje de</span>
                </div>
                <div class="content-title">
                    <h1>T¿tulo</h1>
                </div>
                <div class="content-body">
                    <span>Contenido</span>
                    <table>
                        <thead>
                            <tr>
                                <td><span>Header 1</span></td>
                                <td><span>Header 2</span></td>
                                <td><span>Header 3</span></td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="height: 100px;">
                                <td><span>Row 1 Cell 1</span></td>
                                <td><span>Row 1 Cell 2</span></td>
                                <td><span>Row 1 Cell 3</span></td>
                            </tr>
                            <tr class="yallow">
                                <td><span>Row 2 Cell 1</span></td>
                                <td><span>Row 2 Cell 2</span></td>
                                <td><span>Row 2 Cell 3</span></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td><span>Footer 1</span></td>
                                <td><span>Footer 2</span></td>
                                <td><span>Footer 3</span></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

Open in new window

gold-bar.png
0
 
degarayAuthor Commented:
Thanks you all, specially P1ST0LPETE I am very thankful about your answers and the code was much more than what I was expecting A++
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now