Forums > centering columns?

GunsNRachel

Nov 13 2007, 08:41 PM

How the heck do I do that?

Here's my code right now:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta name="verify-v1" content="BkZIfwxpV67xmyZnK3mB2RM8sFqn3UGCNjaimkZbAzw=" /></head>
<head>
<title>Take Me Away Layouts - Version 1.0</title>
<style type="text/css">
body {
background:Url("http://i10.tinypic.com/8alfrcl.gif");
background-repeat: repeat;
margin: 0px 0;
font-family: trebuchet ms, sans serif;
font-size: 12px;
color: #fff;
text-align: justify;
line-height: 11px;
}


#image {
margin-left: 10% 
width: 800px;
margin: 0 auto;
padding: 0px;
}

#navigation {
margin: 0 auto; 
text-align: center;
width: 250px;
margin-top: 10px;
background-color: #2C2C27;
padding: 5px;
float: left;
}

#content {
margin: 0 auto; 
text-align: center;
width: 500px;
margin-top: 5px;
background-color: #2C2C27;
padding: 5px;
}

#footer {
clear: both;
}

b, strong {
color: #D43222;
} 


i {
color: #D43222;
}


s {
color: #D43222;
}


u {
color: #D43222; 
}


td, tr
{
color: white;
font-family: arial;
font-size: 12px;
line-height: 13px;
}

a:link, a:visited, a:active
{font: 12px arial;
color: white;
font-weight:normal;
text-decoration: none;
border-bottom: 0px dashed #000;
line-height: 13px;}

a:hover
{font: 12px arial;
color: white;
font-weight:normal;
text-decoration: none;
border-bottom: 0px dashed #D5D4C3;
line-height: 13px;}

h1 {
color: black;

font-size: 16px;
line-height: 16px;
font-weight: normal;
background-color: white;
letter-spacing:0px;
font-family: arial;
text-transform: uppercase;
text-align: left;
text-transform: none;
text-transform: uppercase;
}


</style>
</head> 
<body> 
<div id="image"><center>
<img src="http://i19.tinypic.com/6sqyz5z.png" alt="site name" />
</center>
</div>

<div id="navigation">
<h1>Navigation</h1>
<p><a href="http://takemeawaylayouts.bravehost.com/index.html">Home</a><br>
<a href="http://takemeawaylayouts.bravehost.com/aboutme.html">About Me</a><br>
<a href="http://takemeawaylayouts.bravehost.com/aboutthesite.html">About the Site</a><br>
<a href="http://takemeawaylayouts.bravehost.com/layouts.html">Layouts</a><br></p>

<h1>Contact Me</h1>
<p>Email: take_me_away_layouts@yahoo.com<br>
<a href="http://pub27.bravenet.com/guestbook/2300572516/">Guest Book</a></p>

<h1>Credit</h1>
<p>Layout by: <a href="www.takemeawaylayouts.bravehost.com">Rachel</a><br>
Pictures by: <a href="http://zemotion.deviantart.com/">'zemotion</a></p>
</div>


<div id="content">
<h1>11/13/2007</h1>
<p>I'll be adding default myspace layouts and div myspace layouts tonight. Yippppie =P. Also, I'll be making some support banners/buttons. Since.. well.. ya know, this isn't very popular yet. Hahah
<br><br>
</p>

<h1>11/10/2007</h1>
<p>I'm going to be gone today and most of tomorrow so my plans of putting my divs and default layouts up here and pretty much.. well.. not gonna work out. I'll try and get them up here tomorrow, but I can't promise anything =( Sorry guys. I'm not really sure what else to put up here. Sign my guestbook and tell me what you want to see/see more of on here.</p>

<h1>11/9/2007</h1>
<p>So I finally got a decent layout for this. And I have a few myspace layouts up now. Craaazy. I thought for sure I was going to give up on this already. WOHOO.<br><br>

Also, today is me and my boyfriends 9 month anniversary =)</p>
</div>


</html>
 

and what it looks like: click

GunsNRachel

Nov 13 2007, 09:31 PM

well i got it so the left column is centered in all resolutions, but the right one is doing something funky. any ideas as to what might be causing that?

GunsNRachel

Nov 13 2007, 09:36 PM

Thanks. I tried that, but the right column still isn't going over to the right far enough?

GunsNRachel

Nov 14 2007, 05:29 AM

I just tried that it made it go all the way to the left

pandora

Nov 14 2007, 06:21 AM

first of all, you didnt close the width in div#image, so that may have had something to do with it.

second, both columns should float.

