Results 1 to 3 of 3

Thread: Aligning DIV's beside one another within DIV, float?

  1. #1
    Join Date
    Feb 2005

    Aligning DIV's beside one another within DIV, float?

    I have had the toughest last couple of days trying to figure out how to align div tags, or any tags for that matter, beside one another rather than on a seperate line. I think I figured it out but I still have a couple of quetions. This is what I was trying to accomplish (see the right cell content)...


    To have the two Test blocks (Test 1 and Test 2) lay on the same line as they do now, do I have to float them both (which is what I ended up doing) or is there another way of doing it? From what I've understood, DIV tags are block level elements so if two DIVS are coded back to back then one will be on one line and the next will be right underneath it (unless positioned absolutely). Am I correct so far? If this is true then why can't I set the display property for each DIV to display:inline to make them inline elements that when coded back to back they appear on the same line rather than one under another? I've tried the latter approach to no avail since when it was attempted they didn't align correctly or appeared out of place compared to the other DIV and the text within it.

    Can someone help me understand?!?!?


  2. #2
    Join Date
    Aug 2004
    Basically, you float one DIV, and then the other DIV flows around it. If you want it to look like the floated column extends all the way down, you can create a content-wrapper with a right-margin or right-padding.

    EDIT: here's the generator I was actually thinking of: http://www.inknoise.com/experimental/layoutomatic.php

    There's a couple useful CSS layout generators that you can look at and play with: http://www.fu2k.org/alex/css/layouts...NN4_FMFM.mhtml
    Last edited by mikepurvis; 02-26-2005 at 12:23 PM.
    Homepage of Michael Purvis

  3. #3
    Join Date
    Feb 2005

    Re:content generators, etc

    While content generators are nice I would still like to understand it and code it myself. Though I did end up floating both the Test buttons (see link to page above) to have them appear side by side it ended up looking like crap in old versions of Netscape and IE. I appreciate the links though.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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