How can I create a responsive web page layout with 'display:inline-block'?

Question

I want to create a simple responsive web page from scratch, just one html and one css file. This was intended as a short exercise, but it turned out that I underestimated the complexity.

The layout is simple. A header, main, sidebar and footer. Sidebar should have a fixed width and the main content should use the rest of the horizontal space. The sidebar should disappear if the screen width is below 480px. A menu icon is not even planned yet; I only want the sidebar to disappear and the main content to use 100% of the space subsequently.

After I gave up with floating divs, I started to read a lot about using display:inline-block for this purpose. For instance here. This seems to work much better than float, but there are some issues I can not solve.

• In a large window it works fine now. But if I resize the window to a smaller size, the layout starts to break. I know that is because the sidebar is fixed, but the main is in percentage. Therefore, when the window gets smaller, the space that is left for the sidebar decreases, too. How can I "tell" the main div to always "fill the rest of the space"?

• The media query that makes the sidebar disappear works, but it leaves a gap. I don't understand why it does not resize according to my css file.

This is my html and css code:

<div id="wrapper">
        <div id="header">
            <img src="logo.jpg" alt="Smiley face" style="height:15%;width:50%;">
        </div>
        <div id="mainWrap">
            <div id="sidebar">
                Sidebar
            </div>
            <div id="main">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed;
                Main
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>

And this is my css file:

@media screen and (max-width:480px){

#sidebar {
visibility:hidden;
width:0;
}
#main{
    width:100%;
}

#mainWrap{
font-size:0;
}
#header{
color:white;
margin-bottom:4em;
}


#sidebar{
font-size:12px;
width:25%;
vertical-align:top;
display:inline-block;
}

#main{
font-size:12px;
width:75%;
display:inline-block;
vertical-align:top;

}

#footer{
    font-size:12px;
    border-style: solid;
}

Answer 1

Check this out: http://jsfiddle.net/panchroma/Bjh35/

The HTML is the same as yours, some important changes in the CSS.

Firstly, you had a syntax error and didn't close the

@media screen and (max-width:480px){
.... 
} <==== you forgot this curly brace  

Secondly, you need to put the media query after your main CSS block, otherwise most of the settings will be replaced by what you have lower in the style sheet .

Lastly, to remove the sidebar at narrow viewports, you want to use display:none; You have visibility: hidden; which simply hides the element, but it still takes up space on the page

Hope this helps!

CSS

#mainWrap{
font-size:0;
    background-color:#aaa;
}
#header{
color:white;
margin-bottom:4em;
    background-color:#ddd;
}


#sidebar{
font-size:12px;
width:25%;
vertical-align:top;
display:inline-block;
    background-color:pink;
}

#main{
font-size:12px;
width:75%;
display:inline-block;
vertical-align:top;
    background-color:olive;

}

#footer{
    font-size:12px;
    border-style: solid;
    background-color:#ffc;
}

@media screen and (max-width:480px){

    #sidebar {
        display:none;
    }

    #main{
        width:100%;
    }
}

Answer 2

...although I am too tired to read all of your code, here is your solution:

<div class="container">
  <div class="sidebar">
    sidebar here
  </div>

  <div class="content">
    content here
  </div>
</div

<style>
.container {
  width:100%;
}
.sidebar {
  background:red;
  position:fixed;
  width:200px;    
}
.content {
  position:relative;
  display:block;
  background:green;
  margin-left:220px;    
}
@media (max-width:480px) {
 .sidebar {
  display:none;
  }
  .content {
   margin-left:0;    
  }    
}
</style>

http://jsfiddle.net/D78G2/1/