View Full Version : CSS width question

03-08-2005, 07:21 AM
Here is an interesting question I have not been able to figure out. Say I want a box that is 800 pixels wide centered on the screen. The box is centered between two other boxes that run the height of the page. Is it possible using CSS to make the two outside boxes the border the main box "shrinkable" so that if you were to make the window smaller, the outside boxes would shrink?

Obviously what I am trying to do is make the main box show up fine at all resolutions.....

Thanks for any feedback.

03-08-2005, 07:44 AM
Here's one way (http://richardmedek.com/temp/example5.htm) to try it... Adjust to your taste.

03-08-2005, 07:57 PM
Hey thanks Richard! That is exactly what I was talking about.....

I'm attaching a pic of what I am trying to do as far as layout, with side 1 and side 2 being the collapsable boxes and what is in between that being the 800 px main box - obviously I know it can be done with tables but I am sure I can do it with CSS as well (and should learn how). I'm doing the right thing by going with CSS (even considering the layout) right?

03-08-2005, 08:03 PM
It can be done with CSS, although if it were fixed-width it would make very very easy. If it were a liquid layout, then that would be somewhat difficult to get working. As for Richard's proposal, if the window is resized in Opera, the text just stretches out of both sides of the box.


03-08-2005, 08:06 PM
Well the center 800px box is fixed width.... even though the other 2 boxes are not...... does that make a difference?

03-08-2005, 08:08 PM
Are you planning on having anything on the outer two boxes?

03-08-2005, 08:50 PM
No content in the 2 outer boxes no, just color - so basically it will look a little cooler if they boxes are there (on a higher res screen), but if the boxes were not there (on a 800x600 res) the main content box still would be.....

03-08-2005, 08:59 PM
Well then logically, you could remove those outer boxes, and align the main content to the center by applying: "margin: 0px auto" to it. Set the background of the body to #xxx, and that would be all that you need to do.

Easy as 3.141592653589.

03-08-2005, 09:08 PM
I am not sure if that will work though - if you look at the pic I provided (which is bad so bare with me), the very outside box all the way around is just the screen. But inside all those lines will be visible - so there is a line that stretches across the width of side box 1, across main box, and across side box 2. This happens on both the top and bottom.

I am obviously new to CSS, but I don't think just aligning the main box to the center and removing those other 2 boxes can accomplish this.... maybe I am wrong?

03-08-2005, 09:18 PM
Well you could then put the main fixed width box again aligned to the center inside a container that spans the width of the page, or just less, e.g. 95% if you don't want it to span the whole screen. After that add the border property to the container:

border-top: 1px solid #xxxxxx;
border-bottom: 1px solid #xxxxxx;
That should resolve the problem.

If you want it to rest at a certain level from the top of the screen, adding a margin would do that for you.

03-08-2005, 10:16 PM
So you are saying the container is basically the outside lines of the example picture from above....?

03-08-2005, 10:32 PM
Yup. That should help it to work fine :)

03-08-2005, 10:35 PM
Here is a new picture that might better show what I am trying to do - but as I understand your last post, I changed the margin of the container then the lines wouldn't reach to the top of the page. The lines in question (that are outside of the 800px fixed width box) I have colored red. The lines inside the 800px box I have colored blue.... maybe I am just confusing myself but for some reason it didn't seem like this would work the way you suggested because the red lines stretch from the top of the screen to the bottom (100%) and from left to right (100%)..

03-09-2005, 03:29 AM
Here's my first attempt - not quite working.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>3 Column Layout Test</title>
<style type="text/css">

* {
margin: 0;
padding: 0;

#wrapper {
margin: 0;
position: relative;
width: 100%;
height: 100%;

width: 800px;
height: 100%;
position: relative;
top: 0;
border: 1px solid #ccc;

#columnone {
width: auto;
height: 100%;

#columntwo {
width: auto;
height: 100%;
<div id="wrapper">
<div id="columnone">Left Column</div>
<div id="maincontent">Main Content</div>
<div id="columntwo">Right Column</div>