How to avoid horizontal scroll with CSS

[kebele]

I have a two column page and I have a dropdown menu that i created using Asp.net and I want the size of this menu to adjust with a diffrent size of resolution but it does not work for me. It works fine when i use 768x1024 but when i change to 600x800 it goes beyond the screen size and create a horizontal scrool bar which i do not want. below is my CSS that i use to create my vertical bar and



#VmenuBar {
position: absolute;
top:0px;
left:0%;
width: 14%;
height:600px;
background-color: skyblue;
}
#HorizontalMenu{
position: absolute;
top:85px;
left:16%;
Width=85%
}
<div id=HImage><img src="images/costEst.gif" alt="Cost Estimating Section" /></div>
<div id=VmenuBar>
<img src="images/hublogo_blue.jpg" alt="Ihub Logo"/></div>
<div id=HorizontalMenu >
<asp:Menu ID="Menu1" StaticDisplayLevels="2" runat="server" Orientation="Horizontal" DataSourceID="SiteMapDataSource1" BackColor="RoyalBlue" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="White" StaticSubMenuIndent="10px" StaticEnableDefaultPopOutImage="False" EnableViewState="False" Width="85%"></asp:Menu>

 

[Vragabond]

Using absolute positioning for fluid designs is a bad idea. Showing us server side ASP.NET code likewise.

 

[kebele]

thanks for the response so what do you advise me.Can you give me an example how this can be done. thanks again

 

[Vragabond]

1. Remove all the position, left, top, right, bottom attributes from css.
2. Correctly apply width to both elements (at the moment only the first has it set up correctly).
3. Add float: left; to both elements.

In addition to that:
- move all possible style related things to css.
- don't use divs if they only contain one element and you could apply the same style to that element.
- if you get caught, compile the code, look at the page, do a view source and come here with the questions.