A Div That Won't Affect The Width Of The Page?

[kensbeijing]

I'v got a div, that basically is forced to go off to the right of the page, if the resolution of the screen is not high enough. However, in doing this, it stretches the width of the page adding a horizontal scroll bar at the bottom of the page. Is it possible to make the div go off the page but not affect the size of the page? I don't want to just hide the horizontal scroll bar in case I need it. Thanks.

[jeffman]

A div (or any other block-level element) will normally size itself to the width its container. If the container is somehow larger than the window, then any full-sized divs it contains will also be too large.The other common way a div becomes too large is this. If the CSS width property is defined as 100%, but then the div also has padding, margins, or borders with non-zero values. All three of those values will be added to 100% of the container's size. If you need a div to fill the space of its container, you should be able to leave its width property alone. If this doesn't work, then something else is going wrong.

[kensbeijing]

A div (or any other block-level element) will normally size itself to the width its container. If the container is somehow larger than the window, then any full-sized divs it contains will also be too large.The other common way a div becomes too large is this. If the CSS width property is defined as 100%, but then the div also has padding, margins, or borders with non-zero values. All three of those values will be added to 100% of the container's size. If you need a div to fill the space of its container, you should be able to leave its width property alone. If this doesn't work, then something else is going wrong.

The thing is, I'v got a 700px div in the middle of the page. I make some side page borders to go on both sides of the div, so I used the position: absolute and right: -300px (width of jpg border), so the border sits right next to the page. Is there a better way of doing this?

[thescientist]

you could just try using css-columned layouts that should be adaptable so that you can use the columns as borders or sidebars, if that's what I understand you to be trying to achieve.

[jeffman]

With absolute positioning, a zero value for right puts the right edge of your element exactly on the right edge of the container (usually the window). A positive value moves it left. A negative value moves it right. Negative 300px is a lot to move to the right.Maybe you could describe the big picture for us more clearly. Even better if you post a link or a bunch of code.

[kensbeijing]

With absolute positioning, a zero value for right puts the right edge of your element exactly on the right edge of the container (usually the window). A positive value moves it left. A negative value moves it right. Negative 300px is a lot to move to the right.Maybe you could describe the big picture for us more clearly. Even better if you post a link or a bunch of code.

OK what I am trying to achieve but can't is basically splitting the page up into 3 columns. The middle column is the main page which is 777px wide. I'v also got 2 side borders which should fit on the left and right of the middle column. Which means the width of the border columns should be (((width of the screen)-777)/2) px each. How would I put this in terms of side column width? (The rest of the space left divided by 2). The maximum page width is 777+312+312(columns either side) but this adds up to 1401px. And I don't want to force this width onto screens with only e.g. 1024x768 resolution. I need it so that the max is 1401px and a minimum of 777px wide.This is what I have at the moment.

#css#bg_middle {	width: 777px;	height: 900px;	margin: 0 auto 0 auto;	position: relative;}#bg_left {	width: 312px;	height: 900px;	position: absolute;	top: 0px;	left: -312px;}#bg_right {	width: 312px;	height: 900px;	position: absolute;	top: 0px;	right: -312px;}#html<div id="bg_middle"><div id="bg_left"></div><div id="bg_right"></div></div>

[jeffman]

I think you're asking too much of CSS2. CSS3 provides a tool for calculating measurements on the fly, but it has not been implemented by any browser I know of. IE has an expression operator for CSS, but of course it does not work outside IE.The closest thing I can think of has the outside columns float to the sides, and only the center column has a fluid width. I am not aware of a CSS technique that allows more than one element on the same horizon to have a fluid width.You could try using a table, I suppose. But I don't know if you could make sure the outer columns have the same width. I haven't tried it, so it might be possible.There's always javascript . . .

[kensbeijing]

I think you're asking too much of CSS2. CSS3 provides a tool for calculating measurements on the fly, but it has not been implemented by any browser I know of. IE has an expression operator for CSS, but of course it does not work outside IE.The closest thing I can think of has the outside columns float to the sides, and only the center column has a fluid width. I am not aware of a CSS technique that allows more than one element on the same horizon to have a fluid width.You could try using a table, I suppose. But I don't know if you could make sure the outer columns have the same width. I haven't tried it, so it might be possible.There's always javascript . . .

Hmm, I think I am making things sound complicated. What is the usual technique to arrange website designs in a way similar to mine. A fixed middle column (contains main site content), and borders on the left and right which take up the width of what's left of the page?

[thescientist]

I think typically the edges are fixed width, for navigation and sidebar content, and the middle is fluid. Usually the middle is edged to the center by using padding on the left hand side and setting a width using percentages. And its all wrapped in a container div. I bet you could find what you are looking for by googling fluid three column layouts.

[kensbeijing]

I think typically the edges are fixed width, for navigation and sidebar content, and the middle is fluid. Usually the middle is edged to the center by using padding on the left hand side and setting a width using percentages. And its all wrapped in a container div. I bet you could find what you are looking for by googling fluid three column layouts.

I'v decided to use a 3 column table layout. Any disadvantages of this? It seems alright.

[Synook]

Well, using tables for layout isn't recommended...

[thescientist]

I'v decided to use a 3 column table layout. Any disadvantages of this? It seems alright.

the tables part.

[kensbeijing]

the tables part.

Well I feel that tables are so underrated these days. You can't (not yet anyway) create a 3 column page layout with a static center column and 2 fluid side columns using only css. I think a table with 3 columns isn't going affect my site's performance.

[Synook]

It will affect your semantics, however. There are many three-column layouts using CSS available on the internet - the solution is commonly known as the "holy grail" layout. http://www.alistapart.com/articles/holygrail/

[kensbeijing]

It will affect your semantics, however. There are many three-column layouts using CSS available on the internet - the solution is commonly known as the "holy grail" layout. http://www.alistapart.com/articles/holygrail/

I'v seen that, but that's not quite what I want. Unusually I need a static center width, and 2 fluid sides, opposite to the holy grail layout. The reason for this is because I have an large image as the page background, which I can't actually stretch. Basically the website will be the same size whatever the screen res.

[thescientist]

could you not adapt the holy grail technique by switching which columns get the appropriate styles?

[kensbeijing]

could you not adapt the holy grail technique by switching which columns get the appropriate styles?

It would be difficult because I have 2 fluid columns. I'v got to find a way to somehow balance a static 777px wide column in between them.

[kensbeijing]

It would be difficult because I have 2 fluid columns. I'v got to find a way to somehow balance a static 777px wide column in between them.

I think I have it! I'll post it for anyone who might need it when I clean it up.

[thescientist]

yeah, lets see how it came out.