Using 100% Width?

**Yankman30** · July 2, 2005

Hi, I'm basically creating three boxes 500 px high and 250 px wide. I'm using CSS in Dreamweaver. I want the last box, the one all the way on the right, to have a 100% width to fill different browser sizes.

I use absolute positioning on all three boxes and use 100% width on the right side box only but it makes the box stretch very far to the right, way past any browser's width. Using a set number for the last box's width makes it work but I would like the flexibility 100% width provides.

Thanks for any help! I'm very new to this so I appreciate any time taken to help me out.

**TCH-Don** · July 2, 2005

You can assign widths in percentages to all the boxes

the total not to excede 100% if you want to fill the screen.

Like 25% 50% 25%

**Yankman30** · July 2, 2005

Thanks for your reply. The first two boxes have to be that exact width because they contain photos and text. The last box also contains stuff but I want it to fill out any larger monitors or shrink a little for smaller ones. Is that possible?

**charp** · July 2, 2005

Yankman30,

I'm sure you'll find what you need at one of these two resources:

ssi-developer.net or bluerobot.com

HTH

**nkycomputers** · July 6, 2005

If you put the three columns in a table and set it to say 100% and then

use absolute values for the first two boxes you should be able to set the width of the third column to 100% of whats left. Or coply and paste your code so I can try it how you want it.

**Yankman30** · July 9, 2005

Thanks for your reply! I have change the layout slightly but I still want the right box to adjust to different monitor sizes. It's laid out in Static postion, which works, except for the gaps that are created above and to the right of the box. I set all the margins to zero but the gaps remain. I want to insert atable with photos in the right box. Here is the code and CSS code:

><!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>
<link href="percent.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="pertop">Top #pertop = CSS </div>
<div id="perbody">Body #perbody = CSS
 <div id="perbottom">Bottom #perbottom = CSS </div> 
</div>
<div id="pertopR">
 <p>Right # pertopR = CSS </p>
 <p>Static position but there are gaps</p>
 <p>all around which I don't want.</p>
 <p>I will insert a table here with photos  </p>
</div>
</body>
</html>

CSS under percent.css

#pertop {
border: 2px solid;
position: absolute;
height: 25px;
width: 550px;
left: 0px;
top: 0px;
}
#pertopR {
border: thin solid;
position: static;
height: 500px;
left: 550px;
top: 0px;
float: none;
margin-top: 0px;
padding-top: 0px;
margin-left: 550px;
}
#perbody {
border: thin solid;
position: absolute;
height: 450px;
width: 550px;
left: 0px;
top: 25px;
}
#perbottom {
border: thin solid;
position: absolute;
height: 25px;
width: 550px;
left: -2px;
top: 455px;
}

Thanks for any help!

**TweezerMan** · July 9, 2005

I set all the margins to zero but the gaps remain.

<{POST_SNAPBACK}>

There's one other margin that I believe is throwing off your positioning and widths - the default margins on the HTML <body> element. Add the following to your stylesheet and see if it fixes your problem:

>body {
margin: 0px;
}

**Yankman30** · July 9, 2005

Hi, that worked! Thanks so much! I hate to be a pain but I do have another question. I added a table in that static box. I can't position the table inside the box very well. I'd like to adjust the table a little higher. Everything is set to zero so the table should really be in line with the top of the box, touching the top boarder actually. If it's not too much trouble, could you give this a look?

><!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>
<link href="percent.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="pertop">Top #pertop = CSS </div>
<div id="perbody">Body #perbody = CSS
 <div id="perbottom">Bottom #perbottom = CSS </div> 
</div>
<div id="pertopR">
 <p> </p>
 <table width="209" border="0" cellspacing="0" cellpadding="10">
   <tr>
     <td width="17" rowspan="5"><img src="Pics/TAMING_THE_F_19410.gif" width="17" height="400" /></td>
     <td width="96"><img src="Pics/thumb.jpg" width="66" height="66" /></td>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
   </tr>
   <tr>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
   </tr>
   <tr>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
   </tr>
   <tr>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
   </tr>
   <tr>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
     <td width="96"><img src="Pics/thumb6.jpg" width="66" height="66" /></td>
   </tr>
 </table>
</div>
</body>
</html>

CSS with what you had me add, which worked!

#pertop {
border: 2px solid;
position: absolute;
height: 25px;
width: 550px;
left: 0px;
top: 0px;
}
#pertopR {
border: thin solid;
position: static;
height: 500px;
left: 550px;
top: 0px;
float: none;
margin-top: 0px;
padding-top: 0px;
margin-left: 550px;
}
#perbody {
border: thin solid;
position: absolute;
height: 450px;
width: 550px;
left: 0px;
top: 25px;
}
#perbottom {
border: thin solid;
position: absolute;
height: 25px;
width: 550px;
left: 0px;
top: 455px;
margin-top: 0px;
}
body {
margin: 0px;
}

Thanks for any help!

**TweezerMan** · July 10, 2005

You might take a look at that empty paragraph you have before the table:

<div id="pertopR">
<p> </p>

<table width="209" border="0" cellspacing="0" cellpadding="10">

If you remove the paragraph, the table starts right at the top of the box.

**Yankman30** · July 10, 2005

That worked too! Thanks again for your help! I did notice the paragraph above the table but didn't know how to get rid of it. I tried hitting delete but it wouldn't leave. I don't know much about code and I didn't even think of trying to remove it from there.

I appreciate the time time you took to help. Thanks again!

Sign In

Using 100% Width?

Recommended Posts

Yankman30

Link to comment

Share on other sites

TCH-Don

Link to comment

Share on other sites

Yankman30

Link to comment

Share on other sites

charp

Link to comment

Share on other sites

nkycomputers

Link to comment

Share on other sites

Yankman30

Link to comment

Share on other sites

TweezerMan

Link to comment

Share on other sites

Yankman30

Link to comment

Share on other sites

TweezerMan

Link to comment

Share on other sites

Yankman30

Link to comment

Share on other sites

Join the conversation

Hosting