SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble trying to auto-align a list

    Here's a picture of what I'm trying to do. Right now I have two lists, the first one contains the top 3 boxes and the second one contains the bottom 3. I want to align it so box 4 would stay where it is but boxes 5 and 6 would jump up to underneath 2 and 3. If I try to put all 6 boxes in one list, it aligns box 4 under box 2, box 5 under box 3, and then box 6 under 4 (all still to the right of the big first box).



    Is doing this possible with just html and css? I don't want to have to dive into js.

  2. #2
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,161
    Mentioned
    152 Post(s)
    Tagged
    0 Thread(s)
    Can you fix the broken image (nm, corporate web blocker is blocking it from you, your image url is likely valid) in your post and maybe post your HTML output and CSS in http://jsfiddle.net so we can see it?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sixers2329 View Post

    Is doing this possible with just html and css? I don't want to have to dive into js.
    No its not possible with CSS alone I'm afraid (using your current structure) unless you add negative top margins to the two last list items and drag them back up. There is no automatic way to do it. Once you add a "clear" to the floated element then all the other elements start level with that cleared element.

    You could do it if items 1 and 4 were in a floated column of their own and then items 2,3,5,6 were in a separate floated column.

  4. #4
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok I solved it. I made 3 separate lists, one for each column. Each element's width doesn't change only its height so the first list contains 1 and 4, the second 2 and 5, and the third 3 and 6. Float each of them left and boom. Thanks.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sixers2329 View Post
    Ah ok I solved it. I made 3 separate lists, one for each column. Each element's width doesn't change only its height so the first list contains 1 and 4, the second 2 and 5, and the third 3 and 6. Float each of them left and boom. Thanks.
    Yes that's the best way to do it as you can't really float multiple elements left and right and let them form columns without gaps.

    Just for interests sake here is a method that does what you asked for using the original structure but is too convoluted for real use.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap { width:616px; }
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    li {
    	width:200px;
    	background:green;
    	border:1px solid gold;
    	float:left;
    }
    li:first-child { clear:left }
    ul+ul li {
    	display:inline-block;
    	float:none;
    	margin-right:-4px;
    }
    ul+ul li:first-child { float:left;margin:0; }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<ul>
    				<li>1 test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li>
    				<li>2 test test </li>
    				<li>3 test test </li>
    		</ul>
    		<ul>
    				<li>4 test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </li>
    				<li>5 test test </li>
    				<li>6 test test </li>
    		</ul>
    </div>
    </body>
    </html>
    I should have saved it for a quiz


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
  •