Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Location
    NY, USA
    Posts
    132
    Thanks
    1
    Thanked 1 Time in 1 Post

    Centering content

    Hi,

    I have a two column layout, and I'm trying to get the content box and the right column on the same line, which I was able to do. But on 1027 x 768 resolution, both columns shift all the way to the left of the page. How do I center these two columns? By the way, is there anything I can do to make the CSS cleaner, and am I doing the layout correctly? The css is in the same document as the html so it is easy to see.

    Please check it out at: http://gamescool.com/SHS/index_2.html

    Thanks for your help,
    ~David
    Last edited by cooleo100d; 02-10-2005 at 04:19 AM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts

  • #3
    Banned
    Join Date
    Dec 2004
    Location
    FL
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hey

    i'd suggest using dreamweaver mx 2004, free 30 day trial at macromedia.com. you can customly align everything on there

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Location
    NY, USA
    Posts
    132
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hi,

    I tried the margin: 0 auto, and text-align: middle on the body tag method and it doesn't seem to work.

    Is there anything else I can do?

    Thanks,
    ~David

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, you can't use it on the <body> tag because the body is the whole document. See, everything that's in a block level element, like a <div> or a <h1> or a <ul> has space, padding, and margin. So let's say the body is something like 800px wide (the width of your browser screen, let's say). And you have a div that's 600px wide. If you give the div some margin:

    div {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    }

    The browser will give the div no margins at the top and bottom, but give a 100px margin on the left and right-- because the margins are the same, it centers the "box." See how that works? An easier way to write the above code is:

    div {
    margin: 0 auto;
    }

    The first value is the top and bottom value and the second is the left and right. So to center everything on the page, wrap all your divs in a big container div and apply margins to that:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Example</title>
    <style type="text/css">
    	#wrapper {
    		margin: 0 auto;
    		width: 600px;
    		height: 500px;
    		background: #eee;
    		border: solid 1px #ccc;
    		position: relative;
    		}
    	
    	#left	{
    		width: 200px;
    		height: 478px;
    		margin: 10px;
    		background: #fff;
    		border: solid 1px #ccc;
    		position: absolute;
    		left: 0;
    		}
    	
    	#right	{
    		width: 365px;
    		height: 478px;
    		margin: 10px;
    		background: #fff;
    		border: solid 1px #ccc;
    		position: absolute;
    		right: 0;
    		}
    </style>
    
    <body>
    	<div id="wrapper">
    		<div id="left">inside the wrapper</div>
    		<div id="right">also inside the wrapper</div>
    	</div>
    </body>
    </html>
    Copy and paste this code into your browser and you'll see what I mean. Hope it helps,

  • #6
    New Coder
    Join Date
    Dec 2004
    Location
    Colombo, Sri Lanka | S.E. Asia
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can use this same concept:
    http://koobi-studio.com/gf/centerThis.htm


    Hope it helps.
    <@Bane>Go on baby, be kinky and talk to me in PHP.

    root@koobi:~ # I recommend all my clients to MBSHost
    root@koobi:~ # PHP Scripts I'm working on
    root@koobi:~ # I have a blog now?


  •  

    Posting Permissions

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