CODEWITHSUNDEEP
htmlcss
Nate
Nate

Reputation: 28454

How to float two DIVs next to each other without specifying width?

I'm trying to float two DIVs to the left, with the leftmost DIV having a set width and the rightmost DIV taking up the rest of the space. I thought this would work, but it's not:

<div class="container">
    <div class="left">
        content left
    </div>
    <div class="right">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>

</div>

.container {
    overflow: auto;
    width: 600px;
    background-color: lightgreen;
}

.left {
    width: 50px;
    float: left;
    background-color: lightblue;
}

.right {
   float: left; 
   background-color: lightpink;
}

JSFIDDLE

I read a bunch of related questions on here, many of which suggested adding overflow: hidden to the parent container, but nothing I've tried has worked!

If I remove most of the lorem ipsum text to the point where there are just a few words (i.e. making the width less than the container), then the rightmost DIV floats to the left as expected.

How can I get this working?

Upvotes: 1

Views: 1354

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106058

The second element in the flow should not float if you want it to cover all horizontal width avalaible.

To have it stand aside and not behind as well , you need to trigger the layout. You can use overflow:hidden for instance. DEMO

.container {
    overflow: auto;
    width: 600px;
    background-color: lightgreen;
}

.left {
    width: 50px;
    float: left;
    background-color: lightblue;
    height: 400px;
}

.right {
   overflow:hidden;/* trigger layout to mind floatting elements inside and outside*/
   background-color: lightpink;
}

for colums of equal heights , you can use display:table on parent and display:table-cell on childs , remove all float rules in this case.

Upvotes: 1

Radu Vlad
Radu Vlad

Reputation: 1514

You could try this, no floating though:

.container {
  overflow: auto;
  width: 600px;
  background-color: lightgreen;
}

.left {
  width: 50px;
  position:absolute;
  background-color: lightblue;
}

.right {
  margin-left:50px;
  background-color: lightpink;
}

Upvotes: 0

Related Questions