CSS - Align Div To Bottom Of Parent Container

Hi guys,

I'm having a real problem with CSS on this page.

The page views fine in IE, but in firefox I cannot get the green box (div id=maincontent) to extend down to the bottom of the black box... as you can see the black box simply flows out. The green box is extending down to the bottom of the white box, but it stops there. Can anyone think of any obvious ways to fix this?

I tried placing a clear:both div at the bottom of main content (which is the red bar you can see) , but that too only actually clears the white box, not the black one.

Here's the main bits of css...

Code:

#maincontent
{
  position:relative;
  width:762px;
  margin-top:0px;
  background-image:url(contentbkg.jpg);
  background-repeat:no-repeat;
  padding-top:10px;
  text-align:left;
}

#left
{
font-size:12px;
color:#FFFFFF;
float:left;
margin-left:5px;
margin-top:10px;
}

#right
{
color:#FFFFFF;
float:right;
margin-right:10px;
margin-top:10px;
position:absolute;
#position:relative;
}

#translucentblack {
   width: 150px; 
   float:right;
   background-color: #000000; 
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   opacity: 0.4;
    font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:5px;
}

#opaqueblack {
   width: 150px;     
   background-color: transparent;   
   float:right; 
   position:absolute;
   margin-left:592px;
   #margin-left:22px;         
   z-index: 2;    
   font-family:Verdana, Arial, Helvetica, sans-serif;   
   padding:5px;       
}

#translucentbkg {
	color:#FFFFFF;
	font-size:12px;
   width: 566px; 
   background-color:#FFFFFF ;
   filter:alpha(opacity=80);
   -moz-opacity:0.8;
   opacity: 0.8;
	padding:5px;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#opaquetext 
{
color:#006600;
font-size:12px;
   width: 566px;     
   background-color: transparent;    
   position:absolute;       
   z-index: 2;    
   padding:5px;         
   text-align:left;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}

basically left and right sit inside maincontent, then opaquetext and translucentbkg sit inside left, whilst opaqueblack and translucentblack sit inside right! phew

The reason for opaque and translucent divs is that I'm using mozilla's tip here http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

mirroring content and positioning one div over another to get semi transparent backgrounds.

Hope that all made sense... any help would be incredible!!!

thanks!

I have elements in a certain class and they may have child elements. I want to position the child so that it's TOP is at the bottom of the parent. Right now its top is at a fixed place relative to the parent. The parent is variable height. So in my css I have
ul.parent ul {
top: <bottom of parent>
}

How do I refre to it?

I think I'm having a CSS brain fart here. I'm trying to nest some divs, which is working, but the "helper" won't go where I need it to go. The "helper" is inside the "map" and needs to sit at the bottom of the "map" div because the regular content that appears in there (images) may not be the full height. Currently, the "helper" is sitting just below the image.

For example, MAP is 400px tall. HELPER is 98px tall. If there is a picture in MAP that is 213px tall, then there should be 89px between the bottom of the image and HELPER. Here is the code:

PHP Code:
#content {
    border:1px solid #000000;
    margin:0px auto;
    width:900px;
    height:402px;
    text-align:left;
    }
#content #map {
    float:right;
    width:302px;
    height:400px;
    margin:2px 2px 2px 2px;
    display:inline;
    text-align:center;
    }
#content #map #helper {
    top:300px;
    width:298px;
    height:98px;
    } 





I've tried position and bottom as well. Those items seem to ignore the dimensions of #map and throw the div at the bottom of the page instead of the bottom of #map.

If there is a better way, let me know.

Hi All,

I'm trying to create some expanding headers using images and background color/images. Everything seems to be working fine except that at the bottom of the heading there is a 1 or 2 pixel showing of the background color!

I assume it is something I'm missing in the CSS rule as the problem occurs in both Mozilla and IE!

Click here to see example

It's not the images as there on a white background and are cropped fine as can be seen from the enlarged left side image.

[html]
<div style="width: 162px; color: white; background: green; margin: 0; padding: 0;"><img src="/RhL.gif" width="25" height="50" border="0"><span>HEADING TEXT</span><img src="/RhR.gif" width="25" height="25"></div>
[/html]

Any help kindly appreciated

PHP Addict

I'm attempting to get it so when the main content div exceeds my min-height specifications, that it expands the div, which in turn expands the container with an absolutely positioned footer at bottom:0;. Works fine in all newer browsers with the exception of IE7. What do I need to do to get it to expand in that version? Here is the link to the page:

http://www.chcs-ut.com/chcs-new.php

And the stylesheet:

http://www.chcs-ut.com/css/style.css

