CSS Question

Hello everyone

I am relatively new at creating tableless designs using CSS; and am having some problems aligning text vertically in a certain <div>

Instead of me pasting a bunch of code here, I ask you to see the page at:

http://stopidiocy.com/fpbtest/index.html

with relating CSS file here:

http://stopidiocy.com/fpbtest/css/style.css

My primary problem is vertically aligning the "click this link" text on the bottom of the <div> #header_right. I've tried everything from setting the line-height, to vertical-align:text-bottom... As you can see, I have split the top row into two divs... one #header_left, one #header_right

My other problem (if one has time ) is to extend the div #main all the way down to the bottom of the page (and not a fixed height either..)

Any help would be appreciated, thank you all in advance!!

 

To force the bottom div to the bottom of the page, try adding these to your css file:

Code:

html { 
height: 100%;
}

and add a

Code:

height:100%

to your body element aswell.



As for the vertically aligning text issue, I would be tempted to have a small div directly underneath the #header_left div that has a matching background and style (so it looks like the same div) then just float / margin your anchor element to the right.

 

Thank you, I've got it now.

I did what you said w/r/t the height (I never have bothered to add html,body together in my css...)

For anyone else with this problem, the solution is basically:

As for the positioning of the link, instead of having a separate <div>; I did what you said and just assign css attributes to the anchor tag.
i.e

Code:

#header_left {
	float: left;
	background: #000;
	min-height: 134px;
	width: 759px;
}
#header_left a {
	display: inline;
	float: right;
	margin-right: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCC;
	padding: 110px 5px 0px 0px;
	text-decoration: none;
}

Thanks :wave