Vertically align a div

[rachelskuse]

Hi,

If I have two divs contained within a wrapper div (for example), how do I vertically align the second div so that it will always remain at the bottom of the wrapper, while the first div stays at the top?

e.g

<div id="wrapper>
	<div id="topdiv">
        <!-- This needs to align to the top -->
	</div>
	<div id="bottomdiv">
        <!-- This needs to align to the bottom -->
        </div>
</div>

Many thanks,
Rachel

[Paul O'B]

Hi,

Unless you want to use the display:table properties (which ie6 and ie7 doesn't understand) then the answer is "not very easily".

CSS doesn't naturally vertically align block elements but there are some things you can do depending on circumstance.

If your bottom aligned element doesn't need to be in the flow you can use methods like these:

http://www.pmob.co.uk/temp/text-at-bottom3.htm
http://www.pmob.co.uk/temp/text-to-bottom-of-image.htm
http://www.pmob.co.uk/temp/text-at-bottom2.htm

It may help if we knew the exact dynamics that you require though.

If you are talking about something like a sticky footer then you can use this method though it is a little complex but is explained in the faq.

http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

[rachelskuse]

Hi, thanks for the reply.

The page can be viewed at http://www.server1519.co.uk/products...lcon-1300.aspx

It is the 4 images on the right hand side that I would like to align to the bottom of the left content box (however tall that might be!) I see now that it's not going to be that easy!

My css is posted below where the 4 images are wrapped in #rightquicklinks

* 
{
	 margin: 0;
	 padding: 0;
}
body 
{
	margin-top: 10px;
	font: 0.8em "Trebuchet MS", sans-serif, helvetica;
	text-align: center;
	background: #fff url('../media/90/falconbg.jpg') top no-repeat;
	background-attachment: fixed;	
}
img 
{
	border: 0;
}
a, a:link, a:active, a:visited
{  
	color: #495561;
	text-decoration: none;
}  
a:hover 
{
	color: #747d86
	text-decoration: underline;
}
h1, h2, h3 
{
	margin: 0;
	padding: 0;
}  
h1 
{  
	font-size: 1.6em;
	color: #fff;
	letter-spacing: 0.1em;
} 
h2 
{  
	font-size: 1.6em;
	color: #88abc9;
	letter-spacing: 0.1em;
	font-weight: normal;
} 
h3 
{
	margin-top: 15px;
	font-size: 1em;
	font-weight: bold;
}
p 
{
	text-align: left;
	padding-top: 3px;
}  
#wrapper 
{
	margin: 0 auto;
	width: 990px;
	text-align: left;
}
#groupheader 
{
	text-align: right;
	padding-bottom: 10px;
}
#header {  
	height: 96px;
	background: #fff url('../media/100/topbanner.jpg') no-repeat top left;
	overflow: hidden;
}  
#header li a:hover 
{ 
}  
#logo 
{
}
#toplinks 
{
	color: #fff;
	font-size: 10px;
	margin: 10px 15px 0 0;
	text-align: right;
}
#toplinks a:link, a:active, a:visited
{
	color: #fff;
	text-decoration: none;
}
#toplinks a:hover
{
	color: #1c293a;
	text-decoration: none;
}
#tagline 
{
	color: #fff;
	font-size: 16px;
	text-align: right;
	margin: 30px 15px 0 0;
}

#navigation {
	float: left;
	width: 990px;
	color: #333;
	margin: 0;
}

#breadcrumbs 
{
	clear: both;
	float: left;
	width: 600px;
	margin: 15px 0 0 9px;
	font-size: 0.9em;
	color: #495561;
}

#breadcrumbs a, a:link, a:visited
{
	text-decoration: none;
	color: #495561;
}

#breadcrumbs a:hover, a:active
{
	text-decoration: underline;
	color: #495561;
}

#content 
{
	clear: both;
	margin: 7px 0 25px 0;
	position: relative;
	overflow:hidden;
}
#leftcontent { 
	color: #333;
	margin: 0 5px 5px 0;
	padding: 10px;
	/* height: 350px; */
	width: 60px;
	float: left;
}
#leftcontent .titletab 
{
	float: left;
	width: 400px;
	background: #88abc9;
	padding: 3px 2px 2px 5px;
}
#leftcontent .productinner 
{
	clear: both;
	float: left;
	width: 660px;
	height: auto;
	border: 1px solid #88abc9;
	background: #ffffff;
	padding: 15px;
	text-align: justify;
}

