Menu
I need some help in building a flexible html layout. I've defined minimum and maximum width of the page wrap. Inside the wrap, I have two columns, content and right.
I want to have fixed width right column. But, I want to make the content width flexible, so that depending on min-width and max-width, its width should increase or decrease.
Here's my html structure:
<body>
<div class="wrap">
<div class="content">...</div>
<div class="right">...</div>
</div>
</body>
Here's CSS, I'm trying:
.wrap{
min-width: 780px;
max-width: 1140px;
margin: 10px auto;
}
.right{
float:left
width: 200px;
}
.content{
float: left;
width: ?? //what should i do here?
}
248
When making floated columns in CSS there's a few things to learn.
First, the container (in your case .wrap) should also be cleared for floats. Here's a good Stackoverflow question on "clearfix". "Clearfix-ing" will ensure that the container height will stretch to match the longest floated column. Useful for doing the "faux columns" design.
What methods of ‘clearfix’ can I use?
Second, is the need to know how many columns are you looking to do? 2 columns? 3 Columns?
There are different ways to skin that cat. You can do 2 columns and then sub-divide one of those columns by another 2 column layout. Or you can put 3 block containers and float each of them to a percentage of the total width. Ie. for a 3 column layout you'd theoretically want each to be 33.33% wide (depending on how you want to do gutters or margins).
Third, you talk about "flexible layout". Well, a flexible layout can't work with pixel width as pixels are static values. Ie. If you say the width is 200px, it's always 200px, no matter how big or small your container or window is.
What you need to do is use percentages. Of course, to do a correct flexible layout you want to have a base dimension. So, you do need to have a fixed with design that you will say is your "optimal design" (I have to use that term loosely as a true flexible and responsive design should look good for the most part).
So, lets say your design is set to have the main content area .wrap be 1000px. You want a 2 column layout using the golden ratio. http://en.wikipedia.org/wiki/Golden_ratio
Basically, you want one column to be 618px and the other to be 1000px - 618px = 382px.
For CSS you then want to set them in terms of percentages. To get the percentage you take the parent width and divide it by the width you want.
618px / 1000px = .618 * 100(for percentage) = 61.8%
382px / 1000px = .382 * 100(for percentage) = 38.2%
.left {
float: left;
width: 61.8%
}
.right {
float: right;
width: 38.2%
}
Joseph Silber is correct, you don't need to float the right column, but not doing so can cause other unexpected issues of how the box model acts and wraps around the floated left item, especially if one is shorter than the other.
You can apply a margin to offset one column to another columns width, but I find that to just be messy and there could still be problems with poor CSS implementations in browsers (as much as I say I don't support IE6 anymore, it's still used by our visitors enough to need to support it).
Also note, when dealing with % is that you run into rounding errors. Some browsers will round down or up when they hit ".5%". This can cause your floated columns to wrap because it becomes 1px larger than the container element. So, to be safe, you will want to probably shave off a little bit of the width to give you a 1-2px buffer for wrapping.
A common approach is to give an "empty" gutter or margin between the left and right column of say 10px. And 10px in our design is:
10px / 1000px = 0.01 * 100(for percentage) = 1%
You can now take 0.5% off each column or take a full 1% off one column. I'll just do the later.
.left {
float: left;
width: 60.8% /* removed 1% to give a gutter between columns */
}
.right {
float: right;
width: 38.2%
}
This now gives you a nice safety zone and you will avoid rounding errors.
Also, now that we're working in %, the layout will be fluid. Your 2 columns will re-size with your browser until you hit the min/max pixel value.
Also, don't forget to "clearfix"
<div class="wrap clearfix">
<div class="left">
<!-- content -->
</div>
<div class="right">
<!-- content -->
</div>
</div>
There are, of course, a lot of other considerations to take into account when dealing with fluid/flexible grids.
One thing you can do is not re-create the wheel but use a CSS framework like Yahoo! or Blueprint. I believe they have these built-in and have been robustly tested.
Also, I recommend reading up on Responsive Web Design. There's an A List Apart article on it: http://www.alistapart.com/articles/responsive-web-design/ as well as a book written by Ethan Marcotte (the other of the article and published by the ALA website) that is a great read.
The only real drawback about the book is that it didn't cover the drawbacks of a Responsive design and how, despite the "cool" factor, many big name web designers/developers have chosen to still use a separate mobile/desktop website design.
Which is slight off-topic as the original question was only talking about a fluid design and not a media target size.
Hope that helps!
Cheers!
127
HTML:
<body>
<div class="wrap">
<div class="right">...</div>
<div class="content">...</div>
</div>
</body>
CSS:
.right {
float: right;
width: 200px;
}
.content {
padding-right: 200px; /* or margin */
/* No need to float this */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
