CSS positioning.... crap... again

1

Someone do this for me the right way. :fab:

http://webs.ashlandctc.org/csimmons/sites/Communicast/epicfail/pages/ninja.htm

HTML:


<body>

<div id="header">The title of the site - Communicast, and an RSS Post-It note. Sign up for our RSS!</div>
<div id="container">
	<div id="mid">
		<div class="dropdowns">Drop Downs</div>
		<div class="summary">Summary</div>
	</div>
	<div id="content">
		<div class="links">Links</div>
		<div class="video">Video</div>
	</div>
</div>
<div id="footer">Footer</div>

</body>

CSS:


html {
	height:100%
}
body {
	margin:0 auto;
	background-color:white;
	font-family:Verdana, Geneva, sans-serif;
	font-size:1em;
	line-height:1.8em;
	color:black;
}
#container {
	width:969px;
	margin:0 auto;
}
#header {
	background-image:url('../images/header.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-color:white;
	min-height:200px;
	text-indent:-9999px;
}
.dropdowns {
	float:left;
	width:323px;
background-color:blue;
}
.summary {
	float:left;
	width:646px;
background-color:fuchsia;
}
.links {
	float:left;
	width:323px;
background-color:aqua;
}
.video {
	float:left;
	width:646px;
background-color:gray;
}
#footer {
	background-image:url('../images/footer.jpg');
	background-position:center bottom;
	background-repeat:no-repeat;
	background-color:white;
	min-height:100px;
	text-align:center;
}

Thanks. GG

2

I assume you just want the footer to fall below the other 4 divs?

try adding this to the footer css:

clear:both;

3

Wow…
Jeez…
I don’t even like myself anymore…

Thanks…

[whisper]god…[/whisper]

Edit:
Um, I mean. That wasn’t the problem.
Uh. The problem…
When you zoom in once the right side of the div’s gets cut off.

I mean, any designer worth his weight in pee knows clear:both; pfft. :ne:

Oh, and if you’re still in the helpy mood whats the best way for my layout to sticky the footer?

4

gross…

what do you mean? define a height for your container perhaps?