ansaurus

Question

Is there a reliable way to position content off to the sides of a div, and have it only appear if the user's resolution allows it?

Answer 1

A:

You can use JavaScript to make the extra divs visible when the browser window is wide enough to handle both. There's no way that I know of to have the browser ignore the div for layout without actually making it hidden.

Paul Alexander 2009-05-28 01:59:24

Thanks for your answer Paul. I'll let you know how I get on.

alex 2009-05-28 02:02:21

Answer 2

+1 A:

It is possible, because I've done it.

The trick was using negative margins on absolutely positioned divs. For some reason the browser does not attempt to provide scrolling for objects pulled out of the page in this manner.

You can also use overflow:hidden. This will begin cropping your divs contents as the div itself shrinks (make sure the div uses a percentage or auto width so it will actually shrink).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>Cropped sides (no scrollbars)</title>
<style>
div.decor {
    border: 3px solid red;
    overflow: hidden;
    position: absolute;
    width: 48%;
    height: 500px;
    top: 2%;
}
div.content {
    width: 60%;
    height: 300px;
    margin: 100px auto;
    padding: 10px;
    background-color: #DDF;
    opacity: 0.7;
    position: relative; /*hmmm.. without this content goes behind decor regardless of z-index... why?*/
}
</style>
</head>

<body>

    <div class="decor" style="right:50%"><img src="images/teacher.jpg" width=400 style="position:absolute;right:0px;"></div>
    <div class="decor" style="left:50%"><img src="images/teacher.jpg" width=400></div>

    <div class="content">lorem ipsum</div>
</body>

</html>

Demo: http://test.dev.arc.net.au/cropped_sides.html

Key points:

overflow:hidden on absolutely positioned decor divs
right:0 on content of left decor div (forces cropping from left side)
unpositioned content goes behind the decor regardless of z-index, but I don't know why. Simple workaround is to use position relative on your content wrapper.

SpliFF 2009-05-28 02:02:28

it does, i've done it. though for the right side it will probably need to use the overflow:hidden method.

SpliFF 2009-05-28 02:09:38

Hey SpliFF, can you provide some markup and CSS please? Thanks :)

alex 2009-05-28 02:18:44

SpliFF, I hacked your CSS with Firebug to get it to look like what I want mine to, and the same problem was occurring. But I have an idea, will test now.

alex 2009-05-28 06:36:03

Answer 3

A:

Yes you can do this but only on the left side of the screen.

If you have any content on the right (outside of the viewport) the browser will add horizontal scroll bars. The only exception to this is if you turn off the scroll bars but this cannot be done only horizontally across all browsers.

Back to the left side idea... Elements positioned off the left side of the viewport do not cause a horizontal scrollbar. You can have a fixed width layout that is centered on the screen (auto margins on either side) then from within this area you can absolutely position a new column in the left space. If the browser viewport is narrow you won't see it, if it's wide it will be completely visible and usable. The only problem is if it's half-way in the middle - your left column will be chopped off - this could look a bit messy!

Another alternative is to detect the width of the viewport with JavaScript and only show the column if there is room?

Matthew James Taylor 2009-05-28 02:02:52

overflow-x:hidden on both the html tag and the body tag should work across all browsers to prevent the horizontal scrollbar. I used this method on sfipro.com to do exactly what the OP is asking for.

ChiperSoft 2009-05-28 02:14:12

Matthew James Taylor 2009-05-29 00:59:48

Answer 4

+1 A:

Very simple with absolute positioning. You can absolutely position the background and assign it a lower z-index than the main content. Example of just the right side - background color added for clarity:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
      "http://www.w3.org/TR/REC-html40/loose.dtd"&gt;
<html>
<head>
<title>Absolute Test</title>
<style type="text/css">
#content {
position: relative;
    width: 800px;
    height: 600px;
    margin: 0 auto;
background-color: blue;
z-index: 100;
} /* place this attached to the top of the page */
#layout2 {
height: 100px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="layout"></div>
<div id="layout2"></<div>
</body>
</html>

Works with a picture as well:

#layout2 {
height: 600px;
width: 100px;
z-index: 1;
position: absolute;
right: 50px;
top: 0;
background: url(right-side.gif) repeat-y;

The absolute positioning removes it from the flow, so the browser won't add the width of your background to the window size. Since your content is a fixed width, this will even work with IE6.

Traingamer 2009-05-28 19:01:47

Thanks for your answer. I need to position #layout2 in relation to the #content... i.e. say 20px to the right of the box. This needs to then flow under (without triggering scrollbars) when the resolution is below 800px .. any solution? Thanks

alex 2009-06-01 02:05:55

My response is based on layout2 being images (i.e. borders or window dressing of some sort). If you are actually putting 'content' in layout2, then I would not do it this way, but look for a JavaScript solution.Also, in my solution, layout2 must be positioned to the side of the browser window, not to the content div; it slides under the content gradually, not in one swoop (i.e. if window is 900px wide, 50px of content 2 will show; if 950px, then 75px will show, etc). Is layout2 just to make the page look pretty, or is there actual content in it?

Traingamer 2009-06-01 19:35:49

@Traingramer - it's to make the page look pretty... it's a shadow thing that the designer incorporated, but unfortunately it is wider than the width we design at. I've gotten him to change his design now :) Thanks for your answer, +1 for your troubles

alex 2009-06-02 00:25:54

Answer 5

A:

Alternately, you could place the two "floating" divs in a container div set to the max width, and set the "overflow" to "hidden".

That's the easiest way!

ie. Something to this effect:

<div id="wrap">
<div id="left></div>
<div id="center"></div>
<div id="right"></div>
</div>

css:

#wrap{
    width:800px;
    overflow:hidden;
}

Kevin Brown 2009-06-01 23:56:56

ansaurus

tags:

views:

answers:

Is there a reliable way to position content off to the sides of a div, and have it only appear if the user's resolution allows it?

related questions