Hanspan Posted June 2, 2009 Share Posted June 2, 2009 Hi there, I am new, and currently trying to teach myself html and css to design a website for going live later this year.It's going ok and a work in progress, but what I don't understand is why, when I vary the size of my browser window, all the elements bunch up to try to fit into the space. Does anyone have any suggestions of how I might fix this? It doesn't seem to happen on other sites.My html is below: <html> <head><title>Marathon Fundraising</title><link href="my-styles.css" rel="stylesheet" type="text/css" /><style type="text/css">span.img { margin:2px; border:1px solid #000000; height:auto; width:auto; float: left; }span.img img { margin:3px; display: inline; align: center; }</style></head> <body><div class="container"><div class="header"><h1 class="header">Marathon Fundraiser</h1></div><div class="strip"><span class="img"> <img src="trainer drawing.jpg" alt="Trainer Drawing" width="100" height="60" /></span><span class="img"> <img src="woman.jpg" alt="Woman Running" width="100" height="60" /></span><span class="img"> <img src="legs.jpg" alt="A Runner" width="100" height="60" /></span><span class="img"> <img src="garmin.jpg" alt="Garmin Forerunner 50" width="100" height="60" /></span><span class="img"> <img src="running_shoes.jpg" alt="Running Shoes" width="100" height="60" /></span><span class="img"> <img src="finish.jpg" alt="Finishing a Race" width="100" height="60" /></span></div><br /><br /><div class="left"><div class="buttonscontainer"><div class="buttons"><a href="">Home</a><a href="">The Marathon</a><a href="">Cakes</a><a href="">Cards</a><a href="">Gingerbread Houses</a><a href="">Blog</a><a href="">Training Schedule</a><a href="">Contact us</a><a href="">Sponsor us</a></div></div></div><div class="content"><p> Marathon Fundraiser is a site dedicated to all the goodies available in return for sponsorship in aid of ???</p><p>You can peruse home-made cakes and cookies - which can be personalised - gingerbread houses for Christmas time (or just for the ###### of it!), home-made cards, and services like ironing, all of which you can buy while getting that warm, fuzzy feeling that you have contributed to (said charity)'s work.</p><p>??? and ???? are training furiously for the Virgin London Marathon in April 2010, and all the profits from this site will help them reach their £1,500 fundraising target.</p> <p>If you would like to sponsor us aside from all the goodies and have an even better fuzzy feeling, please click here.</p><p>You can even have a look at their blog to amuse yourself at all their training-induced pain.</p><br /></div><div class="footer">Copyright 2009</div></div></body> </html>The CSS file is below:.header {font-family: arial;font-size: 200%;text-align:center;background-color: #f00000}div.container{width:75%;margin:0px;border:1px solid black;line-height:250%;}div.header,div.footer{padding:0.5em;color:#000000;background-color:#ffffff;clear:left;}h1.header{padding:0;margin:0;font-family:arial;}div.strip{align: center;margin-left: 80px;margin-right: 80px;}div.left{float:left;margin:0;padding:1em;}div.content{margin-left:220px;margin-right:140px;margin-top: 40px;font-family:arial;float:center;text-align:left;line-height:130%}.buttonscontainer {width: 150px;}.buttons a {color: #ff0000;background-color: #ffffff;padding: 2px;padding-left: 3px;display: block;border-bottom: 1px solid #FF3333;font: 17px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: left;}.buttons a:hover {background-color: #FF0000;color: #FFFFFF;text-decoration: none;}Any help would be greatly appreciated! xx Link to comment Share on other sites More sharing options...
smerny Posted June 2, 2009 Share Posted June 2, 2009 Change your container div to like 900px or something, instead of a percentage Link to comment Share on other sites More sharing options...
smerny Posted June 2, 2009 Share Posted June 2, 2009 i would also change the margin of div.container to margin:0 auto; so your content is centered Link to comment Share on other sites More sharing options...
inktherapy Posted June 4, 2009 Share Posted June 4, 2009 Hi,You can also set your layout width to a static fix width if you really don't want your contents moving. Link to comment Share on other sites More sharing options...
Hanspan Posted June 5, 2009 Author Share Posted June 5, 2009 Great, thank you very much! Very new to all this, as you can see.... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.