Results 1 to 3 of 3
  1. #1

    Help with aligning some divs

    having a bit of trouble trying to get some divs to do what i want them to do, can anyone help me achieve it?


    here's an image of the way it is at the moment:
    http://img40.imageshack.us/img40/5181/examplediv.gif

    In the image, you can see four divs in a container div, all four are set to align: left. These four divs must use the same style (style2), and not seperate styles.

    What i want to do is make div 3 nudge up to where div 1 is, and not create a gap by following the end of div 2. I don't know what the correct code is, or if it's even possible to do, but if anyone knows, please help

    Here's the code for this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .style1 {border:1px solid #000000; width:620px; position:relative;
    }
    .style2 {border:1px solid #000000; width:300px; float:left;}
    -->
    </style>
    </head>
    
    <body>
    <div class="style1">
    
    	<div class="style2">box 1<br>
    	  <br>
    	  <br>
    	</div>
        <div class="style2">box 2<br>
          <br>
          <br>
          <br>
      </div>
    
    	<div class="style2">box 3<br>
    	  <br>
    	</div>
    	<div class="style2">box 4<br>
    	  <br>
    	  <br>
    	</div>
    </div>
    </body>
    </html>
    and i've attached the html file as well.
    Attached Files Attached Files
    Last edited by neologan; 09-09-2009 at 02:48 AM.

  2. #2
    Join Date
    Nov 2007
    Location
    So Cal, USA
    Posts
    296
    In order to do that you need to "float" them in your CSS so the block level elements stop locking in with one another.

    I'd recommend this tutorial so you can see the power of the float:
    http://css.maxdesign.com.au/floatutorial/
    Ariolander - Amateur Web Developer
    Anime, Manga,
    And Web Design A Haiku
    Of My Pastimes

  3. #3
    had a look through your link but didn't find anything that seemed to explain the problem. Float: left; is already on.

Similar Threads

  1. CSS aligning?
    By GPearce in forum Web Design and Content
    Replies: 7
    Last Post: 11-07-2007, 04:41 PM
  2. Need help with aligning table to top in IE
    By FirmbIT in forum Web Site Reviews
    Replies: 1
    Last Post: 08-12-2006, 02:51 AM
  3. Help with aligning on flash!
    By frostbite in forum Web Design and Content
    Replies: 1
    Last Post: 07-30-2005, 02:18 AM
  4. aligning 2 forms right next to each other
    By saghir69 in forum Web Design and Content
    Replies: 4
    Last Post: 01-18-2005, 08:57 AM
  5. Aligning horizontal DIVs
    By fischermx in forum Programming Discussion
    Replies: 1
    Last Post: 12-16-2004, 07:31 PM

Posting Permissions

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