Log in

View Full Version : Multicolumn lists conflict


niazi
09-28-2006, 08:57 AM
Hello everybody.
This really needs a CSS expert.
Actually I'm building a three column layout website for my customer, using floated divs, i.e. the side columns are floated to left and right.
My problem is that now I'm trying to use in my content area a mutlicolumn list which also floats to left, so below the list, I have some content and here is the problem: since the list items are floated, I have to put a clear:left element, otherwise the next content will float next to the list. But if I put a <div style="clear:left;">, the content goes down next to the left column in my design because it's also floated to the left.
So my question is: how to clear the floating list just to let next content appear below of it?
I will really appreciate your help.

Here is a sample code:

Markup:


<html>
<body>
<div id="maincontainer">
<div id="header">
Site header
</div>
<div id="content-container">
<div id="first-column">
<ul id="main-navigation" style="background-color:Orange;">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<div id="first-column-ads" style="background-color: Green; height: 200px;">
Left Ads
</div>
</div>
<div id="third-column">
<div id="search-box" style="background-color: orange; height: 70px;">
Search
</div>
<div id="third-column-ads" style="background-color: Green; height: 300px;">
Ads
</div>
</div>
<div id="content">
this is a bicolumn list
<ul class="list-multicolumn">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<div style="clear:left;"></div>
<strong><u>And this is the problematic content</u></strong>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">
Site Footer
</div>
</div>
</body>
</html>


CSS:


<style>
body {
margin: 0px 20px;
background-color:Gray;
}

div#maincontainer {
width: 760px;
margin-left: auto;
margin-right: auto;
background-color:White;
}

div#header {
width: 760px;
height: 200px;
padding: 0px;
margin: 0px;
background-color: #FFF1CF;
}

div#content-container {
width: 760px;
padding: 0px;
margin: 10px 0px 0px 0px;
}

div#first-column, div#third-column {
margin: 0px;
padding: 0px;
}

div#first-column {
float: left;
width: 150px;
}

div#third-column {
float: right;
width: 130px;
text-align: left;
padding-left:5px;
}

div#content {
margin: 0px 140px 0px 160px;
}

ul#main-navigation {
list-style-type: none;
padding: 0px;
margin: 0px;
}

ul.list-multicolumn{
margin-left:10px;
padding:0px;
width:95%;
list-style-type: circle;
}

ul.list-multicolumn li{
width:35%;
float:left;
}

div#footer{
text-align:center;
background-color: #FFF1CF;
}

</style>
niazi
10-01-2006, 11:01 AM
Hello guys.
Where are the CSS gurus?
blm126
10-01-2006, 05:04 PM
I don't really understand what you mean. If you could set up a demo page it would be helpful.
niazi
10-02-2006, 07:31 AM
Sorry blm126, I thought that if I post the code it will be clear, but may be it's ambiguous though :).
May be a screenshot is a better idea.


582

The screenshot above shows the page I'm talking about, all I want is to remove that vertical gap in the content area between the bi-column list and the content below. I believe that this gap is caused by the fact that left column is also floating to left, so the content is clearing the longest float:left.
You can use the code I've posted in post#1 to reproduce the problem.