CODEWITHSUNDEEP
htmlcsslayout
Richard Muthwill
Richard Muthwill

Reputation: 336

Floating multiple divs into a single row

I'm trying to make this width divs:

.number {
  float: left;
  width: 50px;
}
.price {
  float: right;
  width: 50px;
}
.center {
  float: left;
  margin: 0 auto;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.clearfix,.number,.center,.price,.extra {
  margin: 5px;
  padding: 5px;
  border: 3px #333 solid;
}
<div class="clearfix">
  <div class="number">Number</div>
  <div class="center">
    <div class="extra">Title</div>
    <div class="extra">Description. Description. Description. Description. Description.</div>
  </div>
  <div class="price">Price</div>
</div>

Now we add a longer description and this happens

.number {
  float: left;
  width: 50px;
}
.price {
  float: right;
  width: 50px;
}
.center {
  float: left;
  margin: 0 auto;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.clearfix,.number,.center,.price,.extra {
  margin: 5px;
  padding: 5px;
  border: 3px #333 solid;
}
<div class="clearfix">
  <div class="number">Number</div>
  <div class="center">
    <div class="extra">Title</div>
    <div class="extra">Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. Description. </div>
  </div>
  <div class="price">Price</div>
</div>

I know this isn't possible in CSS but is there a way to 'fake' "max-width: (100% - 100px)" or something?

Upvotes: 0

Views: 478

Answers (3)

Saurabh Sonawane
Saurabh Sonawane

Reputation: 951

Try to use Bootstrap framework. and use it as,

<div class="col-md-2">Left box</div>
<div class="col-md-10">Central Box</div>
<div class="col-md-2">Right box</div>
//its just basic idea to tell you how you can do it..

If you really wanted to use float part, then provide width to div's in % like,
<div class="small-div">Left box</div>
<div class="inner-div">Central box</div>
<div class="small-div">Right box</div>

.small-div{
width:20%;
float:left;
display:block;}

.inner-div{
width:60%;
float:left;
display:block;}

/*you can the make it responsive by using media screens as */
@media only screen and (max-width: 991px) {
.small-div{
    width:25%;}
.inner-div{
    width:50%;}  
}
@media only screen and (max-width: 767px) {
.small-div,.inner-div{
    width:100%;
    float:none;
    margin-left:auto;
    margin-right:auto;}
}

Upvotes: 0

Antoine Bergeron
Antoine Bergeron

Reputation: 33

If the Calc compatibility doesn't do it for you, you could use css table-layout instead of floats. Fixed sizes on the outer columns, and the middle one will fill in.

.clearfix {display: table; width: 100%;}
.number {display: table-cell; width: 50px;}
.center {display: table-cell;}
.price {display: table-cell; width: 50px;}

https://jsfiddle.net/j4mxzgra/

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Yes, there is. You can use calc method:

max-width: calc(100% - 100px);

Also, check this before using calc for browser compatibility.

Upvotes: 2

Related Questions