with tables I can easily have a row with 2 columns, column 1 is variable width and column 2 fixed width in pixels and column 1 resizes to fill the available space. I'm transitioning to css and wondering how to do this with css..and make sure that both divs/columns stay on the same line and don't wrap.
A:
Floats with explicit widths are pretty much the standard way to achieve this nowadays ( due to how limited layout is in CSS1/CSS2 ) , you can also use inline-block but it would just end up being more work. Don't forget to contain the floats on the parent with overflow:hidden and a property that triggers hasLayout like width.
meder
2009-10-18 00:04:40
Can you give me some example css. Remember column 1 needs to resize to fit the space not used by fixed width column 2 and the also resized when the page resizes so both columns cannot be fixed width.
Tuviah
2009-10-18 00:22:58
+5
A:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>
This has a right column of 300 pixels and a variable left column. The DOCTYPE is just there to make IE misbehave less. Also use of a reset CSS is recommended.
cletus
2009-10-18 00:44:52
Looks good but must the left column go after the right column. That looks confusing. Also can this be done using absolute position and right, should it be done, isn't that better than using floats and having to reset the float?
Tuviah
2009-10-18 02:05:31
My general experience with absolute positioning is that it tends to create other problems (eg changin z-index values so an absolute element will float above menus). In this case you could make the right column absolute or relative+absolute but experience makes me prefer floats, even if the elements are in the "wrong" order. I wouldn't concern yourself overly with that.
cletus
2009-10-18 02:35:43
A:
I'm assuming that what you need here is a 2-columns page layout. In theory, you could use display:table but if you need to support any version of IE, thats not really an option.
This is one of the hardest things some of us encountered when switching from tables to CSS, but fortunately for you, we've been doing this for more than 5 years and I think you can fine a solution for every problem. Maybe you want to check this classic article: Faux Columns
Please, don't feel discouraged, CSS is only hard the first months, and after that you'll be able to layout anything in a very clean, simple, semantic and standard way.
Soska
2009-10-18 07:34:24