CODEWITHSUNDEEP
htmlcsscss-float
zessx
zessx

Reputation: 68820

Take padding in account for floating elements

I would like to have a main element, with side blocks floating to its right side. I don't know the number of side blocks, neither their final total height. But my main element should have the same height (see the following example for better understanding), without using columns.

(dashed areas are real contents)

enter image description here

To force my main (red) element to fit side blocks height, I use this trick:

padding-bottom: 5000px;
margin-bottom: -5000px;

This works well, but side blocks doesn't care of padding, they just ignore it.
How can I get them to take padding into account?

N.B: HTML markup should not be changed, and I'm not willing to use JS for layout purpose

.container {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.main {
  float: left;
  background: tomato;
  width: 440px;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}
.side {
  float: left;
  background: forestgreen;
  height: 50px;
  width: 150px;
  margin-left: 10px;
  margin-bottom: 10px;
}
<div class="container">
  
  <div class="main">&nbsp;</div>
  
  <div class="side">&nbsp;</div>
  <div class="side">&nbsp;</div>
  <div class="side">&nbsp;</div>
  
</div>

Upvotes: 0

Views: 565

Answers (4)

Paulie_D
Paulie_D

Reputation: 115362

How is this for an option?

No markup change and purely CSS with no change in absolute values already given.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
}
.main {
    background: tomato;
    width: 440px;
    padding-bottom: 5000px;
    margin-bottom: -5000px;
    float: left;
}
.side {
    background: forestgreen;
    height: 50px;
    width: 150px;
    margin-left: 10px;
    margin-bottom: 10px;
    float: right;
    clear: right;
}

.side:last-child {
    margin-bottom: 0;
}
<div class="container">
    <div class="main">&nbsp;</div>
    <div class="side">&nbsp;</div>
    <div class="side">&nbsp;</div>
    <div class="side">&nbsp;</div>
</div>

Upvotes: 1

zessx
zessx

Reputation: 68820

I found a solution, using margin-left instead of float: left:

.container {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.main {
  float: left;
  background: tomato;
  width: 440px;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}
.side {
  background: forestgreen;
  height: 50px;
  width: 150px;
  margin-left: 450px;
  margin-bottom: 10px;
}
<div class="container">
  
  <div class="main">&nbsp;</div>
  
  <div class="side">&nbsp;</div>
  <div class="side">&nbsp;</div>
  <div class="side">&nbsp;</div>
  
</div>

Upvotes: 0

Wouter den Ouden
Wouter den Ouden

Reputation: 1523

When you float an element, it's effectively taking it out of the document flow, so padding won't have an effect on it. You could use margin-top: 10px; on both of your inner divs.

Upvotes: -1

Refilon
Refilon

Reputation: 3499

The only way i can come up with a solution is this:

JS FIDDLE

I made a .wrapper div around the 3 (forest)green boxes, and centered that one to the right. So now you have those 3 boxes floating right of the tomato colored div.

Don't forget to make a clear both under the floating divs, or else everything will overlap the divs. and in you CSS sheet: .clear{ clear: both; }

Hope it helps. :)

Upvotes: 1

Related Questions