I'm designing a site. Works fine in 1024*768 but if somebody has resolution 800*600 main div of the page move under all other div on the bottom of the page. Here is a link (<!-- m --><a class="postlink" href="http://193.95.194.177/sd/">http://193.95.194.177/sd/</a><!-- m -->) and css (<!-- m --><a class="postlink" href="http://193.95.194.177/sd/css/dizajn.css">http://193.95.194.177/sd/css/dizajn.css</a><!-- m -->)
Plz help me
The reason that's happening is because you are floating your left and right columns, and you've given both columns widths. The left column is 120 pixels, if I'm not mistaken. The right column is 85% of the screen, and therein lies your problem.
120 pixels is a larger percentage of an 800 wide screen than on a 1024 wide screen. The CSS for the left column should be just fine. All you've got to do is unfloat the right column, don't give it a width, but give it a margin equal to the left column's width and margin.
That should do it.
I also saw some IE5 box model hacks in your CSS. There is an easier way to get around lousy IE5.
<style type="text/css" media="screen">
<!--
#outterDIV {
width: 120px;
float: left;
}
#innerDIV {
/* Place margins, padding, and borders here. */
}
-->
</style>
.
.
.
<div id="outterDIV">
<div id="innerDIV">
<p>Yada, yada yada, blah blah blah.</p>
</div>
</div>
DIVs by default take up as much space as possible if no width is supplied via CSS. The browser automatically calculates the width of #innerDIV if you gon't give it a width, but give it margins, padding, and borders.
You may find the following thread usefull at tutorialforums.com: CSS/DIV FAQ (<!-- m --><a class="postlink" href="http://www.tutorialforums.com/showthread.php?s=&threadid=68899">http://www.tutorialforums.com/showthrea ... adid=68899</a><!-- m -->)One problem is that your layout doesn't actually fit together edge-to-edge. E.g., the top section is overlayed by the left nav bar. Think of each div as a rectangle you've cut out of cardboard and mentally slide them around, bumping edges together until you get the fit you need.Thx for all. I'm total noob
Plz help me
The reason that's happening is because you are floating your left and right columns, and you've given both columns widths. The left column is 120 pixels, if I'm not mistaken. The right column is 85% of the screen, and therein lies your problem.120 pixels is a larger percentage of an 800 wide screen than on a 1024 wide screen. The CSS for the left column should be just fine. All you've got to do is unfloat the right column, don't give it a width, but give it a margin equal to the left column's width and margin.
That should do it.
I also saw some IE5 box model hacks in your CSS. There is an easier way to get around lousy IE5.
<style type="text/css" media="screen">
<!--
#outterDIV {
width: 120px;
float: left;
}
#innerDIV {
/* Place margins, padding, and borders here. */
}
-->
</style>
.
.
.
<div id="outterDIV">
<div id="innerDIV">
<p>Yada, yada yada, blah blah blah.</p>
</div>
</div>
DIVs by default take up as much space as possible if no width is supplied via CSS. The browser automatically calculates the width of #innerDIV if you gon't give it a width, but give it margins, padding, and borders.
You may find the following thread usefull at tutorialforums.com: CSS/DIV FAQ (<!-- m --><a class="postlink" href="http://www.tutorialforums.com/showthread.php?s=&threadid=68899">http://www.tutorialforums.com/showthrea ... adid=68899</a><!-- m -->)One problem is that your layout doesn't actually fit together edge-to-edge. E.g., the top section is overlayed by the left nav bar. Think of each div as a rectangle you've cut out of cardboard and mentally slide them around, bumping edges together until you get the fit you need.Thx for all. I'm total noob