#leftcontent .productinner img 
{
	float: left;	
}
#leftcontent .productflash 
{
	float: left;
	padding-right: 15px;
}
#leftcontent .productinner ul
{
	float: left;
	list-style: none;	
}

#leftcontent .productinner ul li
{
	width: 250px;
	background: #1c293a;
	color: #fff;
	font-weight: bold;
	padding: 4px 4px 5px 6px;
	margin-top: 5px;
}
#leftcontent .productinner ul li a
{
	color: #fff;
	text-decoration: none;
}
#leftcontent .inner 
{
	clear: both;
	float: left;
	width: 660px;
	height: auto;
	border: 1px solid #88abc9;
	background: #ffffff;
	padding: 15px;
	text-align: justify;
}

#leftcontent .inner img 
{
	float: left;	
}

#leftcontent .inner a, a:link, a:active, a:visited
{  
	color: #495561;
	text-decoration: none;
}  
#leftcontent .inner a:hover 
{
	text-decoration: underline;
}

#leftcontent .inner ul
{
	float: left;
	list-style: none;	
}

#leftcontent .inner ul li
{
	width: 250px;
	background: #1c293a;
	color: #fff;
	font-weight: bold;
	padding: 4px 4px 5px 6px;
	margin-top: 5px;
}
#leftcontent .inner ul li a
{
	color: #fff;
	text-decoration: none;
}
#rightcontent { 
	float: right;
	color: #333;
	margin: 28px 0 5px 0;
	padding: 10px;
	/* height: 350px; */
	width: 253px;
	height: 100%;
	display: inline;
	/* background: #666666; */
}
#leftcontent .homeinner 
{
	clear: both;
	width: 690px;
	border: 1px solid #88abc9;
	background: #ffffff;		
}
#rightcontent .homeinner 
{
	padding: 40px 0 0 0;
	line-height: 1.5em;	
}
#rightcontent .homeinner img 
{
	float: right;
}
#rightcontent .homeinner ul
{
	line-height: 1.4em;
	list-style: none;
}
#rightcontent .homeinner ul a:link, a:active, a:visited
{
	color: #747d86;
	text-decoration: none;
}
#rightcontent .homeinner ul a:hover
{
	text-decoration: underline;
}

#rightcontent a
{  
	color: #495561;
	text-decoration: none;
}  
#rightcontent .options
{
	padding: 2px 0 0 0;
}
#rightcontent .options .box
{
	width: 253px;
	height: 52px;
	border: 1px solid #88abc9;
	background: #ffffff;
	margin-bottom: 10px;
}
#rightcontent .divider 
{
	clear: both;
	margin: 10px 0 10px 0;
	border-bottom: 1px dashed #000;
}
#quicklinks { 
	clear: both;
	margin: 25px 0 5px 0;
	color: #fff;
	padding: 5px 0 0 25px;
}

#quicklinks a { 
	color: #ffffff;
	font-weight: bold;
}

#ql1 
{
	float: left;
	width: 222px;
	height: 130px;
	margin: 0 5px 10px 0;
	/* border: 1px solid #747D86; */
	background: url('../media/32/ql1.jpg') no-repeat top left;
}

#ql2
{
	float: left;
	width: 222px;
	height: 130px;
	margin-right: 5px;
	/* border: 1px solid #747D86; */
	background: url('../media/37/ql2.jpg') no-repeat top left;
	
}

#ql3
{
	float: left;
	width: 222px;
	height: 130px;
	margin-right: 5px;
	/* border: 1px solid #747D86; */
	background: url('../media/42/ql3.jpg') no-repeat top left;
}

