PDA

View Full Version : How to remove Horizontal scroll bar on 100% width



Uzair
Nov 21st, 2006, 08:43 AM
I'm designing a css layout please tell me how can I remove horizontal scroll bar.
Here's the code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
BODY {
background-color: #edf4fe;
margin: 0px;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

a:link, a:visited {
color: #006699;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}

#siteL {
width: 375px;
height: 116px;
font-size: 11px;
margin: 3px 3px;
}

#siteL a{
color: #006699;
}

#siteL a:hover{
text-decoration: none;
}

#siteL img{
float: left;
}

#siteLfiller {
position: absolute;
top: 119px;
left: 0px;
height: 16px;
width: 260px;
background: url(images/navmain_bg.gif) bottom;
}

#tabs {
position: absolute;
top: 102px;
left: 260px;
height: 33px;
width: 530px;
}

#utility {
position: absolute;
font-size: 11px;
top: 84px;
left: 638px;
}

#utility a{
color: #006699;
text-decoration: none;
}

#utility a:hover{
color: #000000;
text-decoration: underline;
}

#tabs.img {
width: 61px;
height: 33px;
border: 0px;
}

#subNav {
position: absolute;
top: 135px;
left: 0px;
width: 100%;
height: 25px;
padding: 6px 0px 0px 10px;
background: url(images/subtabsbtn_bg.gif);
}

#optBar {
position: absolute;
top: 160px;
left: 0px;
width: 100%;
height: 22px;
padding: 6px 0px 0px 10px;
background: url(images/optbar_bg.gif);
}

#contents {
position: absolute;
top: 191px;
left: 5px;
right: 8px;
width: 60%;
background: #FFFFFF;
border: 1px solid #73b0d5;
}

.cnt {
padding: 6px;
}

#cp {
position: absolute;
bottom: 0px;
left: 0px;
width: 99.8%;
height: 19px;
text-align: center;
padding: 6px 0px 0px 10px;
background: url(images/subtabsbtn_bg.gif);
}
</style>
</head>

<body>
<div id="siteL">
<img src="images/logo.jpg" width="234" height="116" border="0" />Welcome User...<br />[ <a href="#">Signout</a> ]
</div>
<div id="utility"><a href="#">Home</a> | <a href="#">Change Password</a></div>
<div id="tabs">
<img src="images/tabscurve.gif" /><a href="#"><img src="images/btn_rp.jpg" width="152" height="33" border="0" /></a><a href="#"><img src="images/btn_adb.jpg" width="86" height="33" border="0" /></a><a href="#"><img src="images/btn_ppl.jpg" width="67" height="33" border="0" /></a><a href="#"><img src="images/btn_nb.jpg" width="91" height="33" border="0" /></a><a href="#"><img src="images/btn_st.jpg" width="70" height="33" border="0" /></a> </div>
<div id="siteLfiller"></div>
<div id="subNav">
SubLinks Here
</div>
<div id="optBar">
New | Delete | Rename
</div>
<div id="contents">
<div class="cnt">
Welcome to the site...<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="cp">
Copyright &copy;2007. All Rights Reserved.
</div>
</body>
</html>

ronaldb66
Nov 21st, 2006, 10:47 AM
The width property sets the width of the content of an element; any padding, borders and margins add up to that resulting in the total width of element as it is rendered on the screen, which in your case results in something a little more than the window width, for example #subNav = 100% + 6px + 10px.

In combination with absolute positioning, an absolute width like px yields more predictable results; rather, use floats instead of absolute positioning for layout purposes, especially if you want the layout width to adapt to the window width ("fluid" design).

Uzair
Nov 21st, 2006, 11:01 AM
can u please do some immendments in my code?
Just point where I'm making the mistake.
Thanks