SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrollbar with div

    Hi to all

    I want to make a list .To do so i am using div.I want that i use outer div and within it another div which can take max width as we provide the content in inner div but the outer div use scroll bar both horizontal and vertical to move the inner div which contain content .

    Currently i make a outer div with both horizontal and vertical scroll bar its working but the inner div width does not increase .i want that inner div hold all the content in width wise as much i provide to it .

    Is div width end on some max value or we can increase it ?

    Thanks in advance

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're not explaining your problem clearly. Rewrite your post with understandable English, and more details of what you want.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say "you want to make a list" do you mean an actual list? If so, you should be using a list, not a DIV for this job. But Alec's right. We need more information.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vicky12 View Post
    ... Is div width end on some max value or we can increase it ?
    Within limits an unset width can be extended by content beyond its container. E.g. like this:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    #outer {
    	margin: 0 auto;
    	width: 300px;
    	height: 100px;
    	overflow: scroll;
    }
    #inner {
    	float: left;              /* makes it wrap the floats inside */
    	margin-right: -1000em;    /* allows width extend to this limit beyond parent edge */
    }
    #inner div {
    	float: left;
    	border: 1px solid #000;
    	width: 100px;
    	height: 200px;
    	background: #f99;
    }
    </style>
    </head>
    <body>
    <div id="outer">
    	<div id="inner">
    		<div>Box 1</div>
    		<div>Box 2</div>
    		<div>Box 3</div>
    		<div>Box 4</div>
    		<div>Box 5</div>
    		<div>Box 6</div>
    		<div>Box 7</div>
    		<div>Box 8</div>
    	</div>
    </div>
    </body>
    </html>
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for reply.


Bookmarks

Posting Permissions

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