Solved

Grow div according to inside div's height

Posted on 2011-02-11
6
513 Views
Last Modified: 2012-06-21
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
Comment
Question by:degaray
6 Comments
 
LVL 10

Assisted Solution

by:P1ST0LPETE
P1ST0LPETE earned 500 total points
ID: 34876507
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34876767
also i see that min-height of content and content-main is different. Please make them same
0
 
LVL 20

Expert Comment

by:thehagman
ID: 34879716
Maybe this is helpful (or other search results for "css holy grail")
http://matthewjamestaylor.com/blog/perfect-3-column.htm
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Author Comment

by:degaray
ID: 34879737
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
 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 500 total points
ID: 34881308
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
 
LVL 4

Author Closing Comment

by:degaray
ID: 34883483
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS in HTML 5 54
Validating Date 4 29
CSS for Popup in ASP.NET 4 19
output in HTML format powershell 6 24
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question