Please help! bottom div takes height from short column in safari/chrome

Hi there,
In my layout I have 2 columns, and a footer div underneath.
For some reason in safari the footer div is getting its position from the bottom of the left (sidebar) div, which is usually the shorter of the two.
I’ve tried putting clear:both, but it makes no difference in safari (though doesn’t seem to be a problem in firefox.)

Here’s the css:


#content_wrapper {
	width:100%;
	margin:0 0 50px 0;
	height: auto !important;
}

#sidebar {
	width:360px;
	text-align:right;
	float:left;
}

#content {
	float: left;
	width:55%;
	text-align:left; 
	margin:35px 0 0 25px;
	height: auto !important;
}

#footer_band {
	float:left;
	width:100%;
	margin-top:20px;
	padding:5px 0px 5px 0px;
	background-color: #091A3A;
	text-align: center;
	color: #ffffff;
	font: 75% verdana, tahoma, sans-serif;
	clear:both;
}

and the html



<div id="content_wrapper">
			<div id="sidebar"><h1>About Us</h1>
			<p class="sub_menu"><a href="">About the Centre</a><br />
			<a href="">Our history</a><br />
            <a href="">Staff & Fellows</a><br />
            <a href="">Governors</a><br />
            <a href="">Academic Advisory Panel</a></p>
			</div>
			<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis purus sed turpis adipiscing fermentum. Nulla aliquet gravida egestas. Aliquam eget dolor urna, quis ornare purus. In vulputate dictum arcu, porttitor dapibus leo mollis vitae. Suspendisse potenti. Quisque et urna a metus imperdiet viverra. Nulla bibendum vehicula dictum. In faucibus commodo facilisis. </p>

			<p>In hac habitasse platea dictumst. Pellentesque vel gravida mi. Curabitur convallis facilisis hendrerit. Etiam ultricies, dolor in suscipit facilisis, orci neque ultrices sem, vitae iaculis ligula odio a nisi. Cras dapibus pellentesque. Nulla aliquet gravida egestas. Aliquam eget dolor urna, quis ornare purus. In vulputate dictum arcu, porttitor dapibus leo mollis vitae. Suspendisse potenti. Quisque et urna a metus imperdiet viverra. Nulla bibendum vehicula dictum. In faucibus commodo facilisis. </p>
			</div>
		</div>
		
		
		<div id="footer_band"><a href=".">Home</a> | <a href=".">About us</a> | <a href=".">News</a> | <a href=".">Events</a> | <a href=".">Publications</a> | <a href=".">Education</a> | <a href=".">Library</a> | <a href=".">Support us</a> | <a href=".">Contact</a>
		</div>


I’d be *so grateful for any help on this! It seems so simple but I;ve been struggling with it for hours!

Thanks =^.^=

Can you clarify what the problem is as I don’t see a difference between Firefox and Safari but I guess I’m looking at the wrong thing.:slight_smile:

You don’t seem to have set your footer to clear:both and the closing div for #wrapper is missing.

AH! I was opening an old version of the site!! What a dufus.
wahooooooo! Thanks so much for your help ! Working a treat now! xxxxxxxx

Dear Rayzur,
Thankyou so so much for your help.
I’ve implemented the code you suggested, although it has not changed the behaviour in safari/chrome (even though the test one you sent worked perectly) :frowning: So i guess it must be something else in the code that is affecting it…? Arg, if yo wouldn’t mind having a quick look and see if anything looks obvious to you, I;d be so grateful!!!

the new css is


/* CSS Document */
/* CSS Reset*/
html, body {
	height:100%;
	font:15px/120% Georgia, Times New Roman, serif; 
	color:#4E4E4E;
	background-color:#ffffff;
}
body {
	text-align:center;   /* horizontal centering hack for IE */
	padding:0;           /* required to "hide" distance div */
	margin:0;            /* required to "hide" distance div */
	font-size:90%;
}

h1{
	font-size:300%;
	font-weight:normal;
	letter-spacing:0em;
	line-height:100%;
	color: #091A3A;
	margin:30px 0px 10px 0px;
	
} 

h2 {
	
	font:130% Georgia, Times New Roman, serif; 
	color:#4E4E4E;
	line-height:130%;
	margin:0px;
	
}


h3 {
	font-size:220%;
	font-weight:normal;
	letter-spacing:0em;
	line-height:100%;
	color: #091A3A;
	margin:20px 0px 12px 0px;
	
} 

h4, h5, h6, pre, blockquote, ul, ol, dl, address {
	margin:1em 0;
	padding:0;
}

a {
	color: #091A3A;
	outline:none;
	padding: 0px;
	text-decoration: none;
}
a:hover {
	color:#475E8A;
	text-decoration: none;
}

.sub_menu {
	
	font:130% Georgia, Times New Roman, serif; 
	color:#4E4E4E;
	line-height:130%;
	margin:0px;
	
}

/* Main Formatting */

/* Nav Bar */
#navigation {
	background-color: #091A3A;
	height:27px;
	text-align: left;
	background-color: #091A3A;
	margin-top:10px;
}

#navigation ul {
	float: left;
	height: 27px;
	background-color: #FFF;
	margin:0;
}

#navigation a {
	color:#FFF;
}

#navigation li {
	display: inline;
	background-color: #091A3A;
	margin:0 2px 0 0;
	float:left;
	padding: 5px 10px 6px 10px;
}

#navigation li:hover {
	background-color: #3C4871;
}

#search-form {
	float:left;
	background-color: #FFF;
	width:239px;
}

#search-form  li{
	float:right;
}

.searchfield {
	width: 170px;
	height: 23px;
	background: #ffffff;
	border: solid #091A3A 1px;
	color: #091A3A;
	float:left;
}

/* Title Stuff */

#title {
	width:100%;
	height:54px;
	margin:60px 0px 0px 0px;
}

#title_text {
	float:right;
	margin-right:10px;
	border:0px;
}

#subtitle_band {
	width:100%;
	height:77px;
	background-color: #091A3A;
	overflow:hidden;
}

#index_subtitle_band {
	width:100%;
	height:245px;
	background-color: #091A3A;
	overflow:hidden;
}

#staircase {
	border-right: solid 3px #ffffff;
	float:left;
	width:368px;
	height:245px;
}


#small_staircase {
	border-right: solid 3px #ffffff;
	float:left;
	width:368px;
	height:77px;
}


#subtitle {
	float:right;
	padding: 23px 10px 10px 0px;
	font-size:35px;
	color: #ffffff;
	letter-spacing:-0.04em;
	text-align:right;
}

.quote {
	font: 20px Perpetua, georgia, times new roman, serif;
	color: #ffffff;
	letter-spacing:-0.01em;
	text-align:right;
	line-height: 1em;
}
/* Content Stuff */

#content_wrapper {
	width:100%;
	min-width:800px;
	overflow:hidden;
}

#sidebar {
	width:360px;
	margin-right:25px;
	text-align:right;
	float:left;
}

#content {
	float: left;
	width:50%;
	min-width:400px;
	text-align:left;
	margin-top:35px;
}

#index_column{
	width:30%;
	float:left;
	text-align:left;
	margin: 0 0 20px 2%;
}


/* Footer Stuff */

#footer_band {
	width:100%;
	min-width:800px;
	margin-top:50px;
	padding:5px 0px;
	background: #091A3A;
	text-align: center;
	color: #ffffff;
	font: 75% verdana, tahoma, sans-serif;
}

