CODEWITHSUNDEEP
htmlcss
frangulyan
frangulyan

Reputation: 3887

CSS 2 column layout without floats

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?

Upvotes: 0

Views: 896

Answers (2)

Milan Panigrahi
Milan Panigrahi

Reputation: 546

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
}

Upvotes: 1

aMJay
aMJay

Reputation: 2243

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>

Upvotes: 2

Related Questions