Help Centering Two Columns

stlboi

02-01-2007, 02:36 AM

Hey guys, it's me.... again.

I know I need to correct my errors via validator which I plan to soon work on, but do you know how I can center these two columns (http://thebuffalonetwork.com/project-signarama/signarama.html), one red and one green into the middle to bring them together?

jivanstn

02-01-2007, 09:28 AM

Like this?

<html>
<body>

<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

ahallicks

02-01-2007, 09:32 AM

Or in CSS create a wrapper:

#wrapper {
width: 766px;
height: auto:
margin: 0 auto;
}

#leftcolumn {
width: 300px;
height: 500px;
float: left;
}

#rightcolumn {
width: 466px;
height: 500px;
float: left;
}

And your HTML:

<div id="wrapper">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
</div>

coothead

02-01-2007, 09:56 AM

Hi there stlboi,
I know I need to correct my errors via validator
Here is your page corrected and validated...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SW Valley Sign*A*Rama</title>
<base href="http://thebuffalonetwork.com/project-signarama/"/>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
color:#000;
background-color:#959595;
}
#container {
width:989px;
color:#fff;
background-color:#2e3192;
background-image:url(top.jpg);
margin:0 auto;
}
#header {
width:900px;
height:150px;
background-image:url(header1.jpg);
margin:0 auto;
}
#leftcolumn {
width:175px;
height:400px;
float:left;
display:inline;/*IE6 needs this*/
color:#00e;
background-color:#f00;
margin:1px 1px 1px 54px;
}
#rightcolumn {
width:664px;
height:360px;
padding:20px;
float:left;
display:inline;/*IE6 needs this*/
color:#000;
background-color:#008000;
text-align:center;
margin:1px;
}
#footer {
width:989px;
line-height:48px;
background-color:#2e3192;
background-image:url(footer.jpg);
text-align:center;
font-family:times,serif;
font-size:0.75em;
color:#fff;
clear:both;
}

a {
text-decoration:none;
}
</style>

</head>
<body>

<div id="container">

<div id="header"></div>

<div id="leftcolumn">

<img src="menu1.jpg" alt="" />

<ul style="list-style-type: none">
<li><a href="http://www.testlink.com/">Company A</a></li>
<li><a href="http://www.testlink.com/">Company B</a></li>
<li><a href="http://www.testlink.com/">Company C</a></li>
<li><a href="http://www.testlink.com/">Company D</a></li>
</ul>

<img src="menu2.jpg" alt="" />

<ul style="list-style-type: none">
<li><a href="http://www.testlink.com/">Banners</a></li>
<li><a href="http://www.testlink.com/">Real Estate Signs</a></li>
<li><a href="http://www.testlink.com/">Vehicle Graphics</a></li>
<li><a href="http://www.testlink.com/">Business Cards</a></li>
</ul>

<img src="menu3.jpg" alt="" />

<ul style="list-style-type: none">
<li><a href="http://www.testlink.com/">Shopping Cart: 0 Items</a></li>
<li><a href="http://www.testlink.com/">Grand Total: $0.00</a></li>
</ul>

</div> 

<div id="rightcolumn">

<p>Under Construction! 1/28/07</p>

<img src="http://thebuffalonetwork.com/project-signarama/store.jpg" alt=""/>

</div> 

<div id="footer">Copyright © 2007. All rights reserved.</div>

</div> 

</body>
</html>

coothead

Excavator

02-01-2007, 10:06 AM

You need to style #wrap in your CSS
You need to enter your left column first, THEN your right column.
Make your HTML read like this:
<div id="wrap">

<div id="leftcolumn">

<img src="http://thebuffalonetwork.com/project-signarama/menu1.jpg"><p>

<ul style="list-style-type: none">
<li><a href="http://www.testlink.com/">Company A</a></li>
<li><a href="http://www.testlink.com/">Company B</a></li>
<li><a href="http://www.testlink.com/">Company C</a></li>

<li><a href="http://www.testlink.com/">Company D</a></li>
</ul>

<img src="http://thebuffalonetwork.com/project-signarama/menu2.jpg"><p>

<ul style="list-style-type: none">
<li><a href="http://www.testlink.com/">Banners</a></li>
<li><a href="http://www.testlink.com/">Real Estate Signs</a></li>
<li><a href="http://www.testlink.com/">Vehicle Graphics</a></li>

<li><a href="http://www.testlink.com/">Business Cards</a></li>
</ul>

<img src="http://thebuffalonetwork.com/project-signarama/menu3.jpg"><p>

<ul style="list-style-type: none">
<li><a href="http://www.testlink.com/">Shopping Cart: 0 Items</a></li>
<li><a href="http://www.testlink.com/">Grand Total: $0.00</a></li>

</ul>

</div> 

<div id="rightcolumn">

<br>

<center> Under Construction! 1/28/07 </center><p>

<center> <img src="http://thebuffalonetwork.com/project-signarama/store.jpg"> </center>

</div>

</div> 

And make your CSS read like this:

* {
margin: 0;
padding: 0;
}

#wrap {
width: 900px;
margin: 0 auto;
overflow: hidden;
}

#rightcolumn {
width: 709px; /*adjust here if it still drops*/
height: 400px;
background-color: green;
margin: 1px 8px 0 183px;/*adjust left margin here if it still drops*/
}

#leftcolumn {
width: 175px;
height: 400px;
float: left;
background-color: red;
margin: 1px 0 0 8px;
}

#footer {
width: 989px;

And send a case of beer to Alaska - need my address?

stlboi

02-01-2007, 04:45 PM

Holy Moly I love this forum, thanks guys! And thanks Coothead for the validation, I will check it out.

coothead

02-01-2007, 04:58 PM

No problem, you're welcome. ;)