Also, I would really rather not have to specify a min-height for my main content div. I'd rather just have it automatically fill to 100% of the main container that is set to 100% height and min-height, so that the footer automatically appears at the bottom of the screen if the content is not large enough to push it down there by itself. Can't seem to get it to work, though (in ANY browser) without specifying a min-height for the main content div. Problem with that is different resolutions/browsers would require a different value, so hard-coding it isn't a desireable solution. Any thoughts?


EDIT:

Both problems were fixed by adding "height:auto !important" to my main content container, instead of specifying a "min-height". Works across the board!

ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out?

thx

Hi there,

I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides.

This is my CSS:

PHP Code:
#nav_wrapper{


}

#nav_left{
width: 620px;
padding-left: 20px;
float:left;

}


#nav_right{
float:right;
text-align: right;
padding-right: 20px;


}

#member_login{
width: 180px;
padding: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #373737;
font-size: 11px;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
background-color: #f6f6f6;
line-height: 200%;
}

#member_login a{
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #373737;
font-size: 11px;
font-weight:bold;
text-decoration:underline;
} 





and this is my HTML:

PHP Code:
<div id="nav_wrapper">
    
        <div id="nav_left">
        
       left content        
        <div id="nav_right">
        
        <div id="member_login">
        right content
        </div>
        
        </div>
    

    
    </div> 





Any ideas?

I have three divs.
The main div contains the background color and border.
The second div has text, and
The third has an img.
What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div.
Can someone please help me.

I have attached the code below it is all messed up cause I have been trying everything I can think of.

".abouttestcontainer
{
width : 100%;
float : left;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
color : #001F56;
background-color : #DDEADE;
border : 1px solid black;
}
.abouttest
{
float : left;
width : 450px;
height : 100%;
padding : 10px 50px 0px 10px;
text-align : left;
font-size : 12px;
border : 1px solid black;
margin-right : 10px;
}
.aboutimage
{
border : 1px solid black;
position : relative;
display : inline;
vertical-align : bottom;
}"

Hi!

Is it possible to align vertically block elements in a fixed-height (unknown) container?

If not, this is a serious shortcoming of the css model of placing objects on the screen.

Thanks!

How would I align a div to the true bottom (by this i mean below the viewport.

at current i use:
Code:

.footer
{
	background-color:#FFFFFF;
	width:100%;
	height:20px;
	color:#000000;
	position:absolute;
	bottom:0px;
}

but this just aligns my div to the bottom of my window, not the bottom of the page, if i then need to scroll down it is visible that its not at the bottom of the page.


any ideas?

Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out.

Here's the code:

Code:

<!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" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!--CSS-->
		<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
	
			<title> MY TITLE GOES HERE! </title>
		
	</head>
	
<body>

<div id="container">

        <div id="nav_container">

	MY MENU STUFF GOES HERE!

        </div>

<div id="content">

	<div id="left_column">
	
	BLAH BLAH all my content goes here!

	</div>
	
<div id="right_column">
	
ALL OF MY RIGHT CONTENT HERE!
			
</div>

</div>

<div id="footer"></div>

</div>

</body>

</html>

and this is the stylesheet driving the page:

Code:

body {
	background-image: url("gfx/bg.jpg");
	background-repeat: repeat-y;
	background-position: center;
	background-color: #FFFFFF;
	margin: 0px;
	font-family: Tahoma;
	font-size: 13px;
}



/*Page Structure --------------------------------------*/
#container {
	background-color: #FFFFFF;
	position: absolute;
	left: 50%;
	margin-left: -394px;
	width: 790px;
	height: 100%;
	border: 1px solid Black;
	border-top: 0px;
	border-bottom: 0px;
}

#content {
	background-color: #FFFFFF;
	width: 790px;
	float: left;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

#left_column {
	width: 390px;
	float: left;
	display: inline;
	margin: 15px 0 0 20px;
   padding: 0px 0px 15% 4px;
	border-right: 1px solid #DFDFDF;
}

#right_column {
	width: 326px;
	float: left;
	margin: 15px 0 0 0px;
   padding-bottom: 10%
}