#ql4
{
	float: left;
	width: 222px;
	height: 130px;
	/* border: 1px solid #747D86; */
	background: url('../media/47/ql4.jpg') no-repeat top left;
}
#quicklinks .qlheader 
{
	padding: 0 2px 2px 5px;
	font-size: 12px;
}
#quicklinks .qltextb 
{
	padding: 15px 10px 2px 80px;
	text-align: right;
	color: #1c293a
}
#quicklinks .qltextw 
{
	padding: 15px 10px 2px 100px;
	text-align: right;
	color: #ffffff;
}
#quicklinks .qltextlink 
{
	padding: 5px 0 0 0;
	text-align: center;
	color: #1c293a;
}
#quicklinks .qltextlink a
{
	color: #1c293a;
	text-decoration: underline;
}

#rightquicklinks  
{
	clear: both;
	display: block;
}
#rightquicklinks a { 
	color: #ffffff;
	font-weight: bold;
}


#rightql1 
{
	clear: both;
	float: left;
	width: 120px;
	height: 100px;
	margin: 0 13px 0 0;
	/* border: 1px solid #747D86; */
	background: url('../media/63/ql1.jpg') no-repeat top left;
}

#rightql2
{
	float: left;
	width: 120px;
	height: 120px;
	margin: 0 0 -5px 0;
	/* border: 1px solid #747D86; */
	background: url('../media/68/ql2.jpg') no-repeat top left;
	
}

#rightql3
{
	clear: both;
	float: left;
	width: 120px;
	height: 100px;
	margin-right: 13px;
	/* border: 1px solid #747D86; */
	background: url('../media/73/ql3.jpg') no-repeat top left;
}

#rightql4
{
	float: left;
	width: 120px;
	height: 100px;
	/* border: 1px solid #747D86; */
	background: url('../media/78/ql4.jpg') no-repeat top left;
}
.rightqlheader 
{
	padding: 0 0 0 5px;
	font-size: 12px;
	color: #fff;
}
.rightqlheader a, a:link, a:active, a:visited, a:hover
{
	color: #fff;
	text-decoration: none;
}
#footer   
{
	clear: both;
	padding: 2px;
	font-size: 0.8em;  
	border-top: 1px solid #88abc9;
	color: #747D86;
	text-align: right;
}  
#footer a:link, a:active, a:visited 
{  
}      
#footer p 
{  
	padding: 24px;  
}  
.clear 
{  
	clear: both;  
}

Thanks for your help,
Rachel

[Paul O'B]

Hi,

The only way to do that would be as in my examples above.

Wrap the left and right column in a container with suitable width and apply position:relative to it (make sure that it contains both columns so you will need to ensure that is clears the floats inside or it's height will be zero).

Then place a div around the four images and place it absolutely at the bottom in relation to the new wrapper. Adjust the right position to suit.

Next apply some padding to the bottom of the right column equal to the height of the 4 images to protect them.

This example shows the method in action.

Try it and if you get stuck the post back and I will give some specific code but it's better if you try first yourself so you understand what's going on

[rachelskuse]

Hi,

Thanks, I think I'm nearly there http://www.server1519.co.uk/products...lcon-1300.aspx

#leftcontent and #rightcontent were already wrapped in #content so I set the position of #content to relative. I then added absolute positioning to #rightquicklinks (the div my images are in) and also bottom: 10px (to line up with the bottom of my left content)

This seems to have done the trick but do I need to add the bottom padding of #rightcontent as a fail safe option?

It's also not looking too hot in IE (but ok in Firefox) ??

Cheers.

[Paul O'B]

Hi,

The link doesn't seem to be updated yet so I can't check IE yet (which version anyway?).

Regarding the padding bottom on the right column it all depends on whether there is to be content in the top section of that right column that may grow to meet the absolute images at the bottom. If so then you need to protect the images with some padding but if not then the padding isn't needed.

[rachelskuse]

Sorry, the link is updated now!

http://www.server1519.co.uk/products...lcon-1300.aspx

I have got content in the top of my right column but it won't change in height.

Thanks,
Rachel

[Paul O'B]

Hi,

You forgot to add the width to the parent that I mentioned which IE6 needs or it panics and doesn't apply the absolute element correctly

* html #content{width:100%}

If the content above the right column isn't changing then that's fine as it is.

[rachelskuse]

Hi,

It's still not looking quite right but I'll have a play with it and see if I can get it sorted!

Thank you SO much for all your help!