Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Grow div according to inside div's height

Posted on 2011-02-11
6
Medium Priority
?
519 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 10

Assisted Solution

by:P1ST0LPETE
P1ST0LPETE earned 2000 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:Gurvinder Pal Singh
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
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 …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

636 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