asked on

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

ASKER CERTIFIED SOLUTION

B_Dorsey

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BjHutch

ASKER

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?

BjHutch

ASKER

Very quick reply, working example on the first post. Thank you for your response

B_Dorsey

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.

BjHutch

ASKER

Very good. Thank you again for your prompt and fast help. Is very much appreciated!

B_Dorsey

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

BjHutch

ASKER

Thank you for the update. I will give it a try.

BjHutch

ASKER

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:

https://www.experts-exchange.com/questions/23146929/How-do-I-place-a-100-width-table-within-a-div-and-have-it-change-the-div-width.html