Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can I set a floats width to the left over space?

How can I set a floats width to the left over space?

Problem

I want to display 3 divs horizontally aligned to each other. So I create a main div (100%) and put the three divs inside that. In css I set those three childdivs to float:left.

Now what I want is to set the first two to a fixed Width and set the third one to the width that is left over.

I know table-columns have a width:auto; that automaticaly fills the left over space, but I don't want to use tables. So how can I do this with floats?

Problem courtesy of: mrT

Solution

You can put overflow:hidden on the third column and it will automatically take up the remaining space. See this fiddle.

Example:

HTML:

CSS:

.container {
    border: 1px solid black;
    width: 300px;
    height: 400px;
}

.one, .two {
    border: 1px solid blue;
    float: left;
    width: 50px;
    height: 400px;
}

.three {
    border: 1px solid red;
    height: 400px;
    overflow: hidden;
}

Note that the third column should not be floated.

Solution courtesy of: dsundy

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can I set a floats width to the left over space?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×