Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3-column liquid layout, trouble with column behavior (right edges cut off)

    Hello, I'm having an issue. I'm trying to adapt the "holy grail" 3-column layout from this site (http://matthewjamestaylor.com/blog/h...no-quirks-mode) to one a bit more dynamic--I need both side columns to stay a particular em width, while the center stretches.

    I'm pretty proud of myself, in that I figured out complete centering, max- and min- widths, and similar spacing in both FF and IE. But this is my problem--I need about 15-16px padding around each content div, and I can't get the right edges divs to work right--the right edge is always cut off. When I wrap the content in class="content" divs, and set them to only 98%, the center column is too far removed from either edge.

    here is the code I am working on:

    Code:
    <!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" xml:lang="en-GB">
    <head>
    
    
    <!-- INCLUDE META INFO -->
    
    
    <style type="text/css">
    
    /* Main Site Structure */
    	body{background:#000;text-align:center;font-size:0.75em;}
    	body,#head,#foot {margin:0;padding:0;}
    	#body-wrap {margin:0 auto;min-width:800px;max-width:1600px;}
    	#body-wrap,#head,#foot,#LRmask,#LR1,#LRright{width:100%;}
    	#head,#foot,#LRmask,#LRmid,#LRright,#LR2,#LR3{float:left}
    	#head{border-bottom:1px solid #000;background:#bbf;}
    	#foot,#LRmask{clear:both;}
    	#foot {border-top:1px solid #000;background:#f77;}
    	#LRmask,#LRmid,#LRright,#LR1wrap,#LR2,#LR3{position:relative}
    	#LRmask,#LR1,#LR1pad,#LR2,#LR3{overflow:hidden;}
    	#LRmask {background:#f7f;	/* Left col color */}
    	#LRmid,#LRright{border-left-style:double}
    	#LRmid{width:200%;background:#fff;	/* center color */
    		left:21.5em;	/* moves all content and both col borders to right */}
    	#LRright{left:50%;background:#7ff;	/* Right col color */
    		margin-left:-39.5em;	/* moves all content and right col border to left*/}
    	#LR1wrap{float:right;width:50%;right:100%;}
    	#LR1pad{margin:0 .75em 0 40.5em;	/* content col dist from left */}
    	#LR2{width:19em;margin-left:-50%;left:18.75em;} /* left col width, dist from left */
    	#LR3{width:15em;left:1.25em;} /* right col width,dist from left */
    
    .content {display:block;width:100%;border:2px solid black;text-align:center;}
    
    </style>
    
    
    </head>
    <body>
    <div id="body-wrap">
    <div id="head">
    	
    
    
    <!-- INCLUDE HEADER -->
    HEADER<br>
    
    <!-- INCLUDE NAVBAR -->
    NAVBAR
    
    </div>
    <div id="LRmask">
    <div id="LRmid">
    <div id="LRright">
    <div id="LR1wrap">
    <div id="LR1pad">
     <div id="LR1">
    
    
    	<!-- INCLUDE MAIN PAGE CALL -->
    
    MAIN PAGE<br>
    <div class="content">
    MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE 
    MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE 
    MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE 
    MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE MAIN PAGE </div>
    
     </div></div></div>
     <div id="LR2">
    
    
    <!-- INCLUDE LEFT SIDEBAR -->
    LEFT SIDEBAR<br>
    <div class="content">
    LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR 
    LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR 
    LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR 
    LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR LEFT SIDEBAR </div>
    
     </div>
     <div id="LR3">
    
    
    <!-- INCLUDE RIGHT SIDEBAR -->
    RIGHT SIDEBAR<br>
    <div class="content">
    RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR 
    RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR 
    RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR 
    RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR RIGHT SIDEBAR </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
     </div></div></div></div>
     <div id="foot">
    
    
    <!-- INCLUDE FOOTER -->
    <div class="content">
    FOOTER
    </div>
    
    
     </div>
    
    
    <!-- INCLUDE CRAP STATCOUNTERS/ETC -->
    
    </div>
    </body>
    </html>
    The rest of the page seems to work all right, and I could always just have width:98% left-aligned divs surrounding the content, but that just seems like a hack to me, and unnecessary. I need to find a way to make sure the right few pixels aren't being cut off.

    I'm about at a loss here, and I've been tweaking this for weeks. If anyone can see any issues, I'd love to hear them.

    Help?
    Last edited by senselocke; 06-01-2010 at 02:20 AM. Reason: More specific description

  • #2
    New Coder
    Join Date
    Sep 2008
    Posts
    67
    Thanks
    8
    Thanked 2 Times in 2 Posts

    Thumbs up

    remove "width:100%" from the content class. Tested in Chrome and IE8

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Huh, that's... weird. It worked. I don't know why it wouldn't work with width set?

    I really wish there was a central forum for all weird CSS issues. For example, I came across a lot of folks having problems getting things to line up with the bottom right of an element, and I finally got it to work. But if I were to go to each site and list the fix, I would have to post the same message dozens of times.

    Anyway, thank you very much--I wouldn't have thought of doing that.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This site may shorten your search times.

    also, this is a later version of the "Holy Grail"

    Frank
    Last edited by effpeetee; 06-05-2010 at 10:21 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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