Jump to content
Sign in to follow this  
chippy

2 Divs 100% height in another Div

Recommended Posts

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

Share this post


Link to post
Share on other sites

That link does not work.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Tried the display: inline and a million other CSS things and gave in to use the background image.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...