1 reply [Last post]
DaveRook
Offline
newbie
Last seen: 13 years 32 weeks ago
Joined: 2009-01-07
Posts: 1
Points: 0

Hello

I am trying to set up 3 boxes beside each other, all with the same height (however, the height can't be fixed with pixels as the content can be brought in dynamically).

I don't know how to do this!

Please find 2 graphics attached. The first (css-desierd) is how I would want it to look (please note the red vertical border lines are all the same height regardless of how much content is in each box). The second (css-current) is how it is looking at the moment (with different heights as they match the height of the content)

My CSS is:

#news
{
	position:absolute;
	width:950px;
	padding-top:5px;
	}	
 
#aboutcompany
{
	position:relative;	
	width:287px;
	padding:0px 12px 0px 12px;
	float:left;	
	border-left-style:solid;
	border-left-width:1px;
	border-left-color:#cccccc;
	}	
 
#product-news
{
	position:relative;
	float:left;
	width:287px;
	border-collapse:collapse;
	border-left-width:1px;
	border-left-color:#cccccc;
	border-left-style:solid;
	padding:0px 12px 0px 12px;
	}		
 
#services
{
	position:relative;
	float:left;
	width:285px;	
	border-left-width:1px;
	border-left-color:#cccccc;
	border-left-style:solid;
	padding:0px 12px 0px 12px;
	border-right-style:solid;
	border-right-width:1px;
	border-right-color:#cccccc;
	}
 

My HTML is:

<div id="news">
    <div id="aboutcompany">
        <span class="title">About Company</span>
            <p>CONTENT IN HERE</p>
    </div><!-- ends aboutcompany-->
 
    <div id="product-news">
        <span class="title">Product News</span>
            <p>CONTENG GOES HERE</p>
    </div><!-- ends product news-->
 
    <div id="services">
        <span class="title">Services</span>
            <p>CONTNET</p>
    </div><!-- ends services-->    
</div><!--ends news-->

If any one has any suggestions, or even knows of an online tutorial, please let me know?

Thank you

Dave

AttachmentSize
css-desired.jpg6.31 KB
css-current.jpg6.11 KB
Triumph (not verified)
Anonymous's picture
Guru

http://csscreator.com/node/22