Forum Moderators: not2easy
When all four content divs are on one line, everything looks fine, but when the screen is narrow enough that the divs start wrapping, the borders on both the container and main divs jump down to the last row of content divs. It seems to be a float issue, but I can't figure out the solution. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page Title</title>
<style type="text/css">
div.container {
border-left: 10px orange solid;
}
div.quick {
float: left;
width: 200px;
}
div.main {
border-left: 10px red solid;
margin-left: 200px;
}
div.content {
float: left;
border-width: 2px;
width: 250px;
height: 300px;
border-color: green;
border-style: solid;
}
div.bottom {
clear:both;
border:2px fuchsia groove;
}
div.link {
background-color: gray;
color: white;
} </style>
</head><body>
<div class="container">
<div class="quick">
<div class="link">
Some Links Here</div>
<p>
Link 1</p>
<p>
Link 2</p>
</div>
<div class="main">
<div class="content">
content here
</div>
<div class="content">
content here
</div>
<div class="content">
content here
</div>
<div class="content">
content here
</div>
<div class="bottom">
Content here
</div>
</div>
</div></body>
</html>
