Question

My HTML looks like this:

<div>
    <div style="display:inline-block; width: 200px;">Sidebar</div>
    <div style="display:inline-block;">Content</div> 
</div>

My goal is to display the divs and the list items horizontally. What style do I set on the second div with the list items to force its width to fill the rest of the screen (screen width – 200px, width of first div)? I can’t use a specific px value, since that would break with different screen sizes.

Also, when there is enough content in the second div to wrap (e.g. unordered list items styled with display: inline-block), instead of wrapping, it displays the divs vertically.

This also doesn’t work in IE9 compatibility mode, even when using the *display: inline hack.

This would be trivial to implement using a table, but I’d like to do it “right”, if possible. I would also prefer not to use float.

Thanks in advance.

Answer 1

first I would recommend not using inline:block and trying a float solution instead. also may need to use clearfix on the parent div.

It’s not quite clear what you are trying to do