SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    general positioning principles

    I've read all sorts of tutorials and looked at examples for positioning in CSS. I have (I think) a good understanding of absolute, relative, fixed, static and float.

    My problem: I want to position three "blocks" of HTML. My page will be sectioned into two columns, the first block going in the left column and the other two blocks going in the right column. As content is added and removed from the blocks they can grow vertically, but they must remain in their respective columns.

    My requirements: Following the CSS design principle, I want to separate content from structure. As such, my content for these three blocks of HTML is contained in div tags. I want the creation of the columns to be completely defined in my stylesheet, and not have to introduce other div or span tags into my HTML. This way I can rearrange my blocks a year from now strictly by changing values in my stylesheet, and not being restricted to using two columns.

    My question: What is the general way to position these elements? Do I "float" them side-by-side and tweak their clear properties? Do I make them absolutely positioned, and if so, how do I do it without adding div tags in my HTML to simply define columns?

    Any help on this much talked-about topic would be useful! Thanks! Here's what I (ideally) want my HTML to look like:

    Code:
    <body>
    	<div id="Block1">
    		Block 1 content<br>
    		Block 1 content<br>
    	</div>
    
    	<div id="Block2">
    		Block 2 content<br>
    		Block 2 content<br>
    	</div>
    
    	<div id="Block3">
    		Block 3 content<br>
    		Block 3 content<br>
    	</div>
    </body>

  2. #2
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some Templates Available

    Have a look at the site:

    http://glish.com/css/ and click on any of the layouts listed in the right column. While you may want something slightly different, I have found in invaluable to study the templates offered up on that site. That site plus the CSS Sidebar from NS6.2 are all I have needed to create several CSS only designs for personal and professional use.

    Oh, and of course, this forum has been a ton of help too!

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://bluerobot.com/web/layouts/

    Is another good one.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's an excellent question, and one I'd love to hear the answer to (I'm doing my CSS layouts very much by trial-and-error at the moment, going with whatever works). There's a very good CSS mailing list which is populated by some of the leading CSS developers (Eric Meyer, Eric Costello from Glish etc) that might provide the answer. Subscription information here:

    http://two.pairlist.net/mailman/listinfo/css-discuss


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
  •