Andy R Andy R - 3 months ago 10
CSS Question

Make a div with three inner floated divs responsive for mobile

I have an outer header div that contains three floated divs within it.

The inner leftHeader and inner rightHeader are both empty. Only the middleHeader contains a few links.

When viewed on mobile (320 - 420), I only want the middleHeader to be visible and to take up all available space - I have code for this given below?

What is happening is middleHeader is responsive but only seems to take up a third of the row even though I have width 100%, I want middleHeader to take up full 100% of the space in its row. Any help would be great. Maybe there is a better way to do this?

The HTML

<div class="header">
<div class="leftHeader">Empty</div>

<div class="middleHeader"><nav>
<ul>
<li><a href="page1.html" title="">Link to page 1</a></li>
<li><a href="page2.html" title="">Link to page 2</a></li>
<li><a href="page3.html" title="">Link to page 3</a></li>
</ul>
</nav></div>

<div class="rightHeader">Empty</div>
</div>


The CSS for Mobile

@media only screen and (min-width: 320px) and (max-width: 420px) and (orientation : portrait){

div.leftHeader{visibility:hidden;}

div.middleHeader{width: 100%; float: none; text-align:left;}

div.rightHeader{visibility:hidden;}

}

Answer

Visibility: hidden; does not prevent the element from occupying space inside box-model of that element.

You need to use display:none; - this hides the content as well as doesn't allows the element to occupy any browser space.


@media only screen and (min-width: 320px) and (max-width: 420px) and (orientation: portrait) {
  .middleHeader {
    width: 100%;
    float: none;
    text-align: left;
    background: red;
    /* for demo purpose */
  }
  .hidden-xs {
    display: none;
    visibility: hidden;
  }
}
<div class="header">
  <div class="leftHeader hidden-xs">Empty</div>

  <div class="middleHeader">
    <nav>
      <ul>
        <li><a href="page1.html" title="">Link to page 1</a>
        </li>
        <li><a href="page2.html" title="">Link to page 2</a>
        </li>
        <li><a href="page3.html" title="">Link to page 3</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="rightHeader hidden-xs">Empty</div>
</div>

Try viewing the code snippet example and resize your browser from 320 to 480px, you'll see the extra content hiding.

Comments