I have a fixed header and three column layout. This template came from Rayzur. I just modified it to fit with my website. The problem is, I want the width of header is same as the width of inner/content which I did but, the input element in the right side of the header cannot see once the browser window was resized into small view.
What sort of solution are you looking for? What would you like to have happen when the browser window is too narrow to fit the layout as it currently exists?
Hi,
There are some things that you are going to have to come to terms with about absolute and fixed positioning. Fixed positioning is just a specialized form of absolute positioning. That layout uses absolute positioning but the concept is the same. They are both removed from the normal page flow.
The only way to access AP content that has gone beyond the viewport is with overflow:auto; applied to the ruleset. Then you are going to have scrollbars everywhere.
Fixed and absolute positioning must always be handled with care. It looks like you have made your site too wide or you should consider using percentage widths.
If you look at This Example and reduce your viewport width until the right sidebar disappears you will get a scrollbar. But you will notice that the right sidebar remains hidden even after you try to scroll it back. Once it goes behind the viewport it is lost and a scrollbar can not bring it back.
These are just adverse side effects that people new to fixed positioning struggle with when they want a fixed width centered site.
If you Position to the Viewport and let your page have full width then you don’t encounter these problems of divs being hidden.
Now I understand base on rayzur explanation. I changed my layout and use another template from rayzur as well. But i have a problem with ie6, there is no horizontal scroll bar appear once I resize the window. But when I tried to change the line overflow-y:scroll into overflow:scroll, horizontal scroll appear, but bringing back to the maximize window, unnecessary horizontal scroll bar exists. Actually, even the vertical scroll bar in ie6 and firefox always exists even the content of the viewport is small. It is possible not to display this vertical or horizontal bar if not necessary?
Hi,
From the looks of the source code on the link you gave I am going to guess you are using This Layout now.
I don’t think you understand how that layout works in IE6. IE6 is using fake fixed position and that is achieved by removing the scrollbars from the html/body elements. Then overflow:auto is set on the #wrapper which makes it the root element for IE6.
html,body {height:100%;padding:0}
<!--[if IE 6]>
<style type="text/css">
[B]html,
body [/B]{
[B]overflow:hidden;[/B][COLOR=Blue]/*remove scrollbar from IE6*/[/COLOR]
padding:0;
margin:0;
}
[B]#wrapper [/B]{[COLOR=Blue] /*This has essentially become the root element for IE6 now*/[/COLOR]
[B]overflow:auto;[/B][COLOR=Blue]/*IE6 fake fixed (works off a bug where overflow:auto is set on a parent)*/[/COLOR]
width:100%;
height:100%;
background:#E8E8F4 url(images/body-bg.jpg) repeat-x;/*same as body BG in main stylesheet*/
border:none;
}
[B]#innerwrap [/B]{
position:absolute;
[B][COLOR=Black]overflow-y:scroll;[/COLOR][/B]/[COLOR=Blue]*keep scrollbar position present so [B]#innerhead[/B] lines up at all times*/[/COLOR]
width:100%;
height:100%;
z-index:1;
}
If you want a detailed explanation of the technique it can be found in the “Catfish Article” of the Sitepoint blog.
But when I tried to change the line overflow-y:scroll into overflow:scroll, horizontal scroll appear, but bringing back to the maximize window, unnecessary horizontal scroll bar exists. Actually, even the vertical scroll bar in ie6 and firefox always exists even the content of the viewport is small. It is possible not to display this vertical or horizontal bar if not necessary?
No, you can’t remove or change the overflow-y:scroll on that layout for IE6. It is necessary to keep the scrollbar position in place at all times. The reason is because it is a fixed width/centered layout. The innerhead div is centered with auto margins and then it is shifted into place for IE6 with relative positioning.
[B]#innerhead[/B],
#innerfoot {
margin:0 auto;
[B] position:relative;[/B]
[B]left:-8px;[/B] [COLOR=Blue]/*half the scrollbar width after centering with auto margins*/[/COLOR]
}
</style>
<![endif]-->
If you tamper with either one of those settings the fixed/centered layout will not work in IE6.
There is going to be limitations/challlenges to any method you choose for IE6. Whether it be fake fixed with css, expressions, or a pure js solution. They are all going to have their pros and cons.
You really need to just back off on that 1100px width if you are going to use a fixed width centered layout. If I were you I would stay away from that catfish method and use an expression or js for IE6. I hate to say it but fixed position in IE6 is more trouble than it is worth. Looks like your getting some first hand experience at it.
I put together another example for you that is 1000px wide and uses an expression for IE6. If the users js is turned off then it just degrades to a static header that scrolls with the page. Expressions are known to use a lot of ram, a better alternative would probably be a js script.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fixed Header</title>
<style type="text/css">
* {margin:0;padding:0;}/*for demo purposes only, use a proper reset in your final layout*/
html,body { height:100%;}
body {
font-size:100%;
background:#777;
}
#wrapper{
min-height:100%;
width: 1000px;
margin:0 auto;
background:#CDF;
border-left:1px solid #000;
border-right:1px solid #000;
}
#header {
width:100%;
height:100px;
position:fixed;
top:0;
left:0;
z-index:5;
}
#innerhead {
width:1000px;
height:100px;
margin:0 auto;
background:#77F;
border-bottom:1px solid #000;
text-align:center;
}
#inner{
background:#CDF;
margin:0 auto;
padding-top:101px;/*preserve header space*/
width:1000px;
overflow:hidden;/*contain floats*/
}
#left,
#right {
float:left;
width:150px;
padding-top:10px;
background:#9BF;
font-size:80%;
}
#right {float:right;}
#middle {
float:left;
width:700px;
padding-top:10px;
background:#EEF;
font-size:80%;
text-align:justify;
}
h3,p{margin:0 10px 10px;}
.lgmarg{margin-bottom:40px;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {/* fix jitters when using expression*/
background:#777 url(foo) fixed;/*no need for a fake image http request*/
}
#wrapper {height:100%;position:relative;}
#innerhead {
position: absolute; /* position fixed for IE6 */
left:0;
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
#inner{padding-top:0;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="innerhead">
<h1>Fixed Header</h1>
<h3>IE6 gets an expression</h3>
</div>
</div>
<div id="inner">
<div id="left">
<h3>Left</h3>
<p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida
rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus
eget urna wisi id Suspendisse ullamcorper.</p>
<p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio
sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
</div>
<div id="middle">
<h3>Middle</h3>
<p>Lorem ipsum sed pede non adipiscing nulla lacinia ipsum quis ac Integer. Ut consectetuer Cras fringilla
Ut non gravida morbi Maecenas semper vel. Vestibulum quis In Nulla Vivamus Sed feugiat Quisque et
ipsum tincidunt. Semper vitae cursus metus risus enim gravida tellus id dignissim nec. Justo laoreet
dui commodo Integer malesuada vel quis vel consequat metus. Nec id dolor Aliquam Nullam gravida
libero montes nunc ante Nulla. Tortor id.</p>
<p>Lorem ipsum sed pede non adipiscing nulla lacinia ipsum quis ac Integer. Ut consectetuer Cras fringilla
Ut non gravida morbi Maecenas semper vel. Vestibulum quis In Nulla Vivamus Sed feugiat Quisque et
ipsum tincidunt. Semper vitae cursus metus risus enim gravida tellus id dignissim nec. Justo laoreet
dui commodo Integer malesuada vel quis vel consequat metus. Nec id dolor Aliquam Nullam gravida
libero montes nunc ante Nulla. Tortor id.</p>
<p>Lorem ipsum sed pede non adipiscing nulla lacinia ipsum quis ac Integer. Ut consectetuer Cras fringilla
Ut non gravida morbi Maecenas semper vel. Vestibulum quis In Nulla Vivamus Sed feugiat Quisque et
ipsum tincidunt. Semper vitae cursus metus risus enim gravida tellus id dignissim nec. Justo laoreet
dui commodo Integer malesuada vel quis vel consequat metus. Nec id dolor Aliquam Nullam gravida
libero montes nunc ante Nulla. Tortor id.</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
<p class="lgmarg">testing text for scrolling</p>
</div>
<div id="right">
<h3>Right</h3>
<p>Lorem ipsum dolor sit amet consectetuer quis tempus tristique facilisi Vestibulum. Gravida
rhoncus orci leo neque mattis felis Sed et tincidunt tellus. Massa ac condimentum elit ridiculus
eget urna wisi id Suspendisse ullamcorper.</p>
<p>Hendrerit eros ridiculus urna ipsum leo a ac sed tortor nisl. Tincidunt Morbi justo dis odio
sit non sapien enim a augue. Sapien odio dui est Sed nisl id id malesuada sagittis et.</p>
</div>
</div><!--end inner-->
</div>
</body>
</html>
thank you very much, I don’t know what do I have to say with you because thank you is not enough for your kindness to helping with me especially for you to seek a solution to solve my problems.
Hi tirso,
Glad we found something you can work with.
As I mentioned previously, “Fixed and Absolute positioning must always be handled with care.”
Even with that layout in post#7 you still need to be careful about placing anything on the right side of the header. If it is important to you that the input be accessible at all times then you should consider placing it on the left side of the header. Maybe position it to the lower left side of the header. That is the only way to protect it at reduced viewport widths.
