SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: div alignment

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Location
    FL
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div alignment

    I am converting a page that was designed in tables to use as least html as possible and to change the order of the code. I currently am using 3 divs (header, sidebar, content) with CSS positioning. If I use absolute positioning, I can align them how I want. However, I need to center all three of them when viewed in the browser - no matter what screen resolution is used.

    I need the content div to come before the head & sidebar divs in the code. Can anyone offer any suggestions on how I can rearrange the code and get the divs to center?

    Should I put the three areas each in their own table (as needed for the layout of the content) and then align the three tables on the page through css positioning?
    Last edited by gschnoor; May 24, 2003 at 13:12.

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess you don't mean like this... anyway, here's some code
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    	<head>
    		<title>Title</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    		<style type="text/css">
    			#h
    			{
    				position: absolute;
    				left: 20%;
    				top: 20%;
    				width: 60%;
    				height: 10%;
    				background-color: #ff0000;
    			}
    			#l
    			{
    				position: absolute;
    				left: 20%;
    				top: 30%;
    				width: 20%;
    				height: 50%;
    				background-color: #00ff00;
    			}
    			#c
    			{
    				position: absolute;
    				left: 40%;
    				top: 30%;
    				width: 40%;
    				height: 50%;
    				background-color: #0000ff;
    			}
    		
    		</style>
    	</head>
    	<body>
    		<div id="h">
    			Header
    		</div>
    		<div id="l">
    			Left
    		</div>
    		<div id="c">
    			Content
    		</div>
    	</body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    May 2003
    Location
    London
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't exactly make sense to me 100%. but here's how to centre everything using CSS (i think that's what you want to do)


    Code:
    body(text-align:center)
    can you try to explain again what you want to do ?

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gschnoor, for tutorials and templates for 'header + two column' css layouts...

    http://www.bluerobot.com/web/layouts/
    http://glish.com/css/
    http://www.thenoodleincident.com/tut...son/boxes.html


    Don't use tables. There's simply really no need to use them for that kind of purpose any more.

    ---

    Jofa, one small point...

    In CSS2(.1) identifiers (names, class names and id) cannot start with either a hyphen or a numeral.
    This should be reflected in your choice of names, class names and id in your source markup.

    Just a wee 'heads up'.

    ---

    Benji, for what it's worth, the text-align method is only a kuldgey workaround to account for IE(Win)'s failure to support the correct technique...

    Code:
    margin: auto;
    For more info on combining the correct method and the text-align workaround:
    http://bluerobot.com/web/css/center1.html
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    In CSS2(.1) identifiers (names, class names and id) cannot start with either a hyphen or a numeral...
    It's an "l", not "1"

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, hush my filthy mouth.

    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    well, hush my filthy mouth.
    But you have a point... good rule; don't use letters like l 1 0 O etc in IDs


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
  •