Forum Moderators: not2easy
This works fine in IE 7, but in Firefox 1.5, the "Vivamus vel felis et" part shoots over to the left hand side when the page is shrunk to about 1000 px or less. Any help is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="External/Main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>New Site</title>
<style>
body {
width:100%;
margin:0;
padding:0;
max-width:900px;
min-width:760px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
}
div.Container {
margin:0% 5% 0% 5%;
width:expression(document.body.clientWidth > 900? "900px": "auto" );
}
div.Header {
background-image:url(Images/TopBack.jpg);
background-repeat:repeat-x;
}
div.Nav {
float:right;
position:relative;
top:-37px;
right:10px;
}
div.RightHead {
background-image:url(Images/RightHead.jpg);
width:13px;
height:113px;
float:right;
position:relative;
top:-113px;
right:-4px;
}
div.LeftContent {
float:left;
width:67%;
border-right:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}
p,h1 {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
div.RightContent p {
font-size:10px;
margin-left:0px;
}
a.NavLink:link {color: #990000; text-decoration: none; font-weight:bold; padding:0px 15px 0px 15px;}
a.NavLink:visited {color: #990000; text-decoration: none; font-weight:bold; padding-right:30px;}
a.NavLink:hover {text-decoration: underline;}
</style>
</head>
<body>
<div class="Container">
<div class="Header"><img src="Images/LeftHead.jpg" alt="Left Head" width="13" height="113" /><div class="RightHead"></div>
<div class="Nav"><a class="NavLink" href="#">Link</a><a class="NavLink" href="#">Link</a><a class="NavLink" href="#">Link</a><a class="NavLink" href="#">Link</a></div>
</div>
<div class="LeftContent">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Consectetuer adipiscing elit. Quisque arcu magna, vestibulum non, scelerisque at, facilisis vitae, metus. Cras eget lorem pretium nulla gravida rhoncus. Pellentesque ut nisi eu turpis tempus venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ac quam nec ligula bibendum sodales. Nunc scelerisque. Suspendisse blandit faucibus enim. Ut in ipsum. Phasellus sem ligula, dictum in, pulvinar a, porttitor non, tortor. Nulla commodo adipiscing tortor. Vestibulum ante. Aliquam est. Cras id mauris. Nullam at risus id odio tincidunt placerat. </p>
<p>Nulla tellus. In egestas pede quis massa. Aliquam vestibulum neque non nunc. Maecenas ut enim at neque molestie convallis. Sed enim. In molestie felis a diam. Duis non enim eget nisi mollis posuere. Mauris dictum hendrerit orci. Suspendisse congue. Cras nec ligula ut nibh condimentum consectetuer. Aenean eu massa. Sed iaculis pellentesque risus. Praesent risus justo, luctus in, commodo vitae, consequat elementum, lorem. </p>
<p>Aenean blandit nunc consequat tortor. Aliquam dictum elit sit amet nisi. Sed vitae risus sed urna vehicula sagittis. Vivamus vitae elit vitae turpis laoreet ultrices. Nunc sed pede. Morbi commodo. Sed ultricies mauris et nisi. Curabitur hendrerit lacinia nulla. Maecenas suscipit felis in metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum, ligula id pulvinar suscipit, lorem nisl tempor justo, ac facilisis felis sapien et purus. Etiam vestibulum neque nec enim nonummy auctor. In dapibus, neque eu varius adipiscing, est enim sodales elit, non fermentum eros lorem quis quam. Cras non quam eu lorem mattis volutpat. </p>
</div>
<div class="RightContent">
<h1>Vivamus vel felis et</h1>
<p>Nulla consectetuer vestibulum. Sed fringilla. Integer porttitor odio eget lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed faucibus. Quisque a quam sit amet felis egestas ornare. Praesent faucibus erat et ligula. Nam congue varius tortor. Morbi posuere lorem ac felis placerat fringilla. Nullam et dolor at neque rutrum pharetra. Curabitur commodo sapien cursus elit. Ut vel lectus vitae risus sodales pretium. Cras lacus mi, elementum ac, elementum id, rutrum at, neque. Maecenas libero elit, fermentum ac, vehicula et, euismod eu, metus. </p>
<p>Mauris faucibus consequat velit. Pellentesque eu mi. Ut pellentesque mattis ipsum. Ut dapibus molestie odio. Duis mollis. Nullam ac nisl. Phasellus eleifend sapien. Integer cursus lorem vel lectus. Sed id nulla pellentesque arcu iaculis dignissim. Nullam ornare tempor ipsum. Proin dolor tellus, facilisis ut, sodales sed, viverra eget, nisi. Vestibulum justo. Nulla facilisi. Phasellus ipsum arcu, fermentum sed, condimentum vel, facilisis ac, dui. Phasellus pulvinar felis et enim cursus volutpat. Cras aliquet lacus vel enim. </p>
</div>
</div>
</body>
</html>
