Log In · Register

 
 
 Closed TopicStart new topic
centering columns?
GunsNRachel
post Nov 13 2007, 08:41 PM
Post #1


Senior Member
*****

Group: Member
Posts: 339
Joined: Jul 2007
Member No: 545,047
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
post Nov 13 2007, 09:31 PM
Post #2


Senior Member
*****

Group: Member
Posts: 339
Joined: Jul 2007
Member No: 545,047
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
post Nov 13 2007, 09:36 PM
Post #3


Senior Member
*****

Group: Member
Posts: 339
Joined: Jul 2007
Member No: 545,047
Thanks. I tried that, but the right column still isn't going over to the right far enough?
 
GunsNRachel
post Nov 14 2007, 05:29 AM
Post #4


Senior Member
*****

Group: Member
Posts: 339
Joined: Jul 2007
Member No: 545,047
I just tried that it made it go all the way to the left
 
pandora
post Nov 14 2007, 06:21 AM
Post #5


i did your boyfriend
*******

Group: Official Designer
Posts: 7,138
Joined: Feb 2004
Member No: 4,071
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.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic