Quick bit of CSS help

jack.mitchell · 20 Apr 2010 at 22:16

I'm currently working on a website and i've hit a bit of a style problem that i'm not sure how to search for or fix. I'm basically trying to get a container to hold two columns ands fill the container without generating loads of empty white space or one of the columns not stretching the full length of the container, it's hard to explain so i've posted some screenshots below:

Shot1 CSS - http://pastebin.com/nK8htHAx
Shot2 CSS - http://pastebin.com/fg3S9PiL

The main differences are that I have height: 100% in #links and #body on the second shot, but not on the first.

I want it to look like the first screenshot but with the links column stretching all the way down to the bottom. I'm sure it's something obvious...

TIA!

Edit: The HTML code http://pastebin.com/HqRiBJh7

BFCTom · 20 Apr 2010 at 22:24

I think what you're wanting is a Faux Column.

jack.mitchell · 21 Apr 2010 at 00:15

Fantastic mate, got it sorted! Tricky bit of terminology to search for when you don't know the technique!

Cheers,
Jack.

Phoenixdancer · 21 Apr 2010 at 02:22

Omg i could so have used this for mywebsite:
http://www.code-sucks.com/css layouts/faux-css-layouts/3-column-css-layouts/faux-23-3-col/

jack.mitchell · 21 Apr 2010 at 12:41

Ok, another quick one. I can't get the padding right on my footer, I want to place the text in the middle vertically, but i can't seem to do iteither with padding or vertical-align. The result I get below is with just 1px of padding at the top of the container:

Code:

#footer {
	padding-top: 1px;
	padding-left: 18px;
	vertical-align: text-middle;
	background:url('../images/gradBack.jpg') repeat 0 0;
	height: 25px;
	clear: both;
	border: 1px solid black;
}

Thanks again!

jack.mitchell · 21 Apr 2010 at 13:59

Ok I sorted it with a dirty one line hack by setting the line-height to the same size as the container.

Code:

#footer {
	background:url('../images/gradFoot.jpg') repeat 0 0;
	line-height: 30px;
	height: 30px;
	padding: 0 0 0 18px;
	clear: both;
	color: white;
}

BFCTom · 21 Apr 2010 at 14:17

jack.mitchell said:
Fantastic mate, got it sorted! Tricky bit of terminology to search for when you don't know the technique!

Cheers,
Jack.

No probs dude