2 columns problem

**Gazelle** · Sep 13, 2004 18:30

I am getting better at all thing css but i currently have a problme which I cant solve. This is what I want

I have a 660px wide container called #content. I want this split into 2 sections: #top and #bot.

#top has 2 sections of its own. #top_left and #top_right which I both want to be 330px in size with a 1 px grey line runing verticaly between them. They are side by side. Both #top_left and #top_right have a left and right margin of 10px.

Between #top and #bot there should be a 1px horzontal line grey in colour. This should form an upside down T with the verticle line between #yop_left and #top_right.

The idea is that no matter how big #top_left and top_right is there section in comparsion stay the same size.

I just cant get this to work any help would be great.

HTML Code:

<div id="content">
		<div id="top">
			<div id="top_left">top left</div>
			<div id="top_right">top right</div>
		</div><!-- end top -->
		<div id="bot">bottom</div><!-- end bot -->
	</div><!-- end content -->

**Gazelle** · Sep 14, 2004 08:54

OK got it working kind of by using some background images for the grey lines. But in firefox there is a a 1px line missing on the blue navigation bar thing. Any ideas?

heres the site and hers is the code

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My site</title></title>
<style type="text/css">
<!--
body {
	background-color: #EEE;
	font-family: "Times New Roman", Times, serif;
	color: #000;
}
#container {
	width: 700px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
}
#nav {
	background-color: #006;
	visibility: visible;
	width: 700px;
}
#nav ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
}
#nav ul li {
	padding: 3px 15px;
	list-style: none;
	display: inline;
}
#nav a {
	color: #FFF;
	text-decoration:none;
	font-weight: bold;
}
#nav a:hover {
	color: #D42B1D;
}
#content {
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	width:	660px;
}
#top {
	visibility: visible;
	width: 660px;
	background-image: url(images/bk.png);
	background-repeat: repeat-y;
}
#bot {
	visibility: visible;
	width: 660px;
	background-image: url(images/bot.png);
	background-repeat: repeat-x;
}
#top_left {
	width:229;
	float: left;
	margin:0px;
}
#top_right {
	width: 330;
	float: right;
	margin:0px;
}
.clearer{
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
-->
</style>
</head>

<body>
<div id="container">
	<div id="nav">
		<ul>
			<li><a href="schedule.html">Schedule</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="committee.html">Committee</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</div><!-- end nav -->
	<div id="content">
		<div id="top">
			<div id="top_left">
			  <p>top lef</p>
			  <p>this is a teast it should work </p>
			</div>
			<div id="top_right">top right</div>
			<div class="clearer"></div>
		</div><!-- end top -->
		<div id="bot">bottom</div><!-- end bot -->
	</div><!-- end content -->
</div><!-- end container -->
</body>
</html>

**Gazelle** · Sep 14, 2004 08:58

also i cant seem to get #top_right to align to the left?

**Gazelle** · Sep 14, 2004 09:04

I take it back it doesnt work when you increasse the contentto more than a few words. Any ideas? At least the lines are in the right place :-)

**Gazelle** · Sep 15, 2004 13:48

Erm still not luck, any ideas?

**Paul O'B** · Sep 15, 2004 17:01

Hi

Sorry I missed the thread

Your link wasn't working so I couldn't see what you'd already got. If I understand you correctly then it sounds as though you are going the right way about it.

Just float a container left and a container right. These should both be inside the same parent container. Repeat the background image down down the centre of the outer container to get your everlasting border.

Put a border bottom on the outer container and include a clearing div before the closing div of the outer. Thats about all there is to it.

Paul

**Paul O'B** · Sep 15, 2004 17:38

Hi,

Here's your code altered a bit.

Replace the bg image with an image of your own.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My site</title></title>
<style type="text/css">
<!--
body {
 background-color: #EEE;
 font-family: "Times New Roman", Times, serif;
 color: #000;
}
#container {
 width: 700px;
 margin: 0px;
 margin-left: auto;
 margin-right: auto;
 background-color: #FFF;
}
ul#nav  {
 background-color: #006;
 width: 700px;
 margin: 0;
 padding: 0;
}
ul#nav li {
 padding: 3px 15px;
 list-style: none;
 display: inline;
}
#nav a {
 color: #FFF;
 text-decoration:none;
 font-weight: bold;
}
#nav a:hover {color: #D42B1D;}
#content {
 margin:1px 0px;
 margin-left: auto;
 margin-right: auto;
 width: 660px;
 background:url(images/vertical.jpg) repeat-y center center;
 border-bottom:1px solid #000;
}
* html #content {margin-top:0}/*fix margin*/
#bot {width: 660px;margin:auto}
#top_left {
 width:229px;
 float: left;
 margin:0px;
}
#top_right {
 width:229px;
 float: right;
 margin:0px;
}
.clearer{
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
div>p {margin-top:0}
-->
</style>
</head>
<body>
<div id="container"> 
	<ul id="nav">
	  <li><a href="schedule.html">Schedule </a></li>
	  <li><a href="about.html">About </a></li>
	  <li><a href="committee.html">Committee </a></li>
	  <li><a href="contact.html">Contact </a></li>
	<br />
 </ul>
  <div id="content"> 
	  <div id="top_left"> 
		<p>top left</p>
		<p>this is a test it should work </p>
	  </div>
	  <div id="top_right">top right</div>
	  <div class="clearer"></div>
  </div>
  <!-- end content -->
  <div id="bot">bottom</div>
  <!-- end bot -->
</div>
<!-- end container -->
</body>
</html>

I don't know why moz moves the floats up one pixel so I just moved them down with brute force.

Hope that helps anyway.

Paul

**Gazelle** · Sep 16, 2004 00:54

Thankyou very much, implemented it and it theres no problems, will study the code later to see what ou change. Good work!

User Tag List

Thread: 2 columns problem

Thread Tools

Display

2 columns problem

Bookmarks

Bookmarks

Posting Permissions