Kevin M Posted January 5, 2007 Share Posted January 5, 2007 The past few days I've been designing and coding a new layout, just for fun. I finished coding it today. There were a lot of errors, but I fixed them. According to w3c.org, the CSS and XHTML are both valid, with no mistakes. Here's a link to the hosted layout: Kevin's Layout (The banner isn't great, but neither is my graphic skill). It's coded useing only CSS and Layered Divs, no tables at all (I find Divs easier). The only problem is, as you can see, the divs only extend to the ammount of content they have within them. Here's what the CSS and XHTML codes look like:CSS body, td, th { font-family : Verdana, Arial, Helvetica, sans-serif;font-size : 11px;color : #ffffff;} body { background-color : #000000;background-position : top center;margin-left : 0;margin-top : 0;margin-right : 0;margin-bottom : 0;} a { color : #ffffff;text-decoration : none;} a:hover, a:active { color : #ffffff;text-decoration : underline;} #banner { position : absolute;z-index : 0;background-image : url(/layout2/header.png);background-repeat : no-repeat;height : 200px;width : 800px;top : 0;} #navbg { position : absolute;z-index : 0;background-color : #0a2035;width : 175px;height : 100%;left : 13px;top : 200px;right : 608px;bottom : 0;overflow : auto;} #contentbg { position: absolute;z-index : 0;background-color : #0a2035;width : 382px;height : 100%;left : 208px;top : 212px;right : 208px;bottom : 0;overflow : auto;} #extrasbg { position : absolute;z-index : 0;background-color : #0a2035;width : 175px;height : 100%;left : 612px;top : 200px;right : 12px;bottom : 0;overflow : auto;} #navigation { z-index : 1;width : 150px;height : 100%;left : 13px;top : 200px;right : 608px;bottom : 0;text-align : center;overflow : auto;} #content { z-index : 1;width : 382px;height : 100%;left : 208px;top : 212px;right : 208px;bottom : 0;overflow : auto;} #extras { z-index : 1;width : 150px;height : 100%;left : 612px;top : 200px;right : 12px;bottom : 0;text-align : center;overflow : auto;} .center { text-align : center;margin-left : auto;margin-right : auto;} XHTML <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="styles.css" /><title>Harry Potter Layout by Kevin of forums.dervish-banges.com and rahponline.com</title></head><body><div id='banner'></div> <div id='navbg'><div id='navigation'>Navigation Here</div></div> <div id='contentbg'><div id='content'>SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT,SITE CONTENT, SITE CONTENT</div></div> <div id='extrasbg'><div id='extras'>Extras Here</div></div></body></html> So is it possible to have the divs all expand so they are at the same height? Like what you would achieve with a table. And if so, how would I be able to do this? Sorry about the length of the post. Thanks,Kevin :)EDIT: I guess this should go under the CSS forum. Please move when you get around to it. Link to comment Share on other sites More sharing options...
Scott123 Posted January 14, 2007 Share Posted January 14, 2007 Instead of: height : 100%;try: height : 100px; or whatever size you need.Equal on all divs: top : 200px; or whatever size you need.Not : top : 200px; and top : 208px;Hope I understood you, goodluck! Link to comment Share on other sites More sharing options...
Kevin M Posted January 14, 2007 Author Share Posted January 14, 2007 Thanks. I actually figured out a different way of doing this. Thanks for the reply anyway. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now