Forum Moderators: not2easy
Please find my code below, I hope someone can help!
Thanks in advance!
======================================================
@charset "utf-8";
/* CSS Document */
* {margin: 0; padding: 0;}
body {
background-color: #a68f76; /* a3c098 */
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
width: 800px;
margin: 0;
text-align:center;margin:0 auto;
background-color:#FFFFFF;
}
#header {height: 195px;
background:url(../images/layout_01.gif) no-repeat;}
#leftColumn {
width: 173px;
height: 393px;
float: left;
background:url(../images/layout_02.gif) no-repeat;
overflow: hidden;
}
#links {
height: 393px;
text-align:left;
padding-left:45px;
padding-top:30px;
line-height: 25.5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
overflow: hidden;
}
#middleContent {
margin-left: 173px;
width: auto;
height: 100%;
background:url(../images/layout_03.gif) no-repeat;
background-color:#FFFFFF;
}
#pageTitle {
padding-left: 8px;
padding-top: 4px;
padding-right: 8px;
text-align: left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
#content {
padding-left: 8px;
padding-top: 8px;
padding-right: 8px;
text-align: left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
overflow : hidden;
}
.clear {
line-height: 0px;
font-size: 0px;
clear: both;
height: 0px;
}
#footer {
clear: both;
margin-left:0;
background: #725a3f;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
width: 100%;
}
/* THIS IS THE LINK SECTION */
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color:#0066FF;
}
a:active {
text-decoration: none;
}
===============================================================-
<body>
<div id="container">
<div id="header"></div>
<div id="leftColumn">
<div id="links">
<?php include("links.php");?>
</div>
</div>
<div id="middleContent">
<div id="pageTitle">
<h3>Page Title</h3>
</div>
<div id="content">PAGE CONTENT HERE</div>
</div>
<div id="footer">
<?php include("footer.php");?>
</div>
</div>
</body>
the code in the OP is not showing what you describe, in some tests I did. The footer remained 800px wide no matter how much content was in left or right columns. Perhaps you have something else in the content area which might be causing this or I have read it wrongly?
What browser do you use to test the problem? What doctype are you using?
Perhaps this is the problem, or perhaps not: I don't know why you are using margin-left:173px on the middlecontent... floats still take up space so there's no need for the margin. It's not like absolute positioning where you would have to add a margin.
I'd also like the make some other comments on the page: for one... headers and footers and things like that should be given heights in EMs, this is so that the height of the element will fit font size the person uses.
Secondly, I recommend using pts (this is a little debated) and ems for font sizing, since it corrects the font size based on DPI setting.
If you're just giving a base size in pixels, not only will it not resize for internet explorer, but even with something like firefox a person could encounter problems, because if they were running a high screen resolution, it would be impossible for them to read the text easily, because it may be only 1 millimeter high on their screen. That's why I prefer points, and/or ems. If you just just EMs, it will at least base your font size off the browser's default... which should be set up to be large enough for the person's screen (in IE it's in point, so they don't need to adjust if if their DPI is correct. For Firefox it's in pixels, so they must adjust it themselves bigger or smaller depending on their screen)
