Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Thanked 3 Times in 3 Posts

    unwanted horizontal scrolling occuring

    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.
    	<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 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>		

  2. #2
    New Coder
    Join Date
    Jun 2010
    The Netherlands
    Thanked 6 Times in 6 Posts
    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.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts