6 replies [Last post]
John650
Offline
newbie
Last seen: 11 years 6 weeks ago
Joined: 2009-08-02
Posts: 4
Points: 0

Hi,

This is my first post so hopefully it's inline with the rules and someone can help :thumbsup:

I've got a 3 column layout with a fixed left column. My problem is the 2 other column's are ordering incorrectly on screen. I think it may be something to do with my fixed left column.

Here's my code

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<style type="text/css">
<!--
body {
	background-image: url(images/background.png);
	background-repeat: repeat;
	background-attachment:fixed;
}
-->
</style></head>
 
<body>
 
 
   <div id="wrapper">
		 <div id="leftcolumn">
		       Menu
		 </div>
     	 <div id="header">
         </div>
		 <div id="content">Content
	       <p>&nbsp;</p>
	          <p>&nbsp;</p>
	          <p>&nbsp;</p>
	 	 </div>
         <div id="rightcolumn">
         </div>
		 <div id="footer">
     </div>
</div>
 
</body>
</html>

CSS

* { padding: 0; margin: 0; }
 
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 840px;
}
#leftcolumn { 
 color: #333;
 margin: 40px 0px 0px 0px;
 padding: 10px;
 height: 10000px;
 width: 200px;
 position:fixed;
 float: left;
}
#header { 
 float: right;
 background-image:url(images/header.png);
 background-repeat:no-repeat;
 margin: 40px 0px 0px 0px;
 height: 356px;
 width: 600px;
 display: inline;
 position: relative;
}
#content { 
 float: right;
 background-image:url(images/body1.png);
 background-repeat: repeat-y;
 margin: 0px 0px 0px 0px;
 height: 200px;
 width: 424px;
 display: inline;
 position: relative;
}
#rightcolumn { 
 float: right;
 background-image:url(images/body2.png);
 background-repeat:repeat-y;
 margin: 0px 0px 0px 0px;
 height: 200px;
 width: 176px;
 display: inline;
 position: relative;
}
#footer { 
 float: right;
 background-image:url(images/footer.png);
 background-repeat:no-repeat;
 margin: 0px 0px 40px 0px;
 height: 120px;
 width: 600px;
 display: inline;
 position: relative;
}

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:I've got a 3 column

Quote:

I've got a 3 column layout with a fixed left column. My problem is the 2 other column's are ordering incorrectly on screen. I think it may be something to do with my fixed left column.

It may have more to do with the fact you have floated content and rightcolumn "right" instead of left. Change that and see if it's better.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

John650
Offline
newbie
Last seen: 11 years 6 weeks ago
Joined: 2009-08-02
Posts: 4
Points: 0

Yeah I could float the

Yeah I could float the content and right column left and use a margin to clear the left column, would this be the correct way to code what I want to achieve?

Thanks for the help Smee.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ummm...no. Perhaps it would

Ummm...no. Perhaps it would be worthwhile checking out the 3 column floated layout at Max Design http://www.maxdesign.com.au/presentation/page_layouts/ - try the third section down "Selectutorial" I think that's what you're after, if not have a look around and try one of the others.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

John650
Offline
newbie
Last seen: 11 years 6 weeks ago
Joined: 2009-08-02
Posts: 4
Points: 0

Thanks Smee, but what I did

Thanks Smee, but what I did do was the wrap the 2 columns I wanted on the right in a container and floated it right and made the 2 columns inside float left which solved my problem.

But my next problem is getting the right column to 100% height to match the content column. I've tried making the column 100% but it doesn't seem to work, as well as making the content 100% and the containing div.

:shrug:

John650
Offline
newbie
Last seen: 11 years 6 weeks ago
Joined: 2009-08-02
Posts: 4
Points: 0

Ahh double post, sorry

Ahh double post, sorry

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Yes, that's one way of doing

Yes, that's one way of doing your columns.

As to the 100% height - it's covered in the "How to" forum or you can just put "equal columns" (without the quotes) in the Search bar at top right and pick one you like but the usual answer is Faux Columns. The link to that is in the How To forum as well, under something like "The Answer to 90% of Questions..."

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile