Jump to content

3 divs in one div


roondog

Recommended Posts

The title might be confusing but my problem isn't easy to describe quickly. Here goes, I'm trying to get some things in the middle of my page. I've seperated the content into 3 divs.Left is some link buttons, middle is an img and right is some more link buttons. I haven't actually added the buttons to the code yet and the colors in the code are just so I can see anything can someone help me sort this out. I will also repeat something similar underneath as well.

<html><head><style type="text/css">body{text-align:center;}div.container{margin-top:-15px;width: 800px;height:600px;background-color: yellow;}div.header{width: 800px;}div.main{width: 600px;height: 200px;margin-top: 0px;background-color: green;}div.linksleft{margin-left: -100px;width: 150px;height: 200px;background-color: black;position: absolute;z-index: 1;}div.linksright{margin-right: -100px;width: 150px;height: 200px;background-color: black;position: absolute:z-index: 3;}img.logo{width: 150px;height: 200px;position: absolute;z-index: 2;}</style></head><body><div class="container" align="center"><div class="header" align="center"><img src="http://tevershamhotspurs.250free.com/headers/title.jpg" /></div><div class="main"><div class="linksleft" >links</div><img class="logo" src="http://tevershamhotspurs.250free.com/pictures/pheonix4.jpg" /><div class="linksright" >links</div></div></div></body></html>

Link to comment
Share on other sites

You might want to google on three column layouts using fixed sidebar sizes and a fixed or floating centre column. CSSPLAY.co.uk has a couple designs. There would be several ways to do this. Try to float the left and right columns in their own direction and centre the middle column. Have a look at that approach and let us know how it goes.

Link to comment
Share on other sites

I just floated them left and right. It seems ok on work computer with ie6 haven't checked on anything else. Cheers for the help.Finished article can be seen at Here now to finish the other pages.

Link to comment
Share on other sites

div.linksleft{float: left;margin-left: -225px; // delete this. It is pushing the left sidebar too far leftmargin-top: 50px;line-height: 10px;width: 150px;height: 200px;position: absolute // delete this. Can't float and position absolute, tooz-index: 1;}

Link to comment
Share on other sites

Still looks terrible in firefoxthis is the html

<!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><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /><style type="text/css">img{border:0px;}div.header{width: 800px;}div.main{width: 600px;height: 200px;margin-top: 0px;text-align: center;background-color: white;}div.linksleft{float: left;margin-top: 50px;line-height: 75px;width: 150px;height: 200px;}div.linksright{float: right;margin-right: 0px;margin-top: 50px;width: 150px;height: 200px;}img.logo{margin-left: -75px;width: 150px;height: 200px;}div.main2{text-align: center;margin-top: -30px;width: 780px;height: 200px;}div.team{margin-top: 50px;float: left;}div.intro{float: left;margin-left: -50px;font-size: 12pt;border: solid yellow 1px;width: 300px;height: 100%;}div.shield{float:right;margin-left: 190px;margin-top: 50px;}p.roon{float:left;margin-left: 160px;color: gray;font-size: 8pt;}div.footer{margin-top: 20px;}</style><link rel="stylesheet" type="text/css"href="/stylesheet.css" /><title>THFC Home</title></head><body><div class="container" align="center"><div class="header" align="center"><img src="/headers/title.jpg" alt="Banner" /></div><div class="main"><div class="linksleft" ><a href="/mainpages/fixtures.html"><img src="/buttons/fixtures.jpg" alt="fixtures" /></a><br /><a href="/mainpages/news.html"><img src="/buttons/news.jpg" alt="news" /></a><br /><a href="/mainpages/table.html"><img src="/buttons/table.jpg" alt="table" /></a><br /><a href="/mainpages/profiles.html"><img src="/buttons/players.jpg" alt="players" /></a><br /><a href="/mainpages/stats.html"><img src="/buttons/statistics.jpg" alt="stats" /></a><br /></div><img class="logo" src="/pictures/pheonix4.jpg" alt="logo" /><div class="linksright" ><a href="/mainpages/info.html"><img src="/buttons/info.jpg" alt="info" /></a><br /><a href="/mainpages/archive.html"><img src="/buttons/archive.jpg" alt="archive" /></a><br /><a href="/mainpages/wallpaper.html"><img src="/buttons/downloads.jpg" alt="downloads" /></a><br /><a href="http://www.a-free-guestbook.com/guestbook.php?username=Tevershamhotspurs"><img src="/buttons/guestbook.jpg" alt="guestbook" /></a><br /><a href="/mainpages/links.html"><img src="/buttons/links.jpg" alt="links" /></a><br /></div></div><div class="main2"><div class="team"><img src="/pictures/teamphoto.jpg" alt="teamphoto" /><br /></div><div class="intro"><p align="center">Welcome to the home of Teversham Hotspurs Football Club. Created from the death of Cherry Hinton reserves and started life in 2005 in the <a href="http://135.196.23.137/pls/gn/V3_League.HomePage?partner_id=154">Tucker Gardner Alliance Sunday league</a>. In the first season Teversham won the second division dropping only two points. In the 2006/7 season Teversham started in division one looking to continue their success and make the club's history an illustrious one.</p></div><div class="shield"><img src="/pictures/shield.jpg" alt="shield" /></div></div><div class="footer"><img src="/pictures/border.jpg" alt="border" /></div><div class="validate"><div class="xhtml"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="xhtml" /></div><p class="roon">Designed by Roondog Interweb Design<br />MMVI</p><div class="css"><img src="http://www.w3.org/Icons/valid-css-blue" alt="css" /></div></div></div></div></body></html>

and css

body {font-family: times;text-align:center;}.container{height:100%; width: 800px;text-align: center;}.banner {float: left;} div.links {float:left;margin-top: -25px;margin-left: 0px;width:800px;min-width: 800px;font-family: Comic Sans MS, Comic Sans MS5, cursive;font-size: .35cm;}  div.validate{margin-top: 5px;}div.xhtml{float:left;}div.css{float:right;}a:link {color : black; } a:visited {color : black; } a {text-decoration:none}a:hover {text-decoration:underline}

Link to comment
Share on other sites

My comment will be hardly constructive, but it will outline what you just experienced: IE doesn't play by the rules. If you write a site that works for IE, chances are your code doesn't comply with W3 standards (and, more important yet, look like crap in other browsers).Firefox and Opera do play by the rules (especially Opera). It's better to design a page for Opera and adapt it to IE (just because it's one of the major browsers your target audience will be using) than the other way around. Else you'll learn how to write 'bad css' for a 'bad browser'.Now for some constructive advise. IE and Firefox handle 'float' differently. Also, if you want to center a div in Firefox, you should add 'margin-left: auto;' and 'margin-right: auto;'. The host div (or body) will have to include 'text-align: center' for IE to comply with your creative thinking.So, in short, the container can be aligned in Mozilla-like browsers by adding 'margin-left: auto;' and 'margin-right: auto;'. See what it does and go from there.Tinker around and have fun.EDIT: some samples

Link to comment
Share on other sites

Thanks for all the help. I've now got it looking right in IE, FF and Opera so it should look right for everyone that looks at it. Please let me know if you spot anything wrong 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
×
×
  • Create New...