SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    side by side lists

    Hi,
    i am just having a bit of trouble getting 2 lists to sit side by side.
    I currently have a floated container div and into this i would put two more divs each containing the lists. when i've tried this the layout screws up so i'm wondering if there is another way around this???

    any help appreciated

    thanks
    janice

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the HTML and CSS? You can position lists several different ways but floating them would be what I would try first.

  3. #3
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Suwanee GA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are your divs far enough apart? If you divs are aligning one on top of the other, the borders/margin/padding may be overlapping (search box model) forcing the div down the page.

    For alignment critical items you might resort to a table OR start and stop your lists after one entry and control the height and spacing of the <dl><dt> and <dd> while floating the column two list inside the column 1 list.

    <div class="col1">
    <div class="col2"> //floated right
    <dl>
    <dd>item 1a </dd
    </dl>
    </div>
    <dl>
    <dd>item 1 </dd>
    </dl>
    </div>

    repeat for item 2 and item 2a
    etc....

  4. #4
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the quick reply.
    i have condensed the code so it's easier to read.
    i have a list of 12 items and i want themn to go side by side in the 'left' box.
    here's the code...

    <style type="text/css">
    #left{
    float: left;
    width: 373px;
    border-right: 1px solid #000066;
    }
    #middle{
    width: 180px;
    c
    padding-top: 90px;
    }
    #right{
    float: left;
    width: 373px;
    }
    </style>
    </head>

    <body>
    <div id="left"><h2>Easy Does It!</h2>
    <p>All circumstances considered...</p>
    <ul><li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    <br />
    </div><!--end left-->
    <div id="right">
    <h2>title</h2>
    <p>some text to go here</p>
    </div><!--end right-->
    <br clear="left" />
    </body>
    </html>

  5. #5
    SitePoint Zealot Deep13's Avatar
    Join Date
    Aug 2004
    Location
    India
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Janice,
    Try out this code..

    I think it should do the job...

    Code:
    <html>
    <head>
    <style>
    .list {
    			width: 300px;
             margin-bottom: 15px;
    			float: left;
    			margin-left: 5px;
    }
    
    .list li {
    	list-style-type: none;
    	text-align: center;
    	padding: 4px 0;
    	background: #CCCCCC;
    	margin-bottom: 5px;
    	height:17px;
    }
    </style>
    </head>
    <body>
    		<div class="list">
    		<ul>
    		<li>List 1 - Item 1</li>
    		<li>List 1 - Item 2</li>
    		</ul>
    		</div>
    		
    		<div class="list">
    		<ul>
    		<li>List 2 - Item 1</li>
    		<li>List 2 - Item 2</li>
    		</ul>
    		</div>
    
    </body>
    </html>

  6. #6
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    uk
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Deep13,

    yep that's got it, just a bit of tinkering required but the basic idea works.....thank you for that.


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
  •