very difficult layout

**astagl** · 02-13-2008, 11:08 PM

I'm going a bit mad trying to make this layout work for me, so I'm finally asking for help (I hate asking).

The layout I'm looking to accomplish is 3-column, non-liquid, centered... but here's the kicker. The left and right columns should not scroll, just the center content.

Here's what I have so far:

CSS:

Code:

body{
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	font-size:12px;
	color: #363F77; 
	margin:0;
	padding:0;
	line-height: 1.5em;
	background: #fff url(images/body_bg5.jpg) no-repeat top center; 
	background-attachment: fixed;
}

/* The hack for IE6 */
* html div#fixmeIE {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);
}

/* For everyone else */
#fixme {
position: fixed;
top:0;
left:0;
}


#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#contentwrapper{
float: left;
width: 100%;
}

/* the middle column */
#contentcolumn{
margin: 180px 270px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
}

#rightcolumn{
float: left;
margin-top: 180px;
width: 270px; /*Width of right column*/
margin-left: -270px; /*Set left margin to -(RightColumnWidth)*/
}

#footer{
clear: left;
width: 100%;
color: #FFF;
text-align: center;
padding: 4px 0;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

the HTML:

Code:

<body>
<div id="maincontainer">
	<div id="contentwrapper">
		<div id="contentcolumn">
			<div class="innertube">
			middle
		        </div>
		</div>
	</div>

	<div id="leftcolumn">
		<div id="<?=$fixedstyle?>">
		left
		</div>
	</div>
	
	<div id="rightcolumn">
		<div id="<?=$fixedstyle?>">
			<div class="innertube">
			right
			</div>
		</div>
	</div>
	
	<div id="footer">&nbsp;</div>

</div>
</body>

There's a demo of this page here. If you view it in IE6, things seem to work, but all other browsers barf. Anyone have a helpful tip for me? I would really appreciate it!

**Kem** · 02-20-2008, 10:24 AM

(My English very bad)
I have just studied CSS. Please find the following code which i wrote for my website:
CSS:

Code:

.Content
{
	width:742px;	
	margin-left:auto;
	margin-right:auto;
	
}

.col_L
{
	width:212px;
	float:left;
	background-color:#999933;
	margin-top:1px;
}
.col_R
{
	width:519px;
	float:right;
	clear:right;
	margin-top:2px;
}
.title_SX_QT1
{
	width:259px;
	background-color:#87ae17;
	float:left;
}
.title_KH_QT1
{
	width:259px;
	float:right;
	background-color:#6699FF;
}

CODE

Code:

<body>
			<div class="Content">
			<div class="col_L">
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			</div>
			<div class="col_R">
				
					<div class="title_SX_QT1">
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					</div>
					<div class="title_KH_QT1">
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					  <p>&nbsp;</p>
					</div>
				
			</div>
		</div>
				
</body>

Please tell me it wrong or right? Thanks!

**boogyman** · 02-20-2008, 02:21 PM

non-liquid centered center scrolling content?
this is how i would accomplish that... sorry to Kem if this is what you were suggesting

HTML Code:

<body>
<div id="container">
     <div id="left"></div>
     <div id="middle"></div>
     <div id="right"></div>
</div>
</body>

Code:

body {
     margin: 0 auto;
     width: Xpx;
     text-align: center;
}
div#container {
     text-align: left;
}
div#left {
     float: left;
     width: Xpx;
     Edit: position: fixed;
}
div#right {
     float: right;
     width: Xpx;
     Edit: position: fixed;
}
div#middle {
     margin-left: Nlpx;
     margin-right: Nrpx;
     width: Xpx;
}

where
X = your width declaration
Nl = width of the left column + some gutter space (IE6 / below)
Nr = width of the right column + some gutter space (IE6 / below)

notice that the main body content is being declared last in the CSS? this is how to declare a 3 column layout in css... if you put it first or in between the elements, it will not render properly across all platforms / browsers.

It will also most likely take you a little while to get the margin gutters correct, and yes it will look slightly different between IE7 and IE6/below because Microsoft "upgraded" for lack of a better word their rendering engine.

