Liz lizCSSlist wrote: > I'm a beginner at CSS layout and just discovered this list. > Example 1 http://lizdesign.com/demosite/example1.html > Example 2 http://lizdesign.com/demosite/example2.html > I cannot do a fixed height for the container because the size will change > and there will be a > varying amount of text under the image and nav. Why does the image fall out > when I float it left and what would be the best way to do this layout? > Liz Welcome!
This is a good reference for floats: <http://css.maxdesign.com.au/floatutorial/index.htm> Rather than trying to re-invent the wheel with a layout from scratch, you might start with a solid structural foundation, a layout that is /known/ to work-- maybe consider this one: <http://blog.html.it/layoutgala/LayoutGala35.html> It will work well cross-browser. Call the painting from inside #content-- that column floats left, and the navigation column floats right. Remember that the width and height of the paintings can vary; however, the the width can not /exceed/ the width of the container it is in. The top set of links is really a /list/ that is set horizontally. Here is how those links might be set with css: <http://css.maxdesign.com.au/listamatic/horizontal01.htm> The side navigation is really just a list, too-- only it is set vertically. Here's an example of how to set a vertical list with css. <http://css.maxdesign.com.au/listamatic/vertical01.htm> Develop in Opera, and Firefox-- but!, check frequently in IE. View your page at 800, 1024, and 1280. Keep the css and markup valid as you work. The list wiki is a valuable resource for most any problem you may encounter (the URL for the wiki will be at the bottom of this reply). HTH ~dL. -- http://chelseacreekstudio.com/ca/ccs/pow/pow.html ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
