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)...
<!-- m --><a class="postlink" href="http://www.suspendedmoment.com/css/test.html">http://www.suspendedmoment.com/css/test.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.suspendedmoment.com/css/main.css">http://www.suspendedmoment.com/css/main.css</a><!-- m -->
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?!?!?
Thanks,
RichBasically, 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: <!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->
There's a couple useful CSS layout generators that you can look at and play with: <!-- m --><a class="postlink" href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtmlWhile">http://www.fu2k.org/alex/css/layouts/3C ... mhtmlWhile</a><!-- m --> 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.
Rich
<!-- m --><a class="postlink" href="http://www.suspendedmoment.com/css/test.html">http://www.suspendedmoment.com/css/test.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.suspendedmoment.com/css/main.css">http://www.suspendedmoment.com/css/main.css</a><!-- m -->
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?!?!?
Thanks,
RichBasically, 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: <!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->
There's a couple useful CSS layout generators that you can look at and play with: <!-- m --><a class="postlink" href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtmlWhile">http://www.fu2k.org/alex/css/layouts/3C ... mhtmlWhile</a><!-- m --> 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.
Rich