Good Day,
I am trying to develop a typical header, left menu and data style web page. The problem I am having is with the data block since I have made it to float and when the browser is resized to a certain point the data is rendered below the left menu block. Is there a way that I can prevent this?
Regards,
Mark P Ashworth
body {
font-size: 12px;
font-family: Tahoma;
background-color: FFFFFF;
margin: 0 0 0 0;
}
label {
float: left;
padding: 0 0 0 0;
margin: 0 0 0 1em;
width: 10em;
text-align: right;
}
.header {
background-color: #2C3A41;
height: 3em;
}
.logo {
color: white;
font-family: Tahoma;
font-size: 2em;
font-weight: bold;
padding: 0 0 0 1em;
}
.page {
float: left;
padding: 0 0 0 0;
width: 99.9%;
}
.context {
float: left;
padding: 0 0 0 0;
}
.context ul {
padding: 0 0 0 0;
margin: 1em 0 0 0;
list-style: none;
}
.context li {
float: left;
}
.selection {
float: block;
}
.tools {
}
.content {
clear: left;
float: block;
width: 99.5%;
margin-top: 0.5em;
}
.filters {
float: left;
height: 50em;
border-right: 2px solid #BFBAB0;
}
.filters ul {
padding: 0 1em 0 0.5em;
list-style: none;
margin: 0 0 0 0;
}
.filters li {
float: block;
}
.data {
width: 80%;
align: center;
float: left;
margin-left: 1em;
}
.message {
float: block;
margin: 0 0 1em 0;
}
.message p {
padding: 0.5em 0 0.5em 0;
}
.message p.error {
border: 1px solid #AC433A;
background-color: red;
}
<body>
<div class="header">
<span class="logo">Test</span>
</div>
<div class="page">
<div class="context">
<ul>
<li>Home</li>
<li>My Context</li>
</ul>
</div>
<div class="content">
<div class="filters">
<ul>
<li>Home</li>
<li>My Context</li>
<li>My Context</li>
<li>My Context</li>
<li>My Context</li>
<li>My Context</li>
<li>My Context</li>
</ul>
</div>
<div class="data">Some data that could potentially be too long for the section and be displayed under the filters block.
</div>
</div>
</div>
</body>
</html>
Before you post, read our: 
Floating elements positioning when browser resized
