Reece Dodds Reece Dodds - 1 month ago 11
CSS Question

use HTML5 and CSS to create 5 equal and elastic columns that adjust height in a single row

I'm fairly beginner with CSS and wish to make a HTML block from scratch on our Jive platform that is a single row of 5 buttons. Each button will contain an icon and text with the entire button being a link.
I want the block to span 100% of the div it is in, and the buttons to adjust height and width depending on page width so that all 5 buttons are always on the same row until the screen width drops to below 600px and each button will fill a row each.

So far I have:



#newsnav-container {
display: block;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: beige;
}
#newsnav-container a {
overflow: hidden;
/*display:inline-block;
height:100%;
width:23%;
margin:0 2% 0 0;*/
background-color: #96C;
}
#newsnav-container a > div {
padding: 15px;
margin: 0 5px 0 0;
background-color: #96C;
float: left;
width: 18.16%;
}
@media screen and (max-width: 600px) {
#newsnav-container a > div {
float: left;
width: 100%;
margin: 0 0 5px 0;
}
}

<html>

<head>
< <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body>
<div id="newsnav-container">
<a class="link-button2" target="_parent" href="link1">
<div><i class="fa fa-home" aria-hidden="true"></i><span>1</span>
</div>
</a>

<a class="link-button2" target="_parent" href="link2">
<div><i class="fa fa-bookmark" aria-hidden="true"></i><span>2</span>
</div>
</a>

<a class="link-button2" target="_parent" href="link3">
<div><i class="fa fa-briefcase" aria-hidden="true"></i><span>3</span>
</div>
</a>

<a class="link-button2" target="_parent" href="link4">
<div><i class="fa fa-commenting" aria-hidden="true"></i><span>4</span>
</div>
</a>

<a class="link-button2" target="_parent" href="link5">
<div><i class="fa fa-tachometer" aria-hidden="true"></i><span>5</span>
</div>
</a>
</div>
</body>

</html>





The problem I have at the moment and can't get past is the 5th button won't stay up in the row with the others if the window is any smaller than full-screen on my 1920 res.

enter image description here

How do I fix this?

(Please excuse my lack of formatting and content - like I said I'm building from scratch and am using block colours to get my elements' responsiveness right first)

Answer

Method #01 (Preferred):

Use css3 flexbox:

#newsnav-container {
    display: flex;
}
#newsnav-container a {
    width: 19%;
}

#newsnav-container {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  background-color: beige;
  display: flex;
}

#newsnav-container a {
  margin-right: 1%;
  width: 19%;
}
#newsnav-container a > div {
  padding: 15px;
  background-color: #96C;
}

@media screen and (max-width: 600px) {
  #newsnav-container {
    flex-direction: column;
  }
  #newsnav-container a {
    margin: 0 0 5px;
    width: 100%;
  }
}
<div id="newsnav-container">
  <a class="link-button2" target="_parent" href="link1">
    <div><i class="fa fa-home" aria-hidden="true"></i><span>1</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link2">
    <div><i class="fa fa-bookmark" aria-hidden="true"></i><span>2</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link3">
    <div><i class="fa fa-briefcase" aria-hidden="true"></i><span>3</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link4">
    <div><i class="fa fa-commenting" aria-hidden="true"></i><span>4</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link5">
    <div><i class="fa fa-tachometer" aria-hidden="true"></i><span>5</span></div>
  </a>         
</div>

Method #02:

Use display: table and display: table-cell propreties.

#newsnav-container {
    display: table;
    width: 100%;
}
#newsnav-container a {
    display: table-cell;
}

#newsnav-container {
  display: table;
  width: 100%;
  height: 50px;
  margin: 0 auto;
  background-color: beige;
}

#newsnav-container a {
  display: table-cell;
}
#newsnav-container a > div {
  padding: 15px;
  margin:0 5px 0 0;
  background-color:#96C;
}

@media screen and (max-width: 600px) {
  #newsnav-container {
    display: block;
  }
  #newsnav-container a {
    margin-bottom: 5px;
    display: block;
  }
}
<div id="newsnav-container">
  <a class="link-button2" target="_parent" href="link1">
    <div><i class="fa fa-home" aria-hidden="true"></i><span>1</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link2">
    <div><i class="fa fa-bookmark" aria-hidden="true"></i><span>2</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link3">
    <div><i class="fa fa-briefcase" aria-hidden="true"></i><span>3</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link4">
    <div><i class="fa fa-commenting" aria-hidden="true"></i><span>4</span></div>
  </a>

  <a class="link-button2" target="_parent" href="link5">
    <div><i class="fa fa-tachometer" aria-hidden="true"></i><span>5</span></div>
  </a>         
</div>