unwanted horizontal scrolling occuring

johnmerlino · 06-28-2010, 02:53 AM

Hey all,

I know that the overflow: autoo can cause horizontal scrolling when you specify a width and height. But in the below example, there's no need for it because the nested divs together only total 150px whereas the container is 180px, so why is horizontal scrolling occuring? Thanks for any response.

Code:

<body>
	<div style="width:180px; background-color: green; overflow: auto;">
		<div style="width: 100px; float: left;">
		Looking for <span style="font-style: italic">any </span> kind of appliance you may have to offer. 
		</div>
		<div style="width: 50px; float: right;">
		List of some of interested items
		<ul style="margin: 0; padding: 0;">
			<li style="margin: 0; padding: 0;">Refrigerator<li>
			<li style="margin: 0; padding: 0;">Oven<li>	
			<li style="margin: 0; padding: 0;">Microwave<li>	
			<li style="margin: 0; padding: 0;">Dishwasher<li>		
		</ul>	
		</div>
	<div>
</body>

Candan · 06-28-2010, 04:12 AM

If you noticed how it still keeps the scrolling bar when you change the contains width to 200px, or even higher, you'll know its the float:right; doing it. I changed it to float:left; and it removed the scroll bar. If you want some space inbetween the 2 div's, add a margin-left:amount_of_pixels px; on the style.

Or instead of changing the float:right; to float:left; You could add a margin-right:25px; in the second div's style attribute.