Floating divs css issue

Question

I'm working on a small PHP script, I made 2 divs and I used the float to show the two divs in the same line. But I still have a problem with background because the two divs do not have the same height.

This is the css code:

.wrapper{
    width:200px;
}
.content{
    width:200px;
}
.right{
    float:right;
    width:100px;
    background:yellow;
}
.left{
    float:right;
    width:100px;
    background:red;
}
.clear{
    clear:both;
}

And this is the html code:

<div class="wrapper">
    <div class="content">
        <div class="right">
            sdiousoiudosud sdiousoiudosud sdiousoiudosud sdiousoiudosud
        </div>
        <div class="left">
            iuoiu
        </div>
        <div class="clear">
        </div>
    </div>
</div>

You haven't really asked a question. What are you hoping to achieve? — Jeff
– Jeff, Commented Dec 24, 2013 at 18:36
Edited to include the question. Please be sure to be explicit about what you're expecting when asking questions. — Jeff
– Jeff, Commented Dec 24, 2013 at 18:50

Oriol · Accepted Answer · 2013-12-24 18:47:46Z

1

You should use display: table-cell:

.left, .right{
    display: table-cell;
    width: 100px;
}
.right{
    background:yellow;
}
.left{
    background:red;
}

Demo

If you want you can also use display: table-row and display:table, and set all widths. But it isn't necessary. Demo

edited Dec 24, 2013 at 18:47

answered Dec 24, 2013 at 18:42

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3027295 Over a year ago

Where should i use it?

Community · Accepted Answer · 2017-05-23 11:53:03Z

0

The "good way" is using display: table-cell, as I explained in my other answer.

But if you want to support old browsers like IE7, you can use the following trick:

.content{
    overflow: hidden;
}
.left, .right{
    float: left;
    width: 100px;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
.right{
    background:yellow;
}
.left{
    background:red;
}

Where 10000px can be any value greater than the height of the highest element.

Demo

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Dec 24, 2013 at 18:55

Oriol

291k71 gold badges459 silver badges535 bronze badges

Collectives™ on Stack Overflow

Floating divs css issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related