CODEWITHSUNDEEP
htmlcssflexbox
strangeQuirks
strangeQuirks

Reputation: 5920

How to best layout a header with 4 divs next to each other and that should be mobile friendly?

I have the following layout for a header for a web page I am developing with the following configuration:

max-width: 1050px;
height: 150px;

Header layout What would be the best way to lay this out so that it is also as mobile friendly as possible.

My Idea was this: Each div has its width if its fixed width and also are display: inline-block. But then that is not so mobile friendly as I would have to add responsive blocks.

Has anyone a nicer idea I could do with that?

Here is what I have started with: https://jsfiddle.net/6ohe3hgp/ But not sure if its the right direction as it should also be mobile and by mobile i would probably stack the items on top of each other.

Upvotes: 2

Views: 607

Answers (4)

Asons
Asons

Reputation: 87191

I can't think of a better way than using flexbox (which you also tagged the question with)

When all in a row, they will have the same height based on the one with most content, when stack vertically, on i.e. mobile's, they collapse to their content to make scrolling to a minimum.

Updated fiddle

.container {
  max-width: 1050px;
  margin: 0 auto;         /*  will center the container on wide screen  */
  display: flex;
}
.one {
  width: 100px;
  background-color: #f66;
}
.two {
  width: 200px;
  background-color: lightgreen;
}
.three {
  flex: 1;                /*  this makes it take all the available space  */
  color: white;
  background-color: black;
}
.four {
  width: 200px;
  background-color: lightblue;
}
@media screen and (max-width: 600px) {  
 .container {
    display: block;
  } 
 .container > div {
    width: 100%;
  }
}
<div>
  <div class="container">
    <div class="one">
      Fixed width
    </div>
    <div class="two">
      Fixed width, with several<br>
      lines of text that will<br>
      make all the other get<br>
      equal height
    </div>
    <div class="three">
      Dynamic width
    </div>
    <div class="four">
      Fixed width
    </div>
  </div>
</div>

Upvotes: 1

random_user_name
random_user_name

Reputation: 26160

There's a variety of ways to do this. Some involve absolute position, some involve float, some involve display table-cell. Every technique have trade-offs (including mine below).

I noticed someone recommended bootstrap to solve this - I don't actually think it will, as this is not truly a "grid system", but a custom layout with a mix of dynamic and fixed width items.

I happen to prefer inline-block per your question, so would like to show you a couple of CSS tools that may or may not get you where you want. They leverage calc and vw

body, html {
    margin: 0;
    padding: 0;
}

div.container {
    margin: 0;
    padding: 0;
}

div.col {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    /* the styles below are for illustration only */  
    min-height: 60px;
    background: #ccc;
    color: white;
    padding: 10px 20px;
    margin: 0;
}

div.col-1,
div.col-2 {
    width: 150px;
    background: #444;
}

div.col-4 {
    width: 100px;
    background: #aaa;
}

div.col-3 {
    /* calculate value - 100vw (100% of viewport width) minus total width of other divs */
    width: calc(100vw - 400px);
}
<div class="container">
  <!-- NOTE: These divs are all on the same line to avoid 
       space between items.  See https://css-tricks.com/fighting-the-space-between-inline-block-elements/ -->
  <div class="col col-1">Fixed Width</div><div class="col col-2">Fixed Width</div><div class="col col-3">Variable Width</div><div class="col col-4">Fixed Width</div>
</div>

Upvotes: 1

peterh
peterh

Reputation: 1

You can absolutely position all of them.

The trick is this: you can set the left:, width:, right: css parameters arbitrarily, and you can even neglect them.

So:

  • give the first div a left: 0 and a width: (in pixels).
  • to the second: left: (fix in pixels) and right (also fix in pixels).
  • to the third: left (fix, you can calculate it from the the widths of the first two) and right: (which is the width of the fourth)

And so on.

Absolute positioning works only inside display: block elements whose position: is different from static. So, you need this for the top div:

#topdiv {
  display: block;
  position: relative;
  max-width: 1050px;
}
#div1 {
    width: 150px;
    left: 0;
    display: block;
    position: absolute;
 }

#div2 {
    display: block;
    position: absolute;
    left: 150px;
    width: 150px;
 }

#div3 {
  display: block;
  position: absolute;
  left: 300px;
  right: 150px;
}

#div4 {
  display: block;
  position: absolute;
  right: 0;
  width: 150px;
}

Note:

Upvotes: 0

rafaelfndev
rafaelfndev

Reputation: 739

I using display table and table-cell to do this, see https://jsfiddle.net/8s07y8zg/

HTML

<div class="table">
    <div class="td one">
    One
    </div>
    <div class="td two">
    Two
    </div>
    <div class="td three">
    Three
    </div>
    <div class="td four">
    Four
    </div>
</div>

CSS

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
  box-sizing: border-box;
  color: #FFF;
}
.td {
  display: table-cell;

  height: 100px;
}
.one {
  width: 150px;
  background-color: red;
}
.two {
  width: 200px;
  background-color: green;
}
.three {
  background-color: black;
}
.four {
  width: 200px;
  background-color: blue;
}

Upvotes: 1

Related Questions