Question

I have a page that has 2 columns. The first column is a dynamic width. It contains a bunch of tabular data in tables. The 2nd column is a fixed width full of navigation stuff.

The 2 columns are divs with float left. I need to accomplish 2 things.

1. I need to center the 2 divs on the page. For example, if the first div is 600px wide as dictated by the data inside of it and the second div is a fixed 200px, the centering point is 400px.

2. I don’t want the 2nd div to wrap down if the browser window is resized.

I’m thinking that I may have to nest the 2 divs inside of another div, set the parent div width using javascript, then center it.

I created this fiddle to help illustrate. http://jsfiddle.net/darthg8r/uhKdt/

Answer 1

Surround them with a div and set its style to:

width: ( whatever you need )
margin: 0 auto; // this centers the div

You can set the width dynamically with JavaScript if needed. As long as it’s smaller than 100% of the surrounding container, it will stay centered.