Page 1 of 1

3 columns in div

Posted: Wed Apr 21, 2010 5:25 am
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>

Re: 3 columns in div

Posted: Wed Apr 21, 2010 11:24 am
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.