[thelist] variable width centered

Duncan Hill dunkaz at gmail.com
Wed Mar 12 18:28:34 CDT 2008


Hi Jon,

try this on your columns,

#column1 {
Float:left;
Width:150px;
}
#column2 {
min-width: 850px;
margin-left: 150px;
}

IE6 won't be happy with min-width but there are ways to get it to play  
happy.

Duncan

On Wed, 12 Mar 2008 20:20:03 -0000, Jon Hughes <hughesj at firemtn.com> wrote:

> 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