3 columns in div

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

3 columns in div

Post by Sindarin »

I am trying to insert/nest 3 divs inside a container div,
the 2 first must be floating leftwards and the other to the rightmost but only the middle one appears because it's the only one that has content.

CSS

Code: Select all

<style type="text/css">
body{
color:#ffffff;
}

#select
{
	width:300px;
	height:70px;
	cursor:pointer;
	background-color:yellow;
}
.select-left
{
	float:left;
	background-color:red;
	width:5px;
}
.select-middle
{
	float:left;
	background-color:blue;
	width:auto;
}
.select-right
{
	float:right;
	background-color:green;
}
</style>
HTML

Code: Select all

<div id="select">
	<div class="select-left"></div>
	<div class="select-middle">Option Value</div>
	<div class="select-right"></div>
</div>
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: 3 columns in div

Post by kaszu »

If #select is fixed height (it is in your example), you can use:

Code: Select all

.select-left,
.select-middle,
.select-right {
    height: 100%;
}
Also you must set width for .select-right, otherwise it won't be visible.
Post Reply