Jump to content

2 Divs 100% height in another Div

chippy

By chippy
in HTML/XHTML

 Share

Recommended Posts

chippy Newbie

chippy

Posted
Posted

Yo. Been struggling with this problem for a while now. I have 2 div boxes, left and right floated both with 100% height. Those two lies in a big div box that's also 100% height. But the 2 div boxes inside the big one, shoots out from the main box...Got a link to the hopefully soon-to-be website:http://home.no/theturkey/teamone/index.htmlHope that someone could help me.***EDIT***I might also add that the effect I'm looking for is correct displayed in Internet Explorer. So far my attempts of getting it the same in other browsers have failed.***EDIT2***The link should work now

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

I have had this problem but can't seem to find the page with the solution.Try this:

	<div id="maincolumn">  <div id="leftcolumn">  	hej  </div>  <div id="rightcolumn">  	hej  </div>                                <div style="clear:left"></div>                                <div style="clear:right"></div>		</div>

If this doesn't work an easy fix is to 'fake' it. Use a background-image in the 'maincolumn' to simulate the 2 columns stretching 100%, that way you can take out the height:100% which will stop the overshooting.Hope this helps...nice design btw

Link to comment
Share on other sites
chippy Newbie

chippy

Posted
  • Author
Posted

I was fooling around with the clear property. I tried every property, none, left, right and both. I tried to put it in the main column, left and right at different times but that didn't work. I will try what you said when I get home, but can you give me an explanation on the 2 new divs you created? Why they should be there and so on.Thank you for the tip, and for the comment of the site.*** EDIT ***Just tried it, it didn't work. Maybe I understood you wrong concerning the two extra divs you put in, if you care to explain it more detailed how you mean I could try that as well. Thank's for your effort.

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

The 2 divs I added were an attempt to clear the floats in hopes that it stop them from overflowing the main div, but obviously failed.http://www.complexspiral.com/publications/containing-floats/This article can explain better what I was hoping to do. Basically, even though your 2 divs are inside another div, they are not contained by the larger div because of the float property.As far as the background method read this article I wrote it has 2 sample sites (one without and one witht he bg. look at the source code of the latter to see how to impliment it. If this still doesn't work post your cod eand I will edit it for you)http://codebetter.blogspot.com/2005/09/css...ss-layouts.htmlCheers

Link to comment
Share on other sites
chippy Newbie

chippy

Posted
  • Author
Posted

There is probalby something I've missed and the fact that I've stared at the same code probably result in me not seeing the problem. Anyway, here's the code as it is for the moment.XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xml:lang="eng" xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>		<title>TEAM ONE - Your Slogan</title>	<link rel="stylesheet" href="style.css" type="text/css"/>	<meta name="keywords" content="game, design, cs, computer, cpl"/>	<meta name="description" content="TEAM ONE - Your Slogan"/></head><body><div id="main">  	<img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" />	<div id="logo"></div>	<img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" />	<div id="navcontainer">  <ul id="navlist">  <li><a href="#">One</a></li>  <li><a href="#">Two</a></li>  <li><a href="#">Three</a></li>  <li><a href="#">Four</a></li>  <li><a href="#">Five</a></li>  </ul>	</div>	<img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" />	<div id="maincolumn">  <div id="leftcolumn"> 	 Lorem Ipsum  </div>  <div id="rightcolumn"> 	 Lorem Ipsum  </div>    <div id="footer"> 	 Site designed and build by Cpy Designs. Use of content elsewhere not allowed.  </div>		</div></div></body></html>

CSS

html, body {	background-color: #ccc;	height: 100%;	margin: 0 auto;	padding: 0 auto;  }#main {	background-color: #fff;	border: 2px solid #aaa;	border-top: 0;	height: 100%;	margin: 0 auto;	width: 610px;}#logo {	background-image: url(images/banner.gif);	height: 175px;	margin: 0 5px;	width: 600px;}#navcontainer ul {	text-align: left;	padding: 5px 0 5px 0;	margin: 0 5px 0 5px;	background-color: #f2f2f2;	color: #000;	width: 600px;	font: normal 12px Trebuchet MS, Verdana;	line-height: 12px;}#navcontainer ul li {	display: inline;	padding: 5px 0 5px 0;}#navcontainer ul li a {	padding: 2px 10px 2px 10px;	color: #000;	text-decoration: none;}#navcontainer ul li a:hover {	background-color: #dffe7e;	color: #000;}#maincolumn {	height: 100%;	margin: 0 auto;	width: 600px;}#leftcolumn {	background-color: #f2f2f2;	float: left;	height: 100%;	width: 400px;}#rightcolumn {	background-color: #e2e2e2;	float: right;	height: 100%;	width: 195px;}#footer {	background-color: #fff;	color: #555;	font: normal 10px Verdana, sans-serif;	height: 20px;	line-height: 20px;	margin: 0 auto;	padding: 0;	text-align: center;	width: 600px;}

I hope that you can see what I've done wrong and lecture me. Thanks again for your efforts.

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

whew! Finally solved it. It was tougher than I though...I did not find a CSS solution but resorted tot he background image approach.bg2.gifHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xml:lang="eng" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/><title>TEAM ONE - Your Slogan</title><link rel="stylesheet" href="style.css" type="text/css"/><meta name="keywords" content="game, design, cs, computer, cpl"/><meta name="description" content="TEAM ONE - Your Slogan"/></head><body><div id="main"> <img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" /><div id="logo"></div><img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" /><div id="navcontainer"> <ul id="navlist"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul></div><img src="images/big_spacer.gif" style="height: 10px; margin: 0 5px; width: 600px;" /><div id="maincolumn"> <div id="leftcolumn">  Lorem Ipsum </div> <div id="rightcolumn">  Lorem Ipsum </div>  <div id="footer">  Site designed and build by Cpy Designs. Use of content elsewhere not allowed. </div> </div></div> </body></html>

CSS

html, body {background-color: #ccc;height: 100%;margin: 0 auto;padding: 0 auto;  background-image:url(bg2.gif);background-repeat: repeat-y;background-position:center;}#main {background-color: #fff;border: 0px solid #aaa;border-top: 0;height: 100%;margin: 0 auto;width: 610px;}#logo {background-image: url(images/banner.gif);height: 175px;margin: 0 5px;width: 600px;}#navcontainer ul {text-align: left;padding: 5px 0 5px 0;margin: 0 5px 0 5px;background-color: #f2f2f2;color: #000;width: 600px;font: normal 12px Trebuchet MS, Verdana;line-height: 12px;}#navcontainer ul li {display: inline;padding: 5px 0 5px 0;}#navcontainer ul li a {padding: 2px 10px 2px 10px;color: #000;text-decoration: none;}#navcontainer ul li a:hover {background-color: #dffe7e;color: #000;}#maincolumn {height: 100%;margin: 0 auto;width: 600px;}#leftcolumn {height: 100%;background-color: #f2f2f2;float: left;width: 400px;}#rightcolumn {height: 100%;background-color: #e2e2e2;float: right;width: 195px;}#footer {clear: both;background-color: #fff;color: #555;font: normal 10px Verdana, sans-serif;height: 20px;line-height: 20px;margin: 0 auto;padding: 0;text-align: center;width: 600px;}

Link to comment
Share on other sites
chippy Newbie

chippy

Posted
  • Author
Posted

Thank you!I can see clearely what you meant by the background solution now, and I'm suprised I didn't come up with that myself.If anyone could tell me a solution the CSS way I'd appreciate it, although it's not neccesary.Thanks again.

Link to comment
Share on other sites
F-Man Member

F-Man

Posted
Posted

Well they do take 100% of the window size. Why they do that instead of 100% of the div is because they're floated. Maybe a CSS way to make it work would be to make them inline (display: inline) but that might make it impossible to give them any height.Also, XHTML 1.1 is XML only. Use XHTML 1.0.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...