...

View Full Version : CSS layout - make div stay at bottom?



student101
07-05-2010, 07:52 PM
CSS layout, is there any way to make the div in BLUE (attached) stay at the bottom of the parent div?

_Aerospace_Eng_
07-05-2010, 08:01 PM
Make its parent div position:relative; then use position:absolute on the blue div.

student101
07-05-2010, 08:08 PM
Tried that but the rightcolumn doesn't take to 100% ?



#Content .rightcolumn {
width:605px;
height:100%;
loat:right;
margin:0;
padding:0;
position:relative;
}

#Content .rightcolumn .woodinfo {
background:#DECFAD url(../images/bar2.png) no-repeat 0 0;
clear:both;
border:1px solid #000;
margin:0 10px 10px 5px;
padding:10px 20px;
/* Position at the bottom */
position: relative;
top: 95%;
}

_Aerospace_Eng_
07-05-2010, 08:10 PM
Reread my post again. Also you have some errors in your CSS.

student101
07-05-2010, 08:17 PM
Right I see what you mean:


position: absolute; /* now play move around till it comes right */
top: 295px; /* play till it comes right... */
left: -2px; /* play till it comes right... */



Errors?
Ignore that last red comment, just cleaned it up...


I have to apply different class names per page as each page contains different content - could use inline CSS for this miniscule thing once it's validated.

Div .woodinfo now covers .data div?

student101
07-05-2010, 09:30 PM
That method doesn't work for me.
I may have overdone this a bit?


body {
text-align:center;
margin:0;
padding:0;
}
img {
border:0 none;
}
a {
outline:none;
}
#Content {
font:10pt "Tahoma", sans-serif;
text-align:left;
width:760px;
position:relative;
margin:0 auto;
padding:0;
}
.topbanner {
float:right;
}
p {
font:10pt "Tahoma", sans-serif;
}
p.black {
font:11px "Tahoma", sans-serif;
color:#313C29;
}
p.white {
font:11px "Tahoma", sans-serif;
color:#fff;
background:#313C29;
}
h1.heading {
color:#060;
font:24px "Bodoni MT Black", serif;
float:left;
margin:0;
padding:20px 0 0;
}
.slogan {
font:14px "Tahoma", sans-serif;
color:#000;
float:right;
display:block;
margin-right:580px;
margin-bottom:10px;
padding-left:30px;
}
h1 {
color:#060;
font:24px "Bodoni MT Black", serif;
}
h2 {
color:#060;
font:20px "Bodoni MT Black", serif;
}
#Content hr {
display:block;
position:relative;
width:100%;
clear:both;
border-top:1px solid #313C29;
border-bottom:1px solid #313C29;
font-size:1px;
line-height:0;
overflow:visible;
height:10px;
background:#313C29;
color:#313C29;
border-right:none;
border-left:none;
margin:8px auto 3px;
padding:8px 0 3px;
}
#Content .leftcolumn {
width:151px;
float:left;
margin:0;
padding:2px;
}
#Content .rightcolumn {
width:605px;
float:right;
height:100%;
position:relative;
margin:0;
padding:0;
}
#Content .rightcolumn .divfloat {
height:130px;
width:145px;
float:left;
margin:2px;
padding:0;
}
#Content .rightcolumn .divfloat span {
height:15px;
width:100%;
float:left;
text-align:center;
background:#313C29 url(../images/cat_2.gif) no-repeat right bottom;
color:#FFF;
margin-top:5px;
font:10pt/10px "Tahoma", sans-serif;
padding:5px 0 0;
}
#Content .rightcolumn .data {
clear:both;
width:590px;
height:auto;
top:3px;
left:0;
margin:0 0 10px;
padding:5px;
}
#Content .rightcolumn .woodinfo {
background:#DECFAD url(../images/bar2.png) no-repeat 0 0;
clear:both;
border:1px solid #000;
position:absolute;
top:295px;
left:-2px;
margin:0 10px 10px 5px;
padding:10px 20px;
}
#Content .leftcolumn .divfloat {
background:#313C29;
color:#FFF;
}
#Content .leftcolumn .divfloat p,#Content .leftcolumn .divfloat2 p {
margin:5px;
padding:5px;
}
#Content .leftcolumn .divfloat2 {
background:#DECFAD;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
color:#000;
}
#Content .rightcolumn .data p {
font:10pt "Tahoma", sans-serif;
margin-right:5px;
margin-left:25px;
}
#Content .rightcolumn .data p .green {
color:#060;
font:15px "Bodoni MT Black", serif;
margin:0;
padding:0;
}
#Content .rightcolumn .data p a:hover {
color:#060;
text-decoration:none;
}
#Content .rightcolumn .woodinfo .floatright {
margin-bottom:5px;
padding:2px;
}
#Content .rightcolumn .woodinfo .floatright p {
font:10pt "Calibri", sans-serif;
margin:5px 5px 5px 0;
padding:10px 0 0;
}
.clearboth {
clear:both;
}
#Content .footer {
background-color:#313C29;
bottom:0;
clear:both;
color:#DECFAD;
height:35px;
text-align:center;
font:10pt/30px "Tahoma", sans-serif;
}
h3,h4 {
color:#060;
font:18px "Bodoni MT Black", serif;
}
#Content .rightcolumn .data p a,#Content .footer a:link {
color:#DECFAD;
text-decoration:underline;
}
#Content .footer a:active,#Content .footer a:hover,#Content .footer a.current {
text-decoration:none;
}
.entersite {
color:#313C29;
font:18px small-caps Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif;
margin:15px 0 0;
padding:0;
}
.entersite a {
color:#313C29;
text-decoration:underline;
}
.entersite a:hover {
color:#313C29;
text-decoration:none;
}
#Content .rightcolumn .data p a:visited,#Content .rightcolumn .data p a:active,#Content .footer a:visited {
color:#DECFAD;
}


HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title title title title title title title title</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<style type="text/css">
#Content {
margin-left: 200px;
}
#Content .leftcolumn {
width:150px;
float:left;
margin:0;
padding:2px;
}
#Content .rightcolumn {
width:580px;
float:right;
margin:0;
padding:0;
}
#Content .rightcolumn .divfloat {
height:130px;
width:140px;
float:left;
margin:2px;
padding:0;
}
#Content .rightcolumn .divfloat img {
width:140px;
height:106px;
}
#Content .rightcolumn .woodinfo {
position:absolute;
top:280px;
left:10px;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#Content .rightcolumn .woodinfo {
background:#DECFAD url(images/bar2.png) no-repeat 0 0;
clear:both;
border:1px solid #000;
position:absolute;
top:296px;
left:10px;
margin:0 0 10px;
padding:15px 20px 10px;
}
</style>
<![endif]-->
</head>
<body>
<div id="Content">
<img src="images/pagebar.jpg" width="760" height="1" />
<div class="topbanner"><img src="images/autogen/pic1.jpg" alt="About Us" name="About Us" title="About Us" width="209" height="26" /></div>
<h1 class="heading">HEADER</h1>
<div class="slogan">Slogan, Slogan, Slogan</div>
<!--<hr />-->
<img src="images/bar.png" width="758" height="11" style="clear:both; margin: 0 0 3px 0;" />
<div class="leftcolumn">
<div id="menu">
<a href="home.php"><span>Home</span></a>
<a href="about.php" class="current"><span>About Us</span></a>
<a href="service.php"><span>Service</span></a>
<a href="location.php"><span>Location</span></a>
<a href="contact.php"><span>Contact Us</span></a>
</div>
<div class="divfloat"><img src="images/top1.gif" width="151" height="17" hspace="0" vspace="0" />
<p>This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only.</p>
</div>
<div class="divfloat2">
<img name="" src="images/pic2.jpg" width="150" height="100" alt="" />
<p>This copy is used for placement only. <br />
It is not meant to be read. </p>
</div>
<div class="divfloat">
<p>This copy is used for placement only. It is not meant to be read. </p>
<p>Designers use this to show clients how copy would look if it was inserted.</p>
<p>&nbsp;</p>
<img src="images/top2.gif" width="151" height="17" hspace="0" vspace="0" align="absbottom" />
</div>
</div>
<div class="rightcolumn">

<div class="data">
<p>This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.</p>
</div>
<div class="woodinfo">
<div class="floatright">
<p style="text-align:justify;"><img src="images/pic3.jpg" alt="" width="100" height="133" align="left" hspace="10" vspace="0">
This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.</p>
<p style="text-align:justify; padding:5px;">This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.</p>
</div>
<div class="floatright">
<p style="text-align:justify;"><img src="images/pic4.jpg" alt="" width="100" height="133" align="left" hspace="10" vspace="0">
This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.</p>
<p style="text-align:justify;">This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted. This copy is used for placement only. It is not meant to be read. Designers use this to show clients how copy would look if it was inserted.</p>
<p>&nbsp;</p>
</div>
<br />
</div>
</div>
<div class="footer">: <a href="home.php">Home</a> : : <a href="about.php" class="current">About Us</a> : : <a href="service.php">Service</a> : : <a href="location.php">Location</a> : : <a href="contact.php">Contact Us</a> :</div>
<div style="text-align:center; font: 11px Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif;">Copyright 2010 All rights reserved.</div>
</div>
</body>
</html>

_Aerospace_Eng_
07-05-2010, 11:03 PM
Why doesn't it work for you? What part? You will have to play with z-index if you want it behind your content. Your content would also need to be in its own block level element with position:relative; so you can use z-index on it that is hire than the z-index of your woodinfo div.

student101
07-05-2010, 11:12 PM
Looking at that picture; there is a div wrapping the two divs - that may need to be removed and only have the two divs.

I need to work on the div alignment to make this work.
floats may be needed or negative margins?

The part that doesn't work is the bottom div overlaps the top div.
If I add more text or image to the top div you can't see them cause the bottom div takes over

_Aerospace_Eng_
07-05-2010, 11:15 PM
Well usually the way to overcome it is to add a bottom padding to .data but the height of your woodinfo div will likely change so you can keep changing the height. Why does that div need to be at the very bottom? Why can't it just come after the .data div in normal flow?

student101
07-05-2010, 11:20 PM
Why does that div need to be at the very bottom? Why can't it just come after the .data div in normal flow?
It makes it look uneven otherwise.


Maybe your'e right, I need to just leave the conversion from a table to what I did and be happy.
I can PM the links from what was to what is.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum