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

Dynamic widths to divs floating next to each other

Dynamic widths to divs floating next to each other

Problem

I have two divs, fl-left which is floated left and fl-right which is floated to the right. Both divs does not have fixed Widths and both of them needs to be inline.

Hey diddle diddle the cat and the fiddle.
Btn1 Btn2

Content on both are dynamic. What I want to do is, When content is added to either fl-left or fl-right they should not break into a second line. They should adjust their widths accordingly.

How can I do this?

JSFiddle if necessary http://jsfiddle.net/MvWJN/

EDIT:

fl-left should have 100% width minus the space taken up by fl-right

When content is added to fl-right, fl-left width should get pushed / adjusted

Problem courtesy of: user3607282

Solution

It's not entirely clear what you are trying to do but display:table-cell would probably be an optimal solution.

JSfiddle Demo

CSS

.fl-left {
    color:red;
}

.fl-right {
    text-align: right;
}

.wrapper {
    display: table;
    margin:10px;
    width:100%;
}
[class*=fl] {
    display:table-cell;
    border:1px solid grey;
}
Solution courtesy of: Paulie_D

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

Dynamic widths to divs floating next to each other

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×