Dova Wilson wrote:
> Thierry,
>
> Thank you for your help. I'm ready to tear my hair out trying to get
> this to work correctly, but I know it takes time to get the ins and
> outs of css down. This is the first site I'm trying to build entirely
> in css, so thanks for your patience.
>
> As you said to do I added back the "width:100%" and added
> "overflow:hidden" to the #container. Also, I removed the
> "text-align:center" on the body and added a text-align:center to the
> #header and #footer.
>
> CURRENT PROBLEMS:
> * #main dropping in IE6
> * the "overflow:hidden" on #container seems to cut off some of the
> text, rather than make it wrap to the next line. Is there a work
> around for this so the text doesn't spill to the next column, but
> wraps to the next line? See the #main column, right side for cut off
> text. Or is something else interfering?
> * I've forced the text in #main column to stay in the main column by
> adding events to the #left column. If #left is shorter than #main the
> content from #main is spilling left.
>
>
> I did modify the code in the following ways (only showing the parts
> different from your original code). Especially note that I added a
> %width to #left and #main, after I removed the width in pixels.
Hi Dova,
You can't modify these values without a good understanding of how the box
model works (check the Wiki).
Width values and horizontal padding values add up. Which means that you made
your left column over 302px wide: 35% of 750px + 40px (left and right
padding values). That's maybe twice what you're looking for.
My advice is to not mix padding and border with the box dimension on the
same axis. use padding on the nested elements instead.
Regarding this layout, you can also simply "cheat" using margin and width on
#main to create a gutter between the 3 columns.
Also, it doesn't make much sense to me to use "%" on the inner blocks since
the parent is *not* fluid. Its width being set in pixels.
For example, if you replace "width:100%" (from the original CSS file for the
fluid layout) with "width:750px", you should not see any difference.
Try these values:
#main {margin-left: 400px; width:347px}
#left {display: inline;float: left;margin-left: 200px;width:150px}
#sidebar {padding-left: 100%; margin-left: -150px}
Notice that margin + width on #main is close to your total width.
Regards,
Thierry | www.TJKDesign.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
