Float lists problem?

Hello all
hope you are well, I’m having a problem with my float list and need help with it please; the list is positioning itself in the left colum of the webpage rather than in the rightcolumn, I can’t work how to move it to the middle column. thanks in advance

Here is the html code:

<div class="colby4">
			<div class="tabbedbox">
				<ul class="tabs">
					<li class="current">News</li>
					<li><a href="#">Blog</a></li>
				</ul>
				
				<ul class="newsitems">
					<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a></li>
					<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a>
					02 July 2010</li>
					<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a>
					</li>
<li class="readmore"><a href="#">Read more news</a></li>

					</ul>
			</div><!--tabbedbox-->		
		
		</div><!--colby4-->
		
		<div class="colby4">
			&nbsp;
		</div><!--colby4-->

		<div class="colby4">
				<div class="tabbedbox">
				<ul class="tabs">
					<li class="current">Webcams</li>
					<li><a href="#">Videos</a></li>
				</ul>
				
				<ul class="newsitems">
					<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a>
02 July 2010</li>
					<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a>
					02 July 2010</li>
					<li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a>
					02 July 2010</li>
<li class="readmore"><a href="#">Read more news</a></li>

					</ul>
			</div><!--tabbedbox-->

And the CSS:

.holder .colby4 {
	width:158px;
	float:left;
	margin:0 8px;
}

.tabbedbox {

}

.tabbedbox .tabs {
	font-weight:bold;
}
.tabbedbox .tabs li {
	width:75px;
	height:30px;
	float:left;
	padding:23px 0 0 10px;
	list-style-type:none;
}
.tabbedbox .tabs li.current {
	width:90px;
	list-style-type:none;
}
.tabbedbox .tabs li a {
	font-weight:bold;
	text-decoration:none;
	color:#0099FF;
}

.tabbedbox .newsitems {
}
.tabbedbox .newsitems li {
	padding:5px 15px;
	font-size:10px;
	color:#666;
	width:180px;
}
.tabbedbox .newsitems li.readmore {
	text-align:right;
}
.tabbedbox .newsitems li a {
	color:#0099CC;
	text-decoration:none;
	font-size:12px;
	display:block;
	padding-top:4px;
	border-top:1px dashed #999;
}
.tabbedbox .newsitems li a:hover {
	text-decoration:underline;
}

Assuming your .holder element is wide enough for the lists then those 2 columns will float next to each other ok. (Or I’ve misunderstood what you wanted)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.holder .colby4 {
    width:158px;
    float:left;
    margin:0 8px;
}
.tabbedbox {
}
.tabbedbox .tabs {
    font-weight:bold;
}
.tabbedbox .tabs li {
    width:75px;
    height:30px;
    float:left;
    padding:23px 0 0 10px;
    list-style-type:none;
}
.tabbedbox .tabs li.current {
    width:90px;
    list-style-type:none;
}
.tabbedbox .tabs li a {
    font-weight:bold;
    text-decoration:none;
    color:#0099FF;
}
.tabbedbox .newsitems {
}
.tabbedbox .newsitems li {
    padding:5px 15px;
    font-size:10px;
    color:#666;
    width:180px;
}
.tabbedbox .newsitems li.readmore {
    text-align:right;
}
.tabbedbox .newsitems li a {
    color:#0099CC;
    text-decoration:none;
    font-size:12px;
    display:block;
    padding-top:4px;
    border-top:1px dashed #999;
}
.tabbedbox .newsitems li a:hover {
    text-decoration:underline;
}
</style>
</head>
<body>
<div class="holder">
    <div class="colby4">
        <div class="tabbedbox">
            <ul class="tabs">
                <li class="current">News</li>
                <li><a href="#">Blog</a></li>
            </ul>
            <ul class="newsitems">
                <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a></li>
                <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a> 02 July 2010</li>
                <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a> </li>
                <li class="readmore"><a href="#">Read more news</a></li>
            </ul>
        </div>
        <!--tabbedbox-->
    </div>
    <!--colby4-->
    <div class="colby4"> &nbsp; </div>
    <!--colby4-->
    <div class="colby4">
        <div class="tabbedbox">
            <ul class="tabs">
                <li class="current">Webcams</li>
                <li><a href="#">Videos</a></li>
            </ul>
            <ul class="newsitems">
                <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a> 02 July 2010</li>
                <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a> 02 July 2010</li>
                <li><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elitYou may have seen the news that the government intends to reduce and then stop CTF payments. </a> 02 July 2010</li>
                <li class="readmore"><a href="#">Read more news</a></li>
            </ul>
        </div>
        <!--tabbedbox-->
    </div>
</div>
</body>
</html>


(I assume you need all the nested divs?)

Hi Jeetendra

thanks for that, tried it but it didn’t work, my lists seem to float below the left column when they are really meant to be for the middle column, don’t know why.

thanks

I’ve sorted it out, thanks for the help, it was a width and float problem,

thanks again

just use height in your tabs.
Here is the solution.
.tabbedbox .tabs {font-weight:bold;height:30px}

Thanks!
Jeetendra