[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