How to center a Div with a percent width

I have been using tables in my html pages  Recently I started reading up on using absolute position div tags and have been very impressed.  I am trying to create something similar to what I have done in tables, but in div tags.

What I am trying to accomplish is to have 3 boxes.  A left one that is 200 width that is always on the left side of the screen, a right one that is 200 width that is always on the right side, and a center box that will stretch between the 2 to fill up the remaining space.  This box would need to be able to grow horizontally to the size of what ever width the viewer is viewing the page at.

For example, in tables I could do a table with 3 rows, 1st being set to 200px, 2nd set to 100%, and 3rd being set to 200px.   As long as there was an image or something in box 1 and 3 they would contain there sizes and the center box would always take up the remaining space.

I am hoping with divs I can do something similiar (of course minus having to use images to force the left and right boxes to stay the same size).

I have attached the code that I am working on so far.  I figured out how to do left and right boxes, but not how to make the center one grow the remaining space.

Thank you in advance for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#leftbox {
	position:absolute;
	left:10px;
	top:10px;
	width:200px;
	height:100px;
	z-index:1;
}
#centerbox {
	position:absolute;
	left:220px;
	top:10px;
	width:300px;
	height:100px;
	z-index:2;
}
#rightbox {
	position:absolute;
	right:10px;
	top:10px;
	width:200px;
	height:100px;
	z-index:3;
}
-->
</style>
</head>
 
<body>
<div id="leftbox"></div>
<div id="centerbox"></div>
<div id="rightbox"></div>
</body>
</html>

Open in new window

BjHutchAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

B_DorseyCommented:
This what you looking for?
<div style="width:100%">
 <div style="float:right;width:200px;background-color:#ccc">dsfdsf</div>
 <div style="width:200px;background-color:#ccc;float:left">dsfdsf</div>
 <div style=";background-color:#ff0000">SDfsdfdfs </div>
 <div style="clear:both"></div>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BjHutchAuthor Commented:
That looks like it is working.  Though I am curious on the code you provided.  is the semi colon in front of background on line 4 needed, and if so why?  Also would you mind explaining to me what the clear does on line 5?
0
BjHutchAuthor Commented:
Very quick reply, working example on the first post.  Thank you for your response
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

B_DorseyCommented:
first the semi colon is not needed...

the clear:both basically makes sure that if you have more info under these 3 columns that the right float doesnt sit over top that data.
0
BjHutchAuthor Commented:
Very good.  Thank you again for your prompt and fast help.  Is very much appreciated!
0
B_DorseyCommented:
When you pointed out the extra semicolon, I tried to figure out why I had it in there... my previous code had a mistake, it would put text under the right float... here is the revised code.
<div style="width:100%">
 <div style="float:right;width:200px;background-color:#ccc">dsfdsf</div>
 <div style="width:200px;background-color:#ccc;float:left">dsfdsf</div>
 <div style="margin-right:200px;background-color:#ff0000">SDfsdfdfs </div>
 <div style="clear:both"></div>
</div>

Open in new window

0
BjHutchAuthor Commented:
Thank you for the update.  I will give it a try.
0
BjHutchAuthor Commented:
I am trying to put a 100% table in this code in the middle div so that it will fill it up, but it isn't displaying correctly.  Any ideas why this would be?  I have created a new ticket for this question at:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23146929.html

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.