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.
Add a comment
|
5 Answers
<!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.
3 Comments
Tuviah
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?
cletus
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.
Daniel Little
This layout is a nice solution but creates issues when you want to use floats inside the main variable section specifically when you want to use clear:both;
This tool helps to generate liquid fixed columns easily.
1 Comment
Danon
This is good because it's pure CSS and easy to see what's happening
HTML
<div class="wrapper">
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
CSS
.wrapper {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
justify-content: space-between;
}
.fixed {
min-width: 200px;
width: 200px;
}
.variable {
width: 100%;
}
1 Comment
Sebastian Thomas
I clearly dont understand flexbox enough, but I used this and removed all expect display: flex and it still worked!
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.
1 Comment
Tuviah
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.
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.
