Div float issues

Hiya,

I'm trying to create a 3 column layout, with a seperate block system in the central column, which again can have up to 3 columns. Like this:

6908

I've created the layout, but i'm having problems with the floated divs and where to clear them. If the left column is too long, the entire contents of the center div are shunted down the page because of the div-clear. I need to clear JUST the center div, not the whole page. I know you can use position:relative to do this sort of thing but i can't get it working!

All help appreciated ;)



Styles so far...

#left-column {
float: left;
}
#right-column {
float: right;
}
#center-column {
}
#usermodules { /*u1, u2, u3*/
padding: 0px 0px 0px 0px;
}
#user2modules { /*u4, u5, u6*/
padding: 0px 0px 0px 0px;
}
#blockw99 {float: left; width: 99%; padding:0 5px 0} /*used to auto change the width to fit in 3 columns if blocks turned on or off*/
#blockw49 {float: left; width: 47%; padding:0 5px 0} /*used to auto change the width to fit in 2 columns if blocks turned on or off*/
#blockw33 {float: left; width: 30%; padding:0 5px 0} /*used to auto change the width to fit in 1 column if blocks turned on or off*/


html so far...
<!-- Begin Main Content Area -->
<div id="main-section">
<!-- Begin Left Column -->
<div id="left-column">
<jdoc:include type="modules" name="left" style="rounded" />
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="right-column">
<jdoc:include type="modules" name="right" style="rounded" />
</div>
<!-- End Right Column -->
<!-- Begin Center Column -->
<div id="center-column">
<?php if ($this->countModules('user1') or $this->countModules('user2') or $this->countModules('user3')) : ?>
<div id="usermodules" class="spacer<?php echo "$usermod_width";?>">
<?php if ($this->countModules('user1')) : ?>
<div id="block<?php echo "$usermod_width";?>">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user2')) : ?>
<div id="block<?php echo "$usermod_width";?>">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user3')) : ?>
<div id="block<?php echo "$usermod_width";?>">
<jdoc:include type="modules" name="user3" style="rounded" />
</div>
<?php endif; ?>
</div>
<div style="clear:left"></div>
<?php endif; ?>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="clear"></div>
<!-- End Center Column -->
</div>
<!-- End Main Content Area -->

html so far...
PHP Code: Sorry, we can't execute your PHP code to generate the corresponding html. Post your parsed html code(taken from browser's view source option) along with DOCTYPE. Or a link would be much better.

Hi,

Thanks for replying! It doesnt really need parsing to see what the layout is - the IF statements just check if the area is in use (IE a block is active) and display the div or not. For this example assume everything IS active and so all the JDoc:include statements are in the html.

All they do is wrap the block in div > div > div > div so you can get smooth corners and a boundary box. This is a simplified version of the end code:

<!-- Begin Main Content Area -->
<div id="main-section">
<!-- Begin Left Column -->
<div id="left-column">
<jdoc:include type="modules" name="left" style="rounded" />
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="right-column">
<jdoc:include type="modules" name="right" style="rounded" />
</div>
<!-- End Right Column -->
<!-- Begin Center Column -->
<div id="center-column">
<div id="usermodules" class="spacer33">
<div id="block33">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>
<div id="block<?php echo "33">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
<div id="block33">
<jdoc:include type="modules" name="user3" style="rounded" />
</div>
</div>
<div style="clear:left"></div> <!-- PROBLEM HERE-->
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="clear"></div>
<!-- End Center Column -->
</div>
<!-- End Main Content Area -->

The real issue i'm having is that the U1/U2/U3 blocks are all float:left, just like the left column, so that in order to get the <jdo:include type "message"> to display below the u1/u2/u3 you have to clear:left.

Which pushes <jdo:include type "message"> below the level of any content in the left column rather than just pushing it below u1/u2/u3.




Thanks for any help :D

This is not what I asked. Please read my post completely. Anyway, the following would help you to have a start
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">html {height:100%;}
body {
margin:0; padding:0; height:100%;
background:#ffffff url(http://www.bonrouge.com/bg.gif) top right repeat-y;
font-family:arial, serif;
}
#wrap {
background:url(http://www.bonrouge.com/bg.gif) top left repeat-y;
min-height:100%;
position:relative;
}
* html #wrap {height:100%}

p {margin:5px; padding:0;}
h1 {
position:relative;
line-height:80px;
margin:0; padding-left:20px;
}
#left {
float:left;
width:200px;
text-align:center;
}
#main {
position:relative;
margin-left:200px;
}
#right {
float:right;
width:200px;
text-align:center;
}
#content {
padding:5px;
margin-right:200px;
text-align:left;
}
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position:absolute;
bottom:0;
height:80px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
}
#footer p {
margin:0;
font-size:1.5em;
text-align:center;
}
ul.columns{
overflow:auto;
}
ul.columns li{
float:left;
height:50px;
width: 25%;
margin:0 2%;
background:#999;
list-style:none;
}
div.middle-content{
height:100px;
background:#999;
margin:10px;
}
</style>

<!--[if IE]>
<style type="text/css">
#content,
#main,
#inner-wrap,
#wrap {
zoom:1;
}
</style>
<![endif]-->

</head>

<body>

<div id="wrap">
<div id="inner-wrap">
<div id="left">left</div>
<div id="main">
<div id="right">right</div>
<div id="content">
<ul class="columns">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="middle-content"></div>
<ul class="columns">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>This is a footer</p>

</div>
</div>
</body>
</html>

(I've modified http://www.bonrouge.com/3c-hf-fluid.php?nc)

Hehe sorry - it's not live, so there is no link at present, and the doctype is XHTML 1.0 Transitional.

As for your solution, I think that would work! But will that validate properly? I've not heard of people floating <ul> and <li> before! Ingenious. It seems quite a hack around, I take it there is no way of doing this with layout divs.

Another quick question - which would be preferable - using <ul> or using a <table>? Both would seem to be viable options here.

Thanks for the help, it's an interesting work around!

Another quick question - which would be preferable - using <ul> or using a <table>? Both would seem to be viable options here.
No. tables are meant for displaying tabular data, and not for making page layout.
See "Why tables for layout is stupid: (http://www.hotdesign.com/seybold/)?"

And a "unordered list" is?!

It seems to me both are hacks of HTML tags performing operations neither was strictly intended for. I hate sites which are layed out in tables. I deal with a lot of PHPBB3 themes, which all seem table based, and changing things is a pain in the ***. The link you posted stated SEO, Theming and Load times as probably the 3 main arguments against using tables.

However, if used judiciously they still have a function, and it would seem appropriate in this case surely. SEO would not be affected, as there would be no nested tables, merely 1. Theming is not a problem, as this IS the theme for the site, and load times seems a weird argument anyway tbh...

Saying that, I prefer the <li> option, i'll just play with the CSS validators to make sure it's all Kosher.