Solved

Grow div according to inside div's height

Posted on 2011-02-11
6
509 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

759 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now