CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23142

Make div clear when it's child divs cant side along side each other?

Im making a responsive site. I have 3 divs (.block) that I need to sit along side each other horizontally.

When the screen is wide enough this is easy to achieve. However when I make the browser more narrow the third div (3) wraps onto the next line but what I want is for all of the div.blocks to wrap to the next line.

enter image description here

Can this be done without media queries? I want CSS that will keep working if the width of the elements is dynamic.

http://codepen.io/anon/pen/KeulD

<div class="other-block">
  Other block
</div>

<div class="cont1">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
</div>
.cont {
  width: 25%;
}
.block {
  float: left;
  border: 1px solid green;
  width: 70px;
  height: 70px;
}
.other-block {
  height: 70px;
  width: 300px;
  border: 1px solid red;
  float: left;
}

Upvotes: 0

Views: 42

Answers (2)

edonbajrami
edonbajrami

Reputation: 2206

One solution is this :

http://jsfiddle.net/ZFacP/1/

.cont1 {
  width: 210px;
  float:left;
}
.block {
  float: left;
  border: 1px solid green;
  width: 70px;
  height: 70px;
    box-sizing:border-box;
}
.other-block {
  height: 70px;
  width: 300px;
  border: 1px solid red;
  float: left;
}

If you want to use in the .cont1 widht 25% make the .block divs in percentage example:

http://jsfiddle.net/ZFacP/2/

.cont1 {
  width: 25%;
  float:left;
}
.block {
  float: left;
  border: 1px solid green;
  width: 33.333%;
  height: 70px;
    box-sizing:border-box;
}

Upvotes: 0

DaniP
DaniP

Reputation: 38252

What about float .cont1 too :

.cont1 {
  float:left;
}

The Codepen demo

Upvotes: 2

Related Questions