Jonatan Stenbacka Jonatan Stenbacka - 3 months ago 10
CSS Question

How should I use `position` and other properties correctly to position my web page?

I'm have a fully functioning web page with three parts. A banner container, a menu container, and a content container

This is the layout:

The layout of my webpage

The problem is that these are positioned using

position: fixed;
together with
margin
,
left
, and
top
properties. This means that when the web browser is smaller than the size of the web page, I can't scroll on it. And yes. I know the solution is remove "position: fixed" (which has been pointed out on other threads regarding this topic here on stackoverflow). But the problem is that I haven't been able to detain the layout while removing the fixed position, not even close.

The closest to this I've come is by just changing the position property of the content container to
relative
. This does not affect the layout while the size of the web browser window is larger than the width of my entire page, and when it's the web browser window is smaller than the content container I can indeed scroll on it. But of course, when I decrease the size of the browser window my content container follows with it and overshadows my menu container (since that still has a fixed positioning). Also somehow my menu buttons (which are links placed in a list), even when not overshadowed by the content container, stops reacting when clicking on them and hovering over them.

So is there a good rule of thumb on how you are supposed to use positioning and other properties to position your web page, because clearly I have gotten it all wrong somehow.

These are the relevant css properties of my three containers:

div#banner_container{
position: fixed;
width: 650px;
height: 75px;
margin-left: 50px;
margin-top: 8px;
}

div#menu_container {
top: 95px;
position: fixed;
width: 150px;
height: 150px;
margin-left: 50px;
margin-top: 10px;
}

ul#menu {
position: fixed;
left: 18px;
top: 89px;
}

div#content_container {
position: fixed;
top: 95px;
width: 100%;
max-width: 492px;
height: 500px;
margin-left: 210px;
margin-top: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


Thanks in advance!

Answer

Is this good for you ?

http://jsfiddle.net/0cmwhafq/2/

I just set all positions to relative, and used float:left, for your menu and content container

div#banner_container{
    position: relative;
    width: 99%;
    height: 75px;
    margin:1%;
    background-color:red;
}

div#menu_container {
    position: relative;
    width: 18%;
    margin:1%;
    height: 350px;
    background-color:green;
    float:left;


}


div#content_container {
    position: relative;
    width: 79%;
    height: 500px;
    margin-left:1%;
    margin-top:1%;
    float:left;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color:blue;

}

If you want your layout to be centered, just add a wrapper containing all of them

Comments