Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div Height 5

Status
Not open for further replies.
ca8msm

ca8msm

Programmer
May 9, 2002
11,327
GB
In the following example, you can see that I have created a page which essentially has 4 differently coloured sections. I have managed to set the relevant page and div tag colors so that each background color seems to join it's adjoining columns.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>Paye Layout Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
} 
 
#pagewidth{ 
 width:761px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
 background-color:#C0FFC0; 
} 
 
#header{
 position:relative; 
 height:113px; 
  background-color:#FF0000; 
 width:100%;
} 
 
#leftcol{
 width:150px; 
 float:left; 
 position:relative; 
 background-color:#C0FFC0; 
 }
 
#maincol{background-color: #FFFFC0;  
 float: right; 
 display:inline; 
 position: relative; 
 width:611px; 
 }
 
#footer{
 height:150px; 
  background-color:#0000FF; 
 clear:both;
 } 
</style>

</head>
<body>
<div id="pagewidth" >
	<div id="header" > Head </div>
		<div id="wrapper">
			<div id="maincol" >
			 <p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			</div>
			<div id="leftcol" >
			<p>
			Small Text			
			</p></div>
</div>
	<div id="footer" > Footer 
	</div>
	</div>
</body>
</html>

However, if you swap the text in the "maincol" div with the text in the "leftcol", the maincol color no longer joins up with the footer div.

Does this make sense, and if so, what do people recommend in this situation (bearing in mind that the text from both "leftcol" and "maincol" would be dynamic so there would be situations where one column is longer than the other and vice-versa)?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Sort by date Sort by votes
I don't know how to fix it, but I can tell you why switching the text "changes" the behavior. In the code you posted, leftcol is actually doing the same thing. You just can't see it because the background color of #pagewidth matches the background color of #leftcol. So it looks like the columns are aligned, but they're really not.

Adam
 
Upvote 0 Downvote
If you could count on having JavaScript active on people's browsers, you could call the following function with the BODY tag's ONLOAD event:
Code: 
<script>
function whichIsBigger()
{
 var one = document.getElementById("maincol");
 var two = document.getElementById("leftcol");
 var height = (one.clientHeight>two.clientHeight)
    ?one.clientHeight
    :two.clientHeight;
 one.style.height = height;
 two.style.height = height;
}
</script>

--Dave
 
Upvote 0 Downvote
You can set the height of the leftcol and maincol styles to 100%, but that will only work if the height of the wrapper DIV is set also. You can modify the script I posted above to save a line of code and one line of redundant processing as follows:
Code: 
<script>
function whichIsBigger()
{
 var one = document.getElementById("maincol");
 var two = document.getElementById("leftcol");
 var height = (one.clientHeight>two.clientHeight)
    ?one.clientHeight
    :two.clientHeight;
[b] wrapper.style.height = height;[/b]
}
</script>

...but you will also have to add: height:100%; to both the leftcol and maincol styles.

Actually, if you do that, it appears (in IE6, anyway), that you can further reduce the whichIsBigger() function to simply:
Code: 
<script>
function whichIsBigger()
{
 wrapper.style.height = wrapper.offsetHeight;
}
</script>

Huh.

As I said, of course, this relies on JavaScript being enabled in the user's browser.

--Dave
 
Upvote 0 Downvote
If it was me, I'd look into using a table, If possible,

something like ..

Code: 
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
html,body
{
 margin:0;
 padding:0;
 height:100%;
 border:none; 
}

#header{
 background:#FF0000;
 heigth:10%;
 text-align:center;
}
#leftcol{
 background:#C0FFC0;
 width:25%;
 }
#maincol{
 background:#FFFFC0;  
 width:75%;
 }
#footer{
 height:10%;
 background:#0000FF;
 }
</style>

</head>

<body>
<center>
<table border="0" cellpadding="2" cellspacing="0" width="730" height="100%">
 <tbody>
    <tr><td id="header" colspan="2">
 Head 
 </td></tr>
       <tr><td id="leftcol" align=left valign=top>            
Small Text
            </td>
<td id="maincol" align=left valign=top>

sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 </td></tr>
<tr>
 <td id="footer" colspan="2"> Footer
    </td>
    </tr>
 </tbody>
</table>
</center>
</body>
</html>
 
Upvote 0 Downvote
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>Paye Layout Test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style>
html,body
{
 margin:0;
 padding:0;
 border:none; 
}

#header{
 background:#FF0000;
 height:70px;
 text-align:center;
}
#leftcol{
 background:#C0FFC0;
 width:25%;
 }
#maincol{
 background:#FFFFC0;  
 width:75%;
 }
#footer{
 height:70px;
 background:#0000FF;
 }
</style>

</head>

<body>
<center>
<table border="0" cellpadding="2" cellspacing="0" width="700" height="70%">
 <tbody>
    <tr><td id="header" colspan="2">
 Head 
 </td></tr>
       <tr><td id="leftcol" align=left valign=top>            
Small Textsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </td>
<td id="maincol" align=left valign=top>

sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 </td></tr>
<tr>
 <td id="footer" colspan="2"> Footer
    </td>
    </tr>
 </tbody>
</table>
</center>
</body>
</html>


... even.
 
Upvote 0 Downvote
actually you have to remove the

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

because tables don't have a height attribute in any version of HTML and when you use the doctype which includes the URL you trigger Standards mode, this causes the rendering engine to try to follow the HTML and CSS specifications more closely.
 
Upvote 0 Downvote
Thanks for the replies,

adam0101 - Sorry, I maybe didn't explain properly. I knew why it looked like that (I had set the background color of the "pagewidth" div to be the same color of the "leftcol" div so that it would appear to blend in). The problem was then if the "maincol" was smaller then it obviously didn't blend in as it was a different color. What I was looking for was actually a way to make them both blend irrelevant of their sizes.

LookingForInfo - That looks like a potential solution. I know that all of my users will have javascript enabled for the current site that I'm working on so I may go with this (however, any future sites may not have this guarentee so it isn't a "complete" fix).

Fendal - I was actually trying to stay clear of tables for the page layout (and part of the spec is to have a specific doctype anyway) but thanks for the solution as it does work and at least if I can't use it, it may help others.

All - This does seem a bit strange to me that something, that appears to be fairly easy in theory, can't be accomodated easily by CSS (i.e workarounds using javascript, tables etc). Has anyone else been in this situation and what solution(s) have you used?

Thanks,
Mark


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Thanks Chris - that's the kind of solution I was looking for.

Thanks to all that offered other solutions as well.




____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
653
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
204
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
141
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
226
ChrisHirst
ChrisHirst
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
463
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top