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

    Horizontal scrolling div stretch to content

    Hi, I have an <ul> of images styled as display:inline

    Can I have the div they are in overflow:auto horizontally without setting a width?

    In other words stretch the div to fit a horizontal line of images instead of them breaking onto a new line?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi, I have an <ul> of images styled as display:inline

    Can I have the div they are in overflow:auto horizontally without setting a width?
    Please post your current code or a link to your page and explain the issue/requirement, rather than giving a puzzle in your thread.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello tomrshl,
    I've never been able to do it. The div with the scroll bar needs a width and the img container takes it's width from that, inless you specify otherwise.
    I have an example here: http://nopeople.com/CSS/scrollers/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-family: "Helvetica", "Arial", sans-serif;
    	font-size: 12px;
    }
    
    #container {
    	width: 100%;
    	height: 100%;
    }
    
    #main {
    	overflow: auto;
    	white-space:nowrap;
    	text-align: left;
    	position: absolute; top: 100px; left: 0; right: 0; bottom: 0;
    }
    
    #header {
    	height: 100px;
    	text-align: left;
    	position: fixed; top: 0px; left: 0;
    	width: 100%;
    }
    
    
    ul, li {
    	display: inline;
    }
    This is what I worked out, seems to work as I wanted.

    Thanks anyway


  •  

    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
    •