Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: very difficult layout

  1. #1
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question very difficult layout

    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!

  2. #2
    Join Date
    Feb 2008
    Location
    VietNam
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy

    (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!

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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
    Last edited by boogyman; 02-20-2008 at 09:54 PM. Reason: mis-interpretted question, needed different position type

  4. #4
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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
    Last edited by boogyman; 06-20-2008 at 07:37 PM.

  6. #6
    Join Date
    Feb 2008
    Location
    VietNam
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Talking

    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

  7. #7
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #8
    Join Date
    Feb 2008
    Location
    VietNam
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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>

  9. #9
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Kem View Post
    (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.

    Quote Originally Posted by astagl View Post
    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,

    Quote Originally Posted by Kem View Post
    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

  10. #10
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •