1 Replies - 519 Views - Last Post: 26 July 2008 - 09:26 PM

#1 jeffmc21  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 27-November 07

Two columns using CSS/HTML...having problems

Posted 26 July 2008 - 07:13 PM

I hate to even have to ask this, because I've accomplished this numerous times, but I can't seem to get it to work this time.

This is a snippet from a larger page I'm working on, but basically I'm just wanting these two "columns" to be side by side with the text on the left and the sub-menu on the right.

You can see the snippet at www.fortymarketing.net/test1.php.

Thank you guys in advance for your help!!

Is This A Good Question/Topic? 0
  • +

Replies To: Two columns using CSS/HTML...having problems

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1201
  • View blog
  • Posts: 7,309
  • Joined: 07-September 06

Re: Two columns using CSS/HTML...having problems

Posted 26 July 2008 - 09:26 PM

Normally they make you post some code but you posted a link and I checked out the source so we will count it as code posted (sort of).

Here is a basic layout that you can use for what you are talking about.

<style>
.holder{
  text-align: left;
  width: 740px;
  background: transparent;
  margin: auto;
  border: 1px solid #999;
}
.content{
  width: 580px;
  margin-right: 8px;
  background: #eee;
  float: left;
  padding: 2px;
}
.menu{
  width: 150px;
  background: lightblue;
  float: left;
  padding: 2px;
}
</style>

<center>
  <div class="holder">
	<div class="content">
	  The main page content will go here.
	</div>

	<div class="menu">
	  Menu stuff here
	</div>
  </div>
</center>


I have heard that the <center> tag has been taken out of standard HTML 1.1 (or something like that) but it will still work (in all browsers the same), just not validate as nicely.

<edit>
Here is a way to get it centered without the <center> tag:

<style>
body{
  margin: 0px;
  padding: 0px;
  text-align: center;
}
.holder{
  text-align: left;
  width: 740px;
  background: transparent;
  margin: auto;
  border: 1px solid #999;
}
.content{
  width: 580px;
  margin-right: 8px;
  background: #eee;
  float: left;
  padding: 2px;
}
.menu{
  width: 150px;
  background: lightblue;
  float: left;
  padding: 2px;
}
</style>


<div class="holder">
  <div class="content">
	The main page content will go here.
  </div>

  <div class="menu">
	Menu stuff here
  </div>
</div>

</edit>

NOTE - I have only tested these in IE 6.

Hope that helps.

This post has been edited by BetaWar: 26 July 2008 - 09:38 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1