Forum Moderators: not2easy
I'm having an issue with a simple website that I was throwing together. I have two side by side columns contained in a master div that also contains the footer. I have the master div set to auto height in the .css I also set the divs that make up the columns to auto height so if some one makes the text bigger the page becomes longer. However when I add text and veiw the page in firefox the text is obscured by the footer. But in ie it adjust correctly. Would someone mind looking at the css and telling me what I'm doing wrong.
Thanks,
Alex
[<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#header {
width: 808px;
height: 144px;
right: auto;
left: auto;
margin-right: auto;
margin-left: auto;
top: 5px;
background-image: url('images/lined_paper_header.png');
background-repeat: no-repeat;
}
#body {
width: 808px;
top: 140px;
right: auto;
left: auto;
margin-right: auto;
margin-left: auto;
background-image: url('images/lined_paper_background.png');
background-repeat: repeat-y;
margin-top: -2px;
}
#footer {
width: 808px;
height: 135px;
bottom: -2px;
right: auto;
left: auto;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-image: url('images/lined_paper_footer.png');
}
.style1 {
border-width: 0px;
}
#left_text_align {
margin: 1px;
padding: 1px;
border-color: #808080;
font-family: Arial, Helvetica, sans-serif;
width: 325px;
top: 2px;
left: 132px;
position: relative;
float: left;
height: inherit;
border-right-width: .5px;
text-align: center;
}
#right_text_align {
padding: 1px;
margin: 1px;
font-family: Arial, Helvetica, sans-serif;
top: 2px;
width: 325px;
height: auto;
position: relative;
right: 1px;
float: right;
text-align: center;
}
</style>
</head>
<body></div>
<div id="body">
<br/> <div id="left_text_align">
Comprehensive local classifieds and forums for hundreds of cities
worldwide. I like living in the world wide cites.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div><div id="right_text_align">bye<br />
</div>
<div id="footer"></div>
</div>
</body>
</html>]
dc
IE is putting you (as usual) on the wrong foot, an element should not expand due to floated children unless it is itself floated.
All other browsers in use do this correctly.
The trick to use is to add an element (e.g. your footer, or a <br />) after the 2 floated columns and give that the property "clear: both". And not float it itself. Alternatively there is a thing called "clearfix", but in your case there's no need to go there as you have a footer that'll do just fine.
