...

View Full Version : Floating elements positioning when browser resized



markash
10-16-2007, 05:27 AM
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>

abduraooft
10-16-2007, 08:41 AM
Have a look at http://bonrouge.com/2c-hf-fluid.php, there is no such probelm.

Afrow UK
10-16-2007, 02:23 PM
Possibly a trick is to place an invisible fixed length div in there to force the webpage to have a minimum width.

Stu



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum