7 replies [Last post]
grimaldi
Offline
Enthusiast
Last seen: 9 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Just a quicky, its doing my head and I know I've missed something simple!

I've coloured the container red here but all the content runs out of it, can someone explain why?

Cheers peeps - heres the code! Smile

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="css/site.css" media="screen" />
<title></title>
</head>
<body>
<div id="container">
 
<div id="header"></div>
 
<div id="side">
<ul id="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</div>
 
<div id="main">
<div id="content">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
 
<div id="footer">
<ul class="terms">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
 
</div>					
</body>
</html>

html {}
body {
	background: #000;
	color: #fff;
	font: 80% Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	}
 
#container {
	background: #f00;
	margin: 0 auto;
	padding: 0;
	position: relative;
	text-align: left;
	width: 998px;
	}
 
 
#side {
	float: left;
	position: relative;
	width: 240px;
	}
 
#main {
	float: left;
	position: relative;
	width: 730px;
	}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 42 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

try adding overflow:hidden;

try adding overflow:hidden; to #container

grimaldi
Offline
Enthusiast
Last seen: 9 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Cheers! Can you explain why

Cheers! Can you explain why this works and if it will affect anything later on, like if I add lots more content etc?

I noticed when I added clear: both; to the #footer it seemed to sort it as well..

But I added a #mid div just after (inside) the #container - because I have a drop shadow running down the container but because the background is a gradient the top half of the containers shadow is dark going to light. So I thought I'd put a 400px long image on the #mid and then the #container which would be behind it would just have a 1px in hight image repeating behind it

..if that makes any sense lol

grimaldi
Offline
Enthusiast
Last seen: 9 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Shouldn't the container

Shouldn't the container really just expand when the content does?

I know this is happening because of #side and #main being floated left but isn't floating the #container left unnessicery?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 42 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

grimaldi wrote:Shouldn't the

grimaldi wrote:

Shouldn't the container really just expand when the content does?

I know this is happening because of #side and #main being floated left but isn't floating the #container left unnessicery?

Yes, but when floats are involved, it changes things. Yes, you dont need to float the container

grimaldi
Offline
Enthusiast
Last seen: 9 years 44 weeks ago
Timezone: GMT+1
Joined: 2008-01-28
Posts: 74
Points: 46

Haha yeah it certainly does

Haha yeah it certainly does change things?

How / why does overflow: hidden; work on that or is it just one of those things / strange fixes? I guess its OK as long as a height isn't set?

I had a similar problem when I put a #mid around the main and side divs when a background couldn't be set so I have to float #mid left - maybe I should try overflow: hidden or should I try not to get into the habbit of using it?

Cheers again! Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 42 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

to be honest, Im not sure

to be honest, Im not sure why overflow:hidden works the way it does in these cases.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CupidsToejam wrote:to be

CupidsToejam wrote:

to be honest, Im not sure why overflow:hidden works the way it does in these cases.

You might want to take a look at this page by Gary Turner, or the Float Tutorial over at maxdesign.com.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.