Andy R Andy R - 1 year ago 98
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?


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

<div class="middleHeader"><nav>
<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>

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

The CSS for Mobile

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


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



Answer Source

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">
        <li><a href="page1.html" title="">Link to page 1</a>
        <li><a href="page2.html" title="">Link to page 2</a>
        <li><a href="page3.html" title="">Link to page 3</a>

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

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