?
Solved

How to center a Div with a percent width

Posted on 2008-02-07
8
Medium Priority
?
297 Views
Last Modified: 2010-04-21
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

0
Comment
Question by:BjHutch
  • 5
  • 3
8 Comments
 
LVL 14

Accepted Solution

by:
B_Dorsey earned 2000 total points
ID: 20847666
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
 

Author Comment

by:BjHutch
ID: 20847724
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
 

Author Closing Comment

by:BjHutch
ID: 31429096
Very quick reply, working example on the first post.  Thank you for your response
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 14

Expert Comment

by:B_Dorsey
ID: 20847740
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
 

Author Comment

by:BjHutch
ID: 20847754
Very good.  Thank you again for your prompt and fast help.  Is very much appreciated!
0
 
LVL 14

Expert Comment

by:B_Dorsey
ID: 20847771
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
 

Author Comment

by:BjHutch
ID: 20847799
Thank you for the update.  I will give it a try.
0
 

Author Comment

by:BjHutch
ID: 20847909
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
An ASP.NET Web Form User Control is not newly introduced in ASP.NET. In fact, it was an old technology yet still playing a role to generate web content, especially when we want to use it to have a better and easy way to control part of the web conte…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question