...

View Full Version : 3-column liquid layout, trouble with column behavior (right edges cut off)



senselocke
05-31-2010, 08:18 PM
Hello, I'm having an issue. I'm trying to adapt the "holy grail" 3-column layout from this site (http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-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:



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

ctoz
06-02-2010, 04:46 AM
remove "width:100%" from the content class. Tested in Chrome and IE8

senselocke
06-04-2010, 11:05 PM
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.

effpeetee
06-05-2010, 11:04 AM
This site (http://www.exitfegs.co.uk/Sources.html) may shorten your search times.

also, this is a later version (http://exitfegs.co.uk/Holygrail.html)of the "Holy Grail"

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum