Apollo Posted September 25, 2007 Share Posted September 25, 2007 I'm new to coding CSS, and I was wondering if anyone could help me code this layout or send me a link to something that can help. All of the sites I've looked at are either way more complicated than I understand, or just give you the basics, not as complex as I need.This is a picture of the basic layout that I would need:test layout Link to comment Share on other sites More sharing options...
real_illusions Posted September 25, 2007 Share Posted September 25, 2007 you just need a center coloumn thats a set width (say 900px), set to the centre with margin:auto 0; in the css, then 2 other containers, one that floats to the left, and one that floats to the right.You can then put all the information in to them. The banner and the links dont need to float, they can sit on top of the floating divs, and the footer needs to have clear:both; in the css so it sits beneath the content with all your footer related stuff in.does that make any sense? Link to comment Share on other sites More sharing options...
Shonumi Posted September 25, 2007 Share Posted September 25, 2007 Something like this... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Divs and Stuff</title><style type="text/css">p.nomargin {margin-top: 0px;margin-bottom: 0px;}#top {height: 80px;width: 650px;border: 1px solid #000;margin: auto;text-align: center;}#links {height: 60px;width: 650px;border-left: 1px solid #000;border-right: 1px solid #000;margin: auto;text-align: center;}#twoway {height: 200px;width: 650px;border: 1px solid #000;margin: auto;}#left {height: 200px;width: 324px;border-right: 1px solid #000;text-align: center;float: left;}#right {height: 200px;width: 324px;text-align: center;float: right;}#bottom {height: 80px;width: 650px;margin: auto;text-align: center;border-right: 1px solid #000;border-left: 1px solid #000;border-bottom: 1px solid #000;}</style></head><body><div id="top"><p class ="nomargin">This goes in the top</p></div><div id="links"><p class="nomargin">Put some links here</p></div><div id="twoway"><div id="left"><p class="nomargin">This is on the left!</p></div><div id="right"><p class="nomargin">And this is on the right!</p></div></div><div id="bottom"><p class="nomargin">Lastly, this is on the bottom.</p></div></body></html> Very crude, but it isn't meant to be a complete thing or a template. Toy around with it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.