Jump to content

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


kensbeijing
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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 . . .

Edited by Deirdre's Dad
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...