SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Centering Page

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Page

    I'm having trouble getting a page to work using CSS... so I decided to create a "simple" page in order to recognize the problem easier. Unfortunately, it's not going very well either.

    I'm trying to create a centered page with 3 vertical columns, all columns will vary in height. Also, all columns will start from the same position in relation to the top of the page.

    I've tried relative/absolute positioning, but I can't figure out how do it so it looks right at different monitor resolutions. Also, if I use relative positioning (see example below) the alignment of the columns is messed up (see attached image). If I use absolute positioning, the blocks are positioned in relation to the side of the browser window, not the side of #page (which is what I want)

    Here's the HTML file:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    	<link rel="stylesheet" type="text/css" href="layout.css" media="screen">
    </HEAD>
    <BODY>
    
    <div id="page">
    
    <div id="panel">
    This is the panel<BR><BR>
    </div>
    
    <div id="content">
    This is the page content<BR><BR>
    </div>
    
    <div id="side">
    This is the side<BR><BR>
    </div>
    
    </div>
    
    
    </BODY>
    </HTML>
    And the CSS file...

    Code:
    #page {
    	width: 600px;
    	background: black;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #panel {
    	background: yellow;
    	width: 100px;
    	position: relative;
    	left: 0px;
    }
    
    #content {
    	background: lightblue;
    	width: 350px;
    	position: relative;
    	left: 110px;
    }
    
    #side {
    	background: red;
    	width: 130px;
    	position: relative;
    	left: 470px;
    }
    See the attached file to see the problem with the current code, and how I want the final product to look.

    So does anyone have any ideas?

    Thanks,
    Peter
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Divs are positioned beneath each other in the normal document flow. In order to position them side by side, I believe you need to use the float property or absolute positioning. However, as you mentioned, absolute positioning won't work for your application unless you use some messy JavaScript. However, I'm not the person to ask about using float, since I'm having lots of problems floating my divs.

    Before you go any further you should read this:
    http://www.brainjar.com/css/positioning/default.asp

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually read that tutorial yesterday. But isn't the float property just for aligning something left or right? I didn't think that you could position something by pixels using it.

    Peter

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks audiolizard! I managed to get it working

  6. #6
    SitePoint Guru Marc's Avatar
    Join Date
    Nov 2000
    Location
    New York
    Posts
    765
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't mind explaining, what exactly did you change to get it working? I've been trying to solve this problem now since you posted it and I can't
    Marc Gugliuzza
    marc.gugliuzza.com



  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what the CSS file should look like:

    Code:
    #page {
    	width: 600px;
    	background: black;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #panel {
    	background: yellow;
    	width: 100px;
    	float: left;
    	margin-right: 10px;
    }
    
    #content {
    	background: lightblue;
    	width: 350px;
    	float: left;
    	margin-right: 10px;
    }
    
    #side {
    	background: red;
    	width: 130px;
    	float: left;
    }


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
  •