Jump to content

Help Coding CSS div layout?


Apollo
 Share

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...