Welcome to WebmasterWorld Guest from 54.198.119.26

Forum Moderators: not2easy

Message Too Old, No Replies

Problem With Div Floats

Screen size affects the container borders

     
8:01 pm on Aug 22, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


This layout looked fine when done with tables, but because they are not as flexible, and just bad form in general, I decided to convert it to a div layout. The problem occurs only in IE (only tested in v7) - no problems in Mozilla.

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>

2:17 pm on Aug 25, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 11, 2005
posts: 76
votes: 0


Okay, I think I've got it. After adding a {height: 100%} attribute to both the <div class="container"> and the <div class="main"> it appears to be functioning correctly.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members