I've created a site using float and clear to get the various items in the right place, but if I shrink the window to see how it will look on smaller screens it begins to fall apart. I can't work out why.
Its in ASP.NET version 2 so here is the code.
Can anyone help?
CSS File
[code]
/* Div Containers */
.header {
background-color:#0000FF;
padding-left:10px;
}
.menu {
background-color:#CCCCCC;
clear:both;
padding-left:10px;
}
.pic {
background-image:url(/images/pic.jpg);
background-repeat:no-repeat;
float:left;
width: 300px;
}
.caption {
background-color:#00FFFF;
height:inherit;
width:inherit;
}
.main {
float:left;
width: 70%;
padding-top:10px;
padding-left:20px;
padding-right:10px;
}
/* Text Styleing */
.captiontext
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.title
{
font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:2em;
}
.title2
{
font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:0.5em;
}
h3
{
font-family:"Bookman Old Style", "Book Antiqua", "Century Schoolbook", Verdana, Arial, Helvetica, sans-serif;
font-size:2em;
color:#CC0000;
font-weight:bold;
}
p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}
.psmalltitle
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: