Tutorial :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?



Question:

I have my markup like this (for argument's sake)

<div id="content"></div>  <div id="layout"></div>  <div id="layout2"></<div>  

Then I use this CSS

#content {      width: 800px;      height: 600px;      margin: 0 auto;  } /* place this attached to the top of the page */    #sidebar,  #sidebar2 {      display: block;      width: 139px;      height: 100%;      position: absolute;      top: 0;      background: url(../images/layout/pretty.png) repeat-y;  }    #sidebar {      left: 50%;      margin-left: -700px;  } /* at this point, it appears to the left, and does not trigger scrolling when the window is resized.. it just slides off to the left */    #sidebar2 {      right: 50%;      margin-right: -700px;  } /* now, when you resize, the scrollbar appears as if the content stretches from #sidebar to #sidebar2 */  

Is there a reliable way to do this? My only other option is to have a large background image, thats say 1200px wide with my repeating design on the left and right.. but this seems cumbersome if I could get this to work.

So my question is, is there a way to position 2 divs which won't affect the browser's interpretation of the width of the page (i.e. as you resize narrower, or smaller resolution, the divs are just hidden out of the viewport?)

Thanks!

EDIT

Thanks for the answers guys, but none are able to give me quite what I want. What's important is these divs that appear outside must be relative to the #content div. They need to appear to the left and right side, and butt up against #content. However, once the browser window is resized to not accommodate them, they should disappear under the viewport. I'd rather not use overflow-x: hidden as I'd like people with small resolutions/windows to be able to scroll left and right to see all the content.


Solution:1

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


Solution:2

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


Solution:3

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.


Solution:4

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?


Solution:5

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;  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »