CSS 2 column layout without floats

Question

I'm new to HTML/CSS and I want quite simple thing - 2 column layout, where the right column gets the width according to its content (text) and left column takes the rest of the space.

I was able to do that using floats - basically the right div was floated to the right and the left div was using some overflow: auto magic to get the remaining area:

body, html {
  margin: 0;
  height: 100%;
}

.ellipsize {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right {
  float: right;
  width: auto;
  background-color: orange;
  height: 100%;
}

.left {
  background-color: black;
  width: auto;
  overflow: auto;
  height: 100%;
  color: white;
}

<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
  <div class="ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
  </div>
</div>

However, I have recently read a lot of posts about how floats are wrong, old-style, should not be used and so on, and everybody says to use display: inline-block instead.

Question: is it possible to reach the same effect with inline-block or without floats?

imo, you cannot achieve the "left takes up remainder of space" effect using inline-block. I don't see anything wrong with using floats. Keep in mind, the bootstrap still builds it's grid system using floats. — arbuthnott
– arbuthnott, Commented Mar 20, 2018 at 12:58
Floats are fine - don't let the buzz tell you otherwise. Although flex and grid are cool for your situation that isn't a problem. — user5481714
– user5481714, Commented Mar 20, 2018 at 20:18

aMJay · Accepted Answer · 2018-03-20 12:56:39Z

2

However, I have recently read a lot of posts about how floats are wrong, old-style, should not be used and so on

If you're looking for a more modern solution using flexboxes is one of them. Here's how you could achive your desired effect by wrapping your content in a wrapper with a display:flex.

.wrapper{
  display:flex;
  flex-direction:row-reverse;
}

.right{
  background-color:pink;
}

.left{
  background-color:lightgreen
}

<div class="wrapper">
<div class='right'>HELLO WORLD!!!</div>
<div class='left'>
  <div class="ellipsize">Lorizzle ipsum shiznit black amizzle, fo shizzle adipiscing tellivizzle. Nullizzle sapien velizzle, volutpat, suscipit bow wow wow, gravida i'm in the shizzle, stuff. We gonna chung i saw beyonces tizzles and my pizzle went crizzle tortizzle. Gangster erizzle. Brizzle izzle dolizzle my shizz turpizzle tempizzle fo shizzle. Maurizzle fo shizzle nibh shizzlin dizzle gangsta. Own yo' izzle yo mamma. Yo the bizzle rhoncus away. In black habitasse platea black. Phat dapibizzle. Curabitur tellizzle urna, pretizzle eu, mattizzle pot, break yo neck, yall vitae, nunc. Mammasay mammasa mamma oo sa suscipizzle. Shizznit sempizzle fizzle shiz yo.
  </div>
</div>
</div>

answered Mar 20, 2018 at 12:56

aMJay

2,2436 gold badges24 silver badges37 bronze badges

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

4 Comments

frangulyan Over a year ago

Cool, I will try that, thanks! Didn't reach the flex "lessons" yet, I'm new as I wrote :D

aMJay Over a year ago

No problem, flex is really good thing to learn and it's relativly easy :)

frangulyan Over a year ago

I just noticed that the right side's size is not determined by the content of the "hello world" text, so it basically didn't fully answer the question. How can I make the right part width be dynamically changed based on the width of the text to fully contain it?

aMJay Over a year ago

If what you mean by that is that the text breaks into another line you can give it property white-space:nowrap

Milan Panigrahi · Accepted Answer · 2018-03-20 13:00:24Z

1

use display:flex . It will work perfectly and If you want this to be responsive use flex-wrap: wrap.

.ellipsize {
  display: flex;
  flex-wrap: wrap
}

answered Mar 20, 2018 at 13:00

Milan Panigrahi

5469 silver badges11 bronze badges

Collectives™ on Stack Overflow

CSS 2 column layout without floats

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related