6 replies [Last post]
mbz
Offline
Regular
Last seen: 15 years 44 weeks ago
Timezone: GMT-7
Joined: 2006-03-20
Posts: 13
Points: 0

I'm looking to accomplish a 3 column CSS design that I can nest within some other code.

The left column needs to be a fixed width of 10px.

The middle column needs to be variable width (filling in whatever is left over between the left and right columns).

The right column needs to be a fixed width of 20px.

I am having a very difficult time grasping the concept of CSS (and am a long time user of tables). Below is my example code that DOES NOT work for the above example:

.roobody_left{
	  top: 0;
	  left: 0;
	  z-index : 1;
	  width: 10px;
}
.roobody_right{
	  top: 0;
	  right: 0;
	  width: 20px;
	  z-index : 1;
}
.roobody {
	  	top: 0;
		right : 20px;
		z-index : 2;
		left : 10px;
}

<div>
<div class="roobody_leftcolumn">
	left column
</div>
<div class="roobody">

	main column

</div>
<div class="roobody_rightcolumn">
	right column
</div>
</div>

Where am I going wrong in this example? Thanks in advance for your help!!

MIKE

mbz
Offline
Regular
Last seen: 15 years 44 weeks ago
Timezone: GMT-7
Joined: 2006-03-20
Posts: 13
Points: 0

3 column CSS how-to?

Still does not work, however this is the current CSS code I am trying:

.roobody_left{
	position: absolute;
	top: 0;
	left: 0;
	z-index : 1;
	width: 10px;
}


.roobody_right{
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	z-index : 1;
}

.roobody {
	top: 0;
	right : 20px;
	left : 10px;
	margin-left: 10px;
	margin-right:20px;		
	z-index : 2;
}

Please ... HELP!! :roll:

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 13 years 36 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

3 column CSS how-to?

Well for a start I'm not sure why you have different z-index values, get rid of those.

When starting with CSS it's alot better to learn yourself than be told, especially when there is a LOT of info out there about 3 column designs. A quick google search or a search of this forum will find you an answer in less than 30 seconds. (I'm not trying to be awkward - I just know from experience, mainly thanks to this forum Laughing out loud)

www.nubornis.com
Web Development and E-commerce Solutions.

mbz
Offline
Regular
Last seen: 15 years 44 weeks ago
Timezone: GMT-7
Joined: 2006-03-20
Posts: 13
Points: 0

3 column CSS how-to?

:?

ro88o
ro88o's picture
Offline
Enthusiast
Manchester, UK
Last seen: 13 years 36 weeks ago
Manchester, UK
Joined: 2005-06-29
Posts: 202
Points: 0

3 column CSS how-to?

You've almost got it to be honest, just a couple of things to change...

Get rid of your z-index values, they're not needed here.

You give your central div left and right margin values which is right, this will make it fill the space in between. So the left and right positional values aren't needed.

I would use class="" rather than id="" which means you'll also need to change something in your CSS.

Lastly, you've named your roobody left and right divs differently in your CSS to your HTML.

www.nubornis.com
Web Development and E-commerce Solutions.

mbz
Offline
Regular
Last seen: 15 years 44 weeks ago
Timezone: GMT-7
Joined: 2006-03-20
Posts: 13
Points: 0

3 column CSS how-to?

Many thanks!!

Now, it seems that having the HEIGHT set to 100% is the only way for me to get the background-image to display on FF (and it then actually repeats 100% of the page which is bad) however on IE it works fine (even when I take away that HEIGHT). Any Ideas?

Note: The HEIGHT of this group of divs should be variable depending on the amount of content that is in it (I don't want to give it a pixel value).

See:
http://www.agentwebsuite.com/agentcenter/realtyroo2.html

My updated code is below:

.roobody_leftcolumn{
	position: absolute;
	left: 253px;
	width: 17px;
	background-image: url(images/brdr_body_left.gif);
	background-repeat: repeat-y;
	height: 100%;
}
/* only show for IE */
* html .roobody_leftcolumn
{
	left: 255px;
}

.roobody_rightcolumn{
	position: absolute;
	right: 13px;
	width: 15px;
	background-image: url(images/brdr_body_right2.gif);
	background-repeat: repeat-y;
	height: 100%;
}
/* only show for IE */
* html .roobody_rightcolumn
{
	right: 14px;
}

.roobody {
	margin-left: 17px;
	margin-right: 15px;			
}
.roobody p{
	margin: 0 10px;
}

<div>

	<div class="roobody_leftcolumn"></div>

	<div class="roobody_rightcolumn"></div>

	<div class="roobody">MAIL COLUMN</div>

</div>

Any ideas?? Shock

Thanks,
MIKE

mbz
Offline
Regular
Last seen: 15 years 44 weeks ago
Timezone: GMT-7
Joined: 2006-03-20
Posts: 13
Points: 0

3 column CSS how-to?

Okay, so I put some additional text into my MAIN BODY div and pulled it up in IE again ... bad news, IE is ignoring the 100% HEIGHT and FF is taking the 100% HEIGHT too literal.

Help!?! What to do??

See above post for more details...

Thanks,
MIKE