alt234 Posted June 22, 2007 Share Posted June 22, 2007 I'm trying to create a 100% width 100% height liquid 3 column design. I do not want a header or a footer. I want borders. I've been trying to figure it out and thought I had it all fixed when I learned of DocTypes which made my columns completely disappear. So I did some research and learned of faux columns. I've been reading up on this topic a lot. It seems really hackish to me but I guess it's about the best option... Anyway, I am getting so confused with the examples. Most have too much extra stuff in the source that isn't necessary for creating the columns to wade through. At this highest point of frustration, I now just want to show exactly what I'm trying to do in the simplest form and see if I can get some clearer insight or get pointed in the direction of a better example. Here is my code without the DocType so it looks exactly how I want it to. I want this same exact look (different colors probably though) with a doctype. <html> <head> <title>Test</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #leftcol { background: #99FFCC; float: left; width: 20%; height: 100%; border-right: 1px #000000 solid; } #rightcol { background: #99FFCC; float: right; width: 20%; height: 100%; border-left: 1px #000000 solid; } #content { background: #FFFFFF; float: left; width: 59%; height: 100%; } --> </style> </head> <body> <div id="leftcol"></div> <div id="rightcol"></div> <div id="content"> </div> </body></html> Any insight? Link to comment Share on other sites More sharing options...
ste Posted June 22, 2007 Share Posted June 22, 2007 hi, removing the doctype puts your browser into quirks mode where your code worked but was not valid. properly written (x)html is a bit stricter than that.in order to make this work you need to set a height for the body. then the 100% height will work for the columnstry this instead <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <title>Test</title> <style type="text/css"> <!-- html, body { margin: 0px; padding: 0px; height: 100%; } #leftcol { background: #99FFCC; float: left; width: 20%; height: 100%; border-right: 1px #000000 solid; } #rightcol { background: #99FFCC; float: right; width: 20%; height: 100%; border-left: 1px #000000 solid; } #content { background: #FFFFFF; float: left; width: 59%; height: 100%; } --> </style> </head> <body> <div id="leftcol"></div> <div id="rightcol"></div> <div id="content"> </div> </body></html> Link to comment Share on other sites More sharing options...
alt234 Posted June 22, 2007 Author Share Posted June 22, 2007 Wow, thanks. I didn't need faux columns at all then. Awesome! Link to comment Share on other sites More sharing options...
ste Posted June 22, 2007 Share Posted June 22, 2007 glad to be of help Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.