I am using A List Apart’s “Holy Grail” for a liquid main column with a fixed right column (their column shows a left column also, but I’ve eliminated it). I have added DIVs within the main column area and right column area and these additional DIVs have borders (which also helps us to see the dimensions of the DIV).
When my DIV in the main column has a large amount of content, it forces the DIV to extend to a point 10 px before the right column (which is how I would like it to behave).
When my DIV in the main column has a small amount of content, the DIV wraps around the content and does not extend to a point 10 px before the right column. I would like it to extend. I have tried adding width:100%, but this results in an overextension of the DIV. I would like to avoid using things like 99%, etc. Any ideas as to how I can accomplish this? My HTML and CSS is below.
<html><head>
<style>
body {min-width: 400px; /* 2 x RC fullwidth */}
#container {padding-right: 177px; /* RC fullwidth + CC padding */}
#container .column { /* position: relative; */ float: left;}
#container .maintry1 { /* position: relative; float: left; */ padding:10px; border: 1px solid #cbcbcb; background-color:#fff;}
#container .maintry2 { /* width:100%; position: relative; float: left; */ padding:10px; border: 1px solid #cbcbcb; background-color:#fff;}
#container .rightnav { /* position: relative; float: left; */ padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:0px; border: 1px solid #cbcbcb; background-color:#fff;}
#center { padding: 10px 10px; /* CC padding */ width: 100%;}
#right {width: 147px; /* RC width */
padding: 10px 10px 10px 0px; /* RC padding */
margin-right: -100%;
}
#footer {clear: both;}
/*** IE Fix ***/
* html #left {left: 150px; /* RC fullwidth */}
/*** Just for Looks ***/
body {margin: 0; padding: 0; font: 14px Arial, Helvetica, sans-serif; background-color: #f6f6f6; color: #000; margin:0; padding:0;}
#center {background-color: #f6f6f6;}
#right {background-color: #f6f6f6;}
#container .column {background-color: #f6f6f6;}
#Group1 { display:inline-block; width:33%; background-color:#ff0000;}
#Group2 { display:inline-block; width:33%; background-color:#00ff00;}
#Group3 { display:inline-block; width:33%; background-color:#0000ff;}
</style>
</head>
<body>
<div id="container">
<div id="center" class="column">
<div class="maintry1">
<p>#1. This DIV has a large amount of content and forces the DIV to encompass the intended area.<br>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<div id="Group1">
<ul>
<li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li>
</ul>
</div>
<div id="Group2">
<ul><li>test</li></ul>
</div>
<div id="Group3">
<ul><li>test</li></ul>
</div>
</div>
<br>
<div class="maintry1">
<p>#2. This DIV has a small amount of content.<br> The DIV does not extend to the end of the intended area like the 1st DIV.<br> How can I get this DIV to go expand to the right with the intended 10px padding?</p>
</div>
<br>
<div class="maintry2">
<p>#3. This is the same as #2, but it has width:100% and it extends too far.</p>
</div>
</div>
<div id="right" class="column">
<div class="rightnav">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>
</div>
</div>
</body>
</html>
UPDATE: Here are the 2 snapshots related to my comments on 12/12/2011:
Old:
My Fix?
UPDATE 12/13/2011
Hi Purr,
Thank you very much for the follow-up. The code is helpful. Also, the box model is helpful to my understanding. For example, I would like to turn off the colors, and turn on a border-left on some of the DIVs, and this seems to break the rule of adding to 100%. When there are the group DIVs and I set each to 33.33%, and then I have two of the DIVs with a border of 1px (99.99% + 2 pixels), this also appears to surpass 100%. When I set to 33%, it seems to be okay for now based on my screen size, but this doesn’t seem very scientific. Is there a preferred way of squeezing my borders in there? I will be making different iterations of this for 3, 5, 8 and 12 columns (possibly more), so the borders will start to add up and may have an impact. I would like the wrapper to stay as close to 100% as possible. I’ve updated the Fiddle:
http://jsfiddle.net/zenfiddle/yUPCC/2/
Also, perhaps this is appropriate for another question, but perhaps there is a quick fix that we can handle here. My updated Fiddle shows the borders as stopping where the DIV wraps. I would like the borders to span the height of the parent DIV. I realize there are many ways to approach this and this has been discussed by various authors/developers. Is there a quick and sound fix? Whatever approach I take, I will be recalculating it for the 3, 5, 8 and 12 columns.
You can try this:
I commented out the css rules that you can delete and it should have the effect that you want to have.
When you set a float:left; to .column you don’t have to float the divs inside it. Divs are displayed as display:block per default, so they automatically take a width of 100%.
See also here:
http://jsfiddle.net/Fwta6/3/
Update (13.12.2011)
I would do it the same way, by floating the 3 divs left, so that they are displayed in one line. I updated the code: http://jsfiddle.net/yUPCC/
Let’s take it apart.
I deleted the min-width of the body. When
#Groupshas a min-width and.rightnava fixed width, it makes no sense to set a min-width to thebodythat is even smaller than the one from#GroupsI often use
overflow:hiddeninstead offloat:noneorclear:both. You have to add it to the element that contains the floating element. By this, you are also avoiding the “under-/overflow” that you mentioned. It’s the same that MiG explained in the other answer to this question.Instead of adding
float:leftto every single div in#Groupsyou can address them by the following.If you set a padding to the colored divs in
#Groups, they will not display inline, because of the box model (http://www.w3schools.com/css/css_boxmodel.asp). It would simply calculate 33% + 10px, which is more than 100% if multiplied by 3. That’s why you can set a margin to the child element (in this case the ul) to get a “padding”.I deleted the
<br />between the divs and instead set amargin-bottomto the divs.I hope this is how you want it to be. I don’t know if this is best practice css, but it works and that’s what we want.