CODEWITHSUNDEEP
cssscrollcss-position
Jonatan Stenbacka
Jonatan Stenbacka

Reputation: 1864

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!

Upvotes: 1

Views: 166

Answers (2)

Dikeneko
Dikeneko

Reputation: 358

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

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

The fundamental problem here is that you're using position: fixed to style your entire layout. This is really bad practice and can be completely avoided.

If you really don't want to remove the fixed positioning you can instead give your content container an overflow property set to scroll:

div#content_container {
    ...
    overflow: scroll;
}

Note that the overflow property also supports overflow-x and overflow-y which allow you to cater to either the horizontal or vertical scroll bars individually - these may be better in your case.

Upvotes: 1

Related Questions