[thelist] variable width centered
Jon Hughes
hughesj at firemtn.com
Wed Mar 12 15:20:03 CDT 2008
Howdy List,
I'm running into many walls here, and I cannot seem to find a workable
solution.
Here is my dilemma: I have a 2 column page with a header and footer.
+------------------+
|------HEADER------|
+------------------+
|_____-1-|--2--____|
|_____-1-|--2--____|
|_____-1-|--2--____|
+------------------+
|------FOOTER------|
+------------------+
_ = blank space.
The content area (columns one and two) is margin:0 auto'd, so it centers
automatically.
Here is the HTML I am using:
<div id="header">Header</div>
<div id="mainWrapper">
<div id="column1">
<div id="column2">
</div><!--end mainWrapper-->
<div id="footer">Footer</div>
Relevant CSS:
#mainWrapper {
Width:1000px;
Margin:0 auto;
}
#column1 {
Float:left;
Width:150px;
}
#column2 {
Float:left;
Width:850px;
}
Now, this works great for 90% of my pages. The problem is, 10% have a
width larger than 850px (due to images or something else)
I could just increase #mainWrapper and #column2 width, but the problem
with that is then the column1 jumps around from page to page. If I leave
the width as is, every page you go to (that has content under 850px) the
column1 stays in the same spot.
So my question is: How can I allow more content in the #column2 div,
without moving #content1 from its current location?
Note:
I have tried position:absolute, which doesn't work due to the footer (it
doesn't push the footer down because it doesn't have layout)
I am not opposed to changing the current layout (HTML-wise) - so long as
the #content1 is still in the same spot.
I realize that something like this might be easier if I had a sample
page, but I currently do not have one, I am sorry.
Thank you for taking the time to help me out,
- Jon
More information about the thelist
mailing list