third, enclosing the whole thing in a 800px div always helps to define limits. in this case, i just took the end tag of your #image div and put it at the very end.

try this.

CODE

<html>

    <head>

        <meta name="verify-v1" content="BkZIfwxpV67xmyZnK3mB2RM8sFqn3UGCNjaimkZbAzw=" />

        <title>Take Me Away Layouts - Version 1.0</title>

        <style type="text/css">
            body {
                background:Url("http://i10.tinypic.com/8alfrcl.gif");
                background-repeat: repeat;
                margin: 0px 0;
                font-family: trebuchet ms, sans serif;
                font-size: 12px;
                color: #fff;
                text-align: justify;
                line-height: 11px;
                }


            #image {
                margin-left: 10%;
                height: 400px;
                width: 800px;
                margin: 0 auto;
                padding: 0px;
                }

            #navigation {
                margin: 0 auto;
                text-align: center;
                width: 250px;
                margin-top: 10px;
                background-color: #2C2C27;
                padding: 5px;
                float: left;
                }

            #content {
                margin: 0 auto;
                text-align: center;
                width: 500px;
                float: right;
                margin-top: 5px;
                background-color: #2C2C27;
                padding: 5px;
                }

            #footer {
                clear: both;
                }

            b, strong {
                color: #D43222;
                }


            i {
                color: #D43222;
                }


            s {
                color: #D43222;
                }


            u {
                color: #D43222;
                }


            td, tr {
                color: white;
                font-family: arial;
                font-size: 12px;
                line-height: 13px;
                }

            a:link, a:visited, a:active {
                font: 12px arial;
                color: white;
                font-weight:normal;
                text-decoration: none;
                border-bottom: 0px dashed #000;
                line-height: 13px;
                }

            a:hover {
                font: 12px arial;
                color: white;
                font-weight:normal;
                text-decoration: none;
                border-bottom: 0px dashed #D5D4C3;
                line-height: 13px;
                }

            h1 {
                color: black;
                font-size: 16px;
                line-height: 16px;
                font-weight: normal;
                background-color: white;
                letter-spacing:0px;
                font-family: arial;
                text-transform: uppercase;
                text-align: left;
                text-transform: none;
                text-transform: uppercase;
                }


        </style>
    </head>

    <body>
        <div id="image">
            <center>
                <img src="http://i19.tinypic.com/6sqyz5z.png" alt="site name" />
            </center>

            <div id="navigation">
                <h1>Navigation</h1>

                    <p>
                        <a href="http://takemeawaylayouts.bravehost.com/index.html">Home</a><br>
                        <a href="http://takemeawaylayouts.bravehost.com/aboutme.html">About Me</a><br>
                        <a href="http://takemeawaylayouts.bravehost.com/aboutthesite.html">About the Site</a><br>
                        <a href="http://takemeawaylayouts.bravehost.com/layouts.html">Layouts</a><br>
                    </p>

                <h1>Contact Me</h1>

                    <p>
                        Email: take_me_away_layouts@yahoo.com
                        <br>
                        <a href="http://pub27.bravenet.com/guestbook/2300572516/">Guest Book</a>
                    </p>

                <h1>Credit</h1>
                    <p>
                        Layout by: <a href="www.takemeawaylayouts.bravehost.com">Rachel</a>
                        <br>
                        Pictures by: <a href="http://zemotion.deviantart.com/">'zemotion</a>
                    </p>
            </div>


            <div id="content">

            <h1>11/13/2007</h1>

                <p>
                    I'll be adding default myspace layouts and div myspace layouts tonight. Yippppie =P. Also, I'll be making some support banners/buttons. Since.. well.. ya know, this isn't very popular yet. Hahah
                    <br><br>
                </p>

            <h1>11/10/2007</h1>

                <p>
                    I'm going to be gone today and most of tomorrow so my plans of putting my divs and default layouts up here and pretty much.. well.. not gonna work out.
                    I'll try and get them up here tomorrow, but I can't promise anything =( Sorry guys. I'm not really sure what else to put up here. Sign my guestbook and tell me what you want to see/see more of on here.
                </p>

            <h1>11/9/2007</h1>
                <p>
                    So I finally got a decent layout for this. And I have a few myspace layouts up now. Craaazy. I thought for sure I was going to give up on this already. WOHOO.
                    <br><br>

                    Also, today is me and my boyfriends 9 month anniversary =)
                </p>

            </div>

        </div>
    </body>
</html>

edit:// i took the liberty of cleaning it all up for you. it was irritating for me to look at it; no offense.