the last bit is the body / container declaration... that is a technique to make sure your page is centered. you apply the centering to the entire body, but than apply the left alignment to the container (which will get inherited in all of your elements, because they are within that container element)

if you are choosing to include a footer, or something below those three columns declare that below the middle css style, and apply a clear:both; style to the element, or you will see it rendering "broken" across certain browsers

**astagl** · 02-20-2008, 07:27 PM

Boogy,

I think you are close, but something wasn't right. Did you mean for those position:static to be position:fixed?

When I use that, it's close, but still doesn't work as far as setting the left and right columns into place. Please check it here:
test

Maybe I goofed, but when I copied your code, everything was scrolling instead of the middle column.

**boogyman** · 02-20-2008, 09:49 PM

you cannot have your body and all 3 elements be the same width and expect a 3 column page.

Your body width is how wide you want the entire page/site to look
left width is how wide you want the left column
right width is how wide you want the right column
middle width is how wide you want the main body column

Edit: begin addition

I will try to explain this in other terms... this may not be the best analogy, however it works
Put your hands down at your sides, and get someone to measure the width from your outer left arm to your outer right arm, around the point of your elbows.
now have that same person measure the width from your outer arm to your inner arm on both sides
now have the same person measure the width of your torso (body)
Add those three numbers up and you should have the same number as his/her first measurement.
Since it is very unlikely your arms are the width of your torso, you will see three distinct "sections", and each section is a combination of bones and other various body parts. so each of those sections is really a wrapper in itself.

so if i get back to computer land writing my initial code

Code:

<body>
<div id="container">
     <div id="left"></div>
     <div id="middle"></div>
     <div id="right"></div>
</div>
</body>

and apply the moral of my analogy you come up with

Code:

<body>
<div id="container">
     <div id="left">
          <div>Content</div>
          <div>other content</div>
          <p>Stuff</p>
     </div>

     <div id="middle">
          <div>middle stuff</div>
          <div>
                 <h2>some heading</h2>
                 <p>Some text</p>
                 <p>other text</p>
          </div>
     </div>

     <div id="right">
          <div>Content</div>
          <div>other content</div>
          <p>Stuff</p>
     </div>
</div>
</body>

you see that you are really only using the 4 major body elements container,left,right,middle as placeholders for the content in their section, sort of like you do in the analogy
left/right - bicep/tricep/tendon/joints/ligaments
middle - chest/heart/lung/ribs

Edit: end addition

middle column left margin MUST be at least (left width)
middle column right margin MUST be at least (right width)
if you make the margins of the middle be exactly the width of the left/right columns, as i said in my initial post you will see that the middle column will drop below those two elements because of browser rendering defaults. My suggestion is to do a little bit of math, and allow for approximately 6% gutter on either side of the main column to allow for browser rendering differences.

Did you mean for those position:static to be position:fixed?

yes sorry. If you did not want the left/right columns to scroll you would need to set position to fixed, not the default static. I mis-interpreted it, sorry

**Kem** · 02-21-2008, 01:46 AM

sorry to Kem if this is what you were suggesting

(I need a E dictionary)
Oh,Don't sorry to me, It's not suggesting.
Thank you for all your kind , Booggyman. Your advise helped me a lot. I hope the way i write everything in English is not hard to understand

**astagl** · 02-21-2008, 02:43 AM

boogy,

I do understand your analogy perfectly. This is actually how I would view my original idea of how the layout should work. I should have not taken your example code as literally I believe.

Now you are probably going to kill me, but I have rewritten this again, and I still get a very bizarre thing happening. The right column is not nested inside the container, but resting under it instead. Why would this happen? Am I crazy?

Example located here

and a screenshot of what I am seeing.

**Kem** · 02-21-2008, 04:57 AM

I have an idea which may help you, Astagl:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>test</title>
	<script type="text/javascript"></script>
	
	<style media="screen" type="text/css">
	body {
     margin: 0 auto;
     width: 630px;
     text-align: center;
	}
	div#container {
	     text-align: left;
		 border: 1px black solid;
		 float:left;
	}
	
	div#container {
	     text-align: left;
		 border: 1px black solid;
		 float:left;
	}
	div#left {
	     
	     width: 200px;	    
		 border: 1px black solid;
		 float:left;
		
	}
	div#right {
	    
	     width: 200px;	    
		 border: 1px black solid;
		 float:left;
		
	}
	div#middle {
	     margin-left: 10px;
	     margin-right: 10px; 
	     width: 200px;
		 border: 1px black solid;		 
		 float:left;
		
	}
	</style>
