PDA

Click to See Complete Forum and Search --> : Floats

tZ
08-07-2008, 01:53 AM
I stumbled across this problem at work and was wondering other ways in which it can be handled. Normally, when I create a 2 column layout I stick to the below schema.

html

<body>
<div id="content">
<div id="sidemenu" class="column left"></div>
<div id="page-material" class="column right"></div>
</div> <!-- end of content -->
</body>


css

.column.left {
float: left;
width: 180px;
}

.column.right {
margin-left: 180px;
}


Up to this point I have never dealed with a situation where the content inside the #sidemenu div is longer than that of the #page-material. However, when this happens if items are cleared using clear:left; inside #page-material the clearing div will also clear the full height of #sidemenu. This is not what I intend. I only need the clearing div to clear content within #page-material. However, due to CSS limitations it is currently impossible to clear content relative to a certain container.

So what would be the best way to handle this problem? My current solution is just to float everything inside #page-material if I need to float any one thing. I think this is kind of hackish and maybe there is "nicer" way?

The other solution I was contemplating was to float #page-material right and leave the margin to #sidemenu. However, if I did this than the navigation menu which resides inside #sidemenu would be below the content. So this doesn't seem like the most structurally correct approach either.

I was also considering using absolute positioning. However, if I did that than #sidemenu would be taken out of the scope of the wrapper div #content. This because a image is being repeated in the background of #content to create a fake column. Therefore, if #sidemenu falls out of the scope of #content the #content div height will be only be determined relative to page-material not #content.

So I was just wondering if anyone else has ever ran across this dilemma and the solution they arrived at to solve it.
tZ
08-07-2008, 02:37 AM
simple example:

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Float Example</title>
<style>
#content {
width: 950px;
margin: 0 auto;
}

#sidemenu {
float:left;
width: 180px;
height:200px;
background-color: #00FF00;
}

#page-material {
margin-left: 180px;
}

p#intro {
clear: left;
}

div#banner {
width: 100%;
background-color: #0000ff;
float:left;
height: 100px;
}

</style>
</head>
<body>
<div id="content">

<div id="sidemenu">
</div> <!-- end of #sidemenu -->

<div id="page-material">
<div id="banner"></div>
<p id="intro">Hello</p>
</div> <!-- end of #page-material -->

</div> <!-- end of #content -->
</body>
</html>
hewligan
08-07-2008, 02:52 AM
The other solution I was contemplating was to float #page-material right and leave the margin to #sidemenu. However, if I did this than the navigation menu which resides inside #sidemenu would be below the content. So this doesn't seem like the most structurally correct approach either.

Actually, many people have argued that this is the better structural approach.

This is because with this technique, alternative devices such as screenreaders, mobile devices and so on don't have to go through what, for them, can be quite lengthy navigation menus before reaching the content.
tZ
08-07-2008, 03:46 AM
The other problem I have with that solution is that if anything is floated right and cleared inside the #sidemenu column I run into the same problem. I'm not saying anything will be floated right and cleared inside that column I just see it as a dilemma that I would rather avoid if possible.
adamblan
08-08-2008, 04:30 AM
I had to solve a similar problem on my site. Solution:

<mainContainer>
<leftFloat>
</leftFloat>

<rightFloat>
</rightFloat>

<div style="clear:both"></div>

</mainContainer>
hewligan
08-08-2008, 06:00 AM
I had to solve a similar problem on my site. Solution:

<mainContainer>
<leftFloat>
</leftFloat>

<rightFloat>
</rightFloat>

<div style="clear:both"></div>

</mainContainer>

I think you might have misunderstood, since that doesn't actually solve the problem tZ was asking about.

tZ wants to be able to clear an item contained in one column without it having to sit below the bottom of the other column.
adamblan
08-08-2008, 11:04 PM
my bad :)