#footer_band 
	a:link { color:#ffffff;}
	
#footer_band 
	a:hover { color:#475E8A;}



#footer_info {
	float:left;
	width:100%;
	margin:4px 0px 15px 0px;
	text-align: center;
	font: 75% verdana, tahoma, sans-serif;
	letter-spacing: 0em;
	line-height:1.5em;

}

and the html


<!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" lang="en" xml:lang="en">
<head>
	<title>The Anscombe Bioethics Centre For Healthcare Ethics | 01865 610 212</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="anscombe_css.css" />
	<meta name="description" content="The Anscombe Bioethics Centre For Healthcare Ethics, Oxford" />
	<meta name="keywords" content="Bioethics, Ethics, Healthcare, Catholic, Christian, Ethical, Medical, Oxford" />
</head>

<body>
	<div id="wrapper">
		<div id="navigation">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="">About us</a></li>
				<li><a href="">News</a></li>
				<li><a href="">Events</a></li>
				<li><a href="">Publications</a></li>
				<li><a href="">Education</a></li>
				<li><a href="">Library</a></li>
				<li><a href="">Support us</a></li>
				<li><a href="">Contact</a></li>
			</ul>
			<div id="search-form">
				<form><input type="text" name="field" class="searchfield" /></form>
				<li><a href="search.html">Search</a></li>
			</div>
		</div>
		<div id="title">
			<img id="title_text" src="images/anscombe_bioethics.gif" alt="Anscombe Bioethics" />
		</div>
		
		<div id="subtitle_band">
		 	<div id="small_staircase"><img src="images/small_staircase.gif" alt="Vatican Double Helix Staircase" />
		 	</div>
		 	<div id="subtitle">Centre for Healthcare Ethics
		 	</div>
		</div>
		
		
		<div id="content_wrapper">
    <div id="sidebar"><h1>About Us</h1>
        <p class="sub_menu">
            <a href="#">About the Centre</a><br />
            <a href="#">Our history</a><br />
            <a href="#">Staff &amp; Fellows</a><br />
            <a href="#">Governors</a><br />
            <a href="#">Academic Advisory Panel</a>
        </p>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis purus sed turpis adipiscing fermentum. Nulla aliquet gravida egestas. Aliquam eget dolor urna, quis ornare purus. In vulputate dictum arcu, porttitor dapibus leo mollis vitae. Suspendisse potenti. Quisque et urna a metus imperdiet viverra. Nulla bibendum vehicula dictum. In faucibus commodo facilisis. </p>
        <p>In hac habitasse platea dictumst. Pellentesque vel gravida mi. Curabitur convallis facilisis hendrerit. Etiam ultricies, dolor in suscipit facilisis, orci neque ultrices sem, vitae iaculis ligula odio a nisi. Cras dapibus pellentesque. Nulla aliquet gravida egestas. Aliquam eget dolor urna, quis ornare purus. In vulputate dictum arcu, porttitor dapibus leo mollis vitae. Suspendisse potenti. Quisque et urna a metus imperdiet viverra. Nulla bibendum vehicula dictum. In faucibus commodo facilisis. </p>
    </div>
</div>
 
<div id="footer">
    <a href=".">Home</a> | <a href="#">About us</a> | <a href="#">News</a> | <a href="#">Events</a> | <a href="#">Publications</a> | <a href="#">Education</a> | <a href="#">Library</a> | <a href="#">Support us</a> | <a href="#">Contact</a>
</div>
 
</body>
</html>


Thank you sooo much!

Claire x

Hi,
It looks like the problem was that your wrapper was not containing it’s floated columns, overflow:hidden; will take care of that.

You really need to set up a UL for the links in your left column rather than nesting anchors in a “p” tag. Same goes for the links in your footer, they are a list of links so they should be list-items nested in a UL. :wink:

I have set up some min-widths to keep the right column from dropping also. There are comments in the CSS that should help explain the changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Test</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
}
#wrapper {
    width:100&#37;;/*IE6 haslayout*/
    min-width:800px;/*prevent float drop*/
    /*margin:0 0 50px 0; move all margins to footer*/
    overflow:hidden;/*contain inner floats*/
    background:#EEF;
}
#sidebar {
    float:left;
    width:360px;/*385px with margin (15px to spare on wrapper min-width)*/
    margin-right:25px;
    text-align:right;
    background:#CCC;
}
#content {
    float:left;
    width:50%;/*was 55%*/
    min-width:400px;/*50% of wrapper min-width (prevent float drop)*/
    margin-top:35px;
    text-align:left;
    background:#CDF;
}
#footer {
    /*clear:both; wrapper is a static block containing it's floats now*/
    /*float:left; no need for a float here*/
    width:100%;/*IE6 haslayout*/
    min-width:800px;/*same as wrapper*/
    margin-top:70px; /*was 20px (just combine your wrapper bottom margin)*/
    padding:5px 0px;
    background: #091A3A;
    text-align: center;
    color: #ffffff;
    font: 75% verdana, tahoma, sans-serif;
}
</style>
</head>
<body>

<div id="wrapper">
    <div id="sidebar"><h1>About Us</h1>
        <p class="sub_menu">
            <a href="#">About the Centre</a><br />
            <a href="#">Our history</a><br />
            <a href="#">Staff &amp; Fellows</a><br />
            <a href="#">Governors</a><br />
            <a href="#">Academic Advisory Panel</a>
        </p>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis purus sed turpis adipiscing fermentum. Nulla aliquet gravida egestas. Aliquam eget dolor urna, quis ornare purus. In vulputate dictum arcu, porttitor dapibus leo mollis vitae. Suspendisse potenti. Quisque et urna a metus imperdiet viverra. Nulla bibendum vehicula dictum. In faucibus commodo facilisis. </p>
        <p>In hac habitasse platea dictumst. Pellentesque vel gravida mi. Curabitur convallis facilisis hendrerit. Etiam ultricies, dolor in suscipit facilisis, orci neque ultrices sem, vitae iaculis ligula odio a nisi. Cras dapibus pellentesque. Nulla aliquet gravida egestas. Aliquam eget dolor urna, quis ornare purus. In vulputate dictum arcu, porttitor dapibus leo mollis vitae. Suspendisse potenti. Quisque et urna a metus imperdiet viverra. Nulla bibendum vehicula dictum. In faucibus commodo facilisis. </p>
    </div>
</div>

<div id="footer">
    <a href=".">Home</a> | <a href="#">About us</a> | <a href="#">News</a> | <a href="#">Events</a> | <a href="#">Publications</a> | <a href="#">Education</a> | <a href="#">Library</a> | <a href="#">Support us</a> | <a href="#">Contact</a>
</div>

</body>
</html>

I had also taken the float off of the footer since it was 100% width, there is no reason for a float there. I had made some comments in the css about that. The only reason width:100% would be needed there is as a haslayout trigger for IE6, haslayout could be tripped with something else though and then it would give you the freedom to use side paddings if needed.