Multiple divs next to each that scale with the browser

Question

Ok, here goes.

So I have 3 that are to represent 3 blocks of content next to each other.

I want them to scale to the browser whilst keeping their aspect ratio.

This is what I have so far:

.dash__node__container {
  padding: 1rem;
  width: 100%;
  padding-bottom: 75%;
  position: absolute;
 } 

.dash__node {
  width: 32.75%;
  height: 50px;
  display: inline-block;
  border: 1px solid #D8D8D8;
  position: relative;
}

And Html:

<div class="dash__node__container">
      <div class="dash__node"></div>
      <div class="dash__node"></div>
      <div class="dash__node"></div>
    </div>

This code isn't holding the aspect ratio and the third block jumps down to the next line.

EDIT: http://codepen.io/anon/pen/ogRyoO

I think the term "keeping their aspect ratio" may confuse people. You want the three `.dash__node` blocks to remain on a single line regardless of the screen width. To do this, you want each `.dash__node` to have a flexible width. — Marc Audet, Apr 07 '15 at 15:55
Possible duplicate - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Paulie_D, Apr 07 '15 at 15:59
@Paulie_D How are you? Its long time see you on overflow.. :) — Kheema Pandey, Apr 07 '15 at 16:06
I see; I am also not so active anymore on SO occasionally come on SO now.. Since last 2 days i am here.. but glad to see you here. — Kheema Pandey, Apr 07 '15 at 16:09

score 0 · Answer 1 · answered Apr 07 '15 at 15:54

0

I think you can add float:left; to dash__node class, and remove position:relative;

answered Apr 07 '15 at 15:54

Tarek M. Ahmed

17
4

score 0 · Answer 2 · answered Apr 07 '15 at 15:56

0

Remove the inline-block and add float:left

answered Apr 07 '15 at 15:56

Erick

823
16
37

score 0 · Answer 3 · answered Apr 07 '15 at 15:56

0

That is because you use display: inline-block. Use float: left;

answered Apr 07 '15 at 15:56

gorgi93

2,457
8
30
53

score 0 · Accepted Answer · answered Apr 07 '15 at 15:59

Use float: left; to keep the divs from breaking apart and use the padding-bottom trick instead of height to keep an aspect ratio.

* {
  box-sizing: border-box;
}

.dash__node__container {
  padding: 1rem;
  width: 100%;
  padding-bottom: 75%;
  position: absolute;
 } 

.dash__node {
  float: left;
  width: 32.75%;
  padding-bottom: 10%;
  border: 1px solid #D8D8D8;
  position: relative;
}

score 0 · Answer 5 · answered Apr 07 '15 at 16:08

0

You could use float:left but another alternative is to have font-size:0 in your wrapper. This eliminates the space between your blocks. Obviously you'll then need to apply a font size to your child nodes. More info here.

The third block element falls below at smaller screen sizes because you have padding on your wrapper. Applying box-sizing:border-box;to all your divs will sort this. More on that here.

Here's a fiddle with the above applied: https://jsfiddle.net/nf7wsmk4/

answered Apr 07 '15 at 16:08

Matthew Allen

791
9
19

There was time when I also use `font-size:0` to achieve desire effect. but there are some drawbacks of using. may be some senior people can show some light why not to use `font-size:0` – Kheema Pandey Apr 07 '15 at 16:11
In the link I added it mentions that this will have issues on Android devices if they are pre-Jellybean OR if you're sizing your fonts using ems. – Matthew Allen Apr 07 '15 at 16:13

Multiple divs next to each that scale with the browser

5 Answers5