Edward144 Edward144 - 4 months ago 13
CSS Question

How to make a responsive single page website with sidebar?

What I am looking to do is create a website which has two sections - a left hand sidebar which will contain the name of the website/logo, the menu, and a small footer with copyright and maybe social links. The other section will be the main content of the site.

Really simply shown below, probably using 'display: inline-block'.

<html>
<div class="sidebar">

</div>

<div class="content">

</div>
</html>


enter image description here

Doing this without being responsive seems fairly straightforward, I could either set the sidebar to 20% width and the content to 80%. Or set the sidebar to a fixed width of say 500px and the content to 100% - 500px. But both of these seem like they could cause problems depending on the resoulution of the display.

Using percentages could result in a too tiny sidebar on smaller screens and a too big sidebar on bigger screens. So giving it a fixed width seems a better option, but then it could give an opposite problem of being too big on small screens, and too small on bigger screens.

Is there any sort of industry standard for building a website in this way? I have seen a few websites using this type of design (Mainly photographers and other portfolio style uses).

Answer

Try this http://jsfiddle.net/gpxeF/

#fixedWidth{ 
    width: 200px;
    float: left;
    background: blue;
}
#theRest{
    background: green;
}

<div id=fixedWidth>
Fixed</div>
<div id=theRest>
    The rest of the space<br />WTF?</div>