</head>

<body>

<div id="container">
    <div id="left">
		left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>

	</div>
    <div id="middle">
	 	middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>

	</div>
    <div id="right">
	 	right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>

	</div>
</div>

</body>
</html>

**boogyman** · 02-21-2008, 03:05 PM

Originally Posted by Kem

(I need a E dictionary)
Oh,Don't sorry to me, It's not suggesting.
Thank you for all your kind , Booggyman. Your advise helped me a lot. I hope the way i write everything in English is not hard to understand

You have a couple of grammatical errors, but most people with English as first language do also. Your English is very readable and understandable.

Originally Posted by astagl

boogy,

I do understand your analogy perfectly. This is actually how I would view my original idea of how the layout should work. I should have not taken your example code as literally I believe.

lack of full explanation, sorry

Now you are probably going to kill me, but I have rewritten this again, and I still get a very bizarre thing happening. The right column is not nested inside the container, but resting under it instead. Why would this happen? Am I crazy?

you are not crazy, and I actually forgot that your "right-column" div needs to be declared in the html first as well... so you need

side column
side column
middle

for both the html and the css. it doesnt matter which you declare first because you are floating them on either side, but by putting the middle column in the middle, your dilemma is what should be produced... sorry for not properly testing before posting.

now back to your problem... Putting the right column html above the middle will not solve your problem either because you have contradicting css styles on that div. float:right attempts to put the element next on the far right side of the parent / container element, while position:fixed creates that no scrolling content affect. I attempted to play around with some creative relative positions and floats but as of now I am unable to figure out a solution. I am presently at work, but I will look at it again when I get some free time. For the time being, reorder your elements to,

Originally Posted by Kem

I have an idea which may help you, Astag

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>test</title>
	<script type="text/javascript"></script>
	
	<style media="screen" type="text/css">
	body {
     margin: 0 auto;
     width: 630px;
     text-align: center;
	}
	div#container {
	     text-align: left;
		 border: 1px black solid;
		 float:left;
	}
	
	div#container {
	     text-align: left;
		 border: 1px black solid;
		 float:left;
	}
	div#left {
	     
	     width: 200px;	    
		 border: 1px black solid;
		 float:left;
		
	}
	div#right {
	    
	     width: 200px;	    
		 border: 1px black solid;
		 float:left;
		
	}
	div#middle {
	     margin-left: 10px;
	     margin-right: 10px; 
	     width: 200px;
		 border: 1px black solid;		 
		 float:left;
		
	}
	</style>
</head>

<body>

<div id="container">
    <div id="left">
		left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>left column<br>

	</div>
    <div id="middle">
	 	middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>middle column<br>

	</div>
    <div id="right">
	 	right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>right column<br>

	</div>
</div>

</body>
</html>

that will work, but the side columns will scroll which he doesn't want

**undercoverdave** · 02-25-2008, 11:33 PM

I think I have it figured out... it will take me a bit to clean up my code... but basically my body looks like this:

Code:

<div id="fullheightcontainer">
  <div id="wrapper"> 
    <div id="outer">
      <div id="float-wrap">
        <div id="center">
          <div id="container-center">
            <p>content</p>
          </div>
        </div>
        <div id="left">
          <div id="container-left">
            <p>left</p>
          </div>
        </div>
      </div>
      <div id="right">
        <div id="container-right">
          <p>right</p>
          </p>
        </div>
      </div>
      <div class="clear">.</div>
    </div>
  </div>
  <div class="clear">.</div>
</div>

The sidebars use position:fixed; And I also set overflow-x: hidden; on the body so that horiz. scroll is locked, so that the left sidebar won't overflow the content...

I can post the css if you need it. Basically what it does is scroll only the center div, while everything else stays locked.

Thread: very difficult layout

Thread Tools

Search Thread

very difficult layout

Bookmarks

Bookmarks

Posting Permissions