# CSS positioning.... crap... again

**URL:** <https://forum.kirupa.com/t/css-positioning-crap-again/266070>\
**Category:** Uncategorized\
**Created:** [July 15, 2008, 11:26pm UTC](https://forum.kirupa.com/t/css-positioning-crap-again/266070 "2008-07-15T23:26:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [July 15, 2008, 11:26pm UTC](https://forum.kirupa.com/t/css-positioning-crap-again/266070/1 "2008-07-15T23:26:34Z")

</div>

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

[http://webs.ashlandctc.org/csimmons/sites/Communicast/epicfail/pages/ninja.htm](http://webs.ashlandctc.org/csimmons/sites/Communicast/epicfail/pages/ninja.htm)

HTML:

```auto

<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:

```auto

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

---

<div class="post-metadata">

**Author:** ![sosADAMsos](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sosADAMsos](https://forum.kirupa.com/u/sosADAMsos)\
**Post date:** [July 15, 2008, 11:34pm UTC](https://forum.kirupa.com/t/css-positioning-crap-again/266070/2 "2008-07-15T23:34:55Z")

</div>

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

try adding this to the footer css:

clear:both;

---

<div class="post-metadata">

**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\
**Post date:** [July 15, 2008, 11:59pm UTC](https://forum.kirupa.com/t/css-positioning-crap-again/266070/3 "2008-07-15T23:59:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [July 16, 2008, 6:28am UTC](https://forum.kirupa.com/t/css-positioning-crap-again/266070/4 "2008-07-16T06:28:02Z")

</div>

> [@w1sh;2359341](#):
>
> …whats the best way for my layout to sticky the footer?

gross…

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