/*Headers and Flash content -----------------------------*/
#header	{
	background-image: url("gfx/header.jpg");
	width: 790px;
	height: 101px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#home_header {
	background-image: url("gfx/home_header.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 380px;
	height: 150px;
	margin: 0px 0 10px 0px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#recent_posts	{
	background-image: url("gfx/recent_posts.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin-left: 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#latest_threats	{
	background-image: url("gfx/latest_threats.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#recommended_sites	{
	background-image: url("gfx/recommended_sites.jpg");
	background-repeat: no-repeat;
	width: 215px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#flash	{
	background-color: #000000;
	width: 790px;
	height: 120px;
	float: left;
	vertical-align: middle;
}



/*Navigation --------------------------*/
#nav_container	{
	background-image: url("gfx/nav_bg.jpg");
	background-color: #FFFFFF;
	width: 790px;
	height: 24px;
	float: left;
	text-align: right;
}


/*News Structure --------------------------*/
#news_header	{
	background-color: #FFFFFF;
	width: 390px;
	height: auto;
	float: left;
	font-size: large;
	font-weight: bold;
	color: #009AFF;
	margin: 3px 0 2px 0;
}

#news_post	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	color: Gray;
	margin: 0px;
}

#news_date	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	font-size: 11px;
	font-style: italic;
	color: Gray;
	margin-left: 5px;
}

#news_content	{
	background-color: #FFFFFF;
	width: 390px;
	float: left;
	margin-top: 20px;
}



/*Lists----------------------------------*/

#post_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#post_list li {
	background-color: transparent;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}

#threats_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#threats_list li {
	background-color: transparent;
	list-style-image: url("gfx/red_arrow2.jpg");
	list-style-position: inside;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}


/*Footer--------------------------------------------------*/
#footer {
	background-image: url("gfx/footer.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 790px;
	height: 125px;
	float: left;
	margin-top: 40px;
}

Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this

Thanks in advance,
AA.

So I have a 3-column layout in CSS and I'd like to have the content in the right-most column to be align to the bottom, like so:
Code:

| LEFT   |    MIDDLE       |          |
| (top)  |                 |          |
|        |                 |          |
|        |                 |          |
|        |                 |          |
|        |                 |          |
|        |                 | RIGHT    |
|        |                 | (bottom) |

Any idea how to do it? Thx!

I have a div container that changes size depending on the information inside it...

i also have a navi bar that is on everysingle page.... and i want it to always be 20px from the bottom....

i tried vertical-align:bottom and put a margin-bottom:20px on it... but the vertical-align didnt seem to work... i must be missing something

Hi all!

I try to create a website which of itself has no scrollbar. The website needs to be 100% height of the browser.
The website contains a div (with overflow: auto which starts at a certain height and needs to end at the bottom of the browser. When there is a short text, the should be no scrollbar, when there is a large text, there should appear a scrollbar.

I got quite far with this as you can see below. However this script works in Firefox, Opera & Safari for Windows, it doesn't in Internet Explorer. With a large text it just makes the page larger and there is no scrollbar.

Does anyone know how to fix this for at least IE6 & IE7?

Thanks!


[PHPNET]
<html>

<head>
<title>TEST</title>
</head>

<body style="width: 100%; height: 100%; padding: 0; margin: 0; overflow: auto;">

<div style="top: 200px; bottom: 0; background: #ff0000; display: block; position: absolute; width: 300px; overflow: auto; left: 50%; margin-left: -150px;">
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
ABC<br />
</div>

</body>

</html>[/PHPNET]

EDIT: hmm the embedded image isn't showing for me... here's a link: http://i34.tinypic.com/dh7qr6.jpg

Referencing the attached image, any ideas about how to achieve this layout using floats (rather than tables)?

The part that's giving me trouble is the bottom-left set of links, that should be aligned to the bottom of the container. Also, the width of the container is not fixed - it shouldn't have width specified at all, and expand to fit it's contents.

I'm not worried at all about fonts, borders, padding, colors, etc, just trying to achieve the attached macro concept using CSS, best-practices and w/out tables.



This layout is easily achieved using tables; the following markup (using tables) will render and behave as described - regardless of the size of the links, the size of the image, or the length of the description, but obviously I'd like to know how to do this with best practices of floating divs.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" > 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="robots" content="noindex, nofollow" />
	<title>Title</title>
	
	<style type="text/css">
		td {
			vertical-align : top;
		}
		td.links {
			text-align : right;
		}
		td.links.bottom {
			vertical-align : bottom;
		}
		td.description {
			width : 150px;
		}
	</style>
	
</head>

<body>

<table>

	<tr>
		<td class="links">
			<a href="#">Link</a>
			<br />
			<a href="#">Another Link</a>
		</td>
		<td rowspan="2">
			<img src="http://static.howstuffworks.com/gif/code-breakers-1.jpg" />
		</td>
		<td class="description" rowspan="2">
			<h1>Title</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</td>
	</tr>

	<tr>
		<td class="bottom links">
			<a href="#">Link</a>
			<br />
			<a href="#">Another Link</a>
		</td>
	</tr>

</table>

</body>
</html>

TYIA for any suggestions.