Skip to content Skip to sidebar Skip to footer

Three Divs Wider Than Screen Without Scrolling

I have page to maintain, which was developed very poorly by someone other. Every change for me is now a real ordeal. Now page looks basically like this: ____________________ |

Solution 1:

Check this fiddle: http://jsfiddle.net/GSygt/

In the above fiddle, change the width of the center content to 1000px in your CSS. I've used 200px so that the result is visible inside jsfiddle output pane.

HTML

<html><body><divclass="center">

            This is my content!

            <divclass="side left">LEFT</div><divclass="side right">RIGHT</div></div></body></html>

CSS

body {
    overflow-x: hidden;    
}
.center {
    position: relative;
    width: 200px;   /* change this to 1000px */background-color: #dfd;    
    margin: auto;
    text-align: center;
    min-height: 600px;
}
.side {
    position: absolute;
    width: 400px;   
    top: 0;
    background-color: #ddd;
    text-align: center;
    min-height: 200px;
}
.left {
    left: -400px;
}
.right {
    right: -400px;
}

Solution 2:

So I'm assuming you can't change anything in your design, the only thing you can do is add the divs to the body. If that's the case here's how I'd do it: http://jsfiddle.net/joplomacedo/4p6nw/

1) First set the widths on your new divs. 2) Then float each other to their own side. 3) Add a negative margin to the side they're floated to equal to their width. 4) On the body, add a padding-left equal to the floated left div's width, then add a padding-right equal to to right floated div's width.

For this HTML...

<body><divclass="left-div"></div><divclass="right-div"></div></body>

...the CSS

body {
  width: 1000px;
  margin: 0 auto;
  padding: 0400px;
}

.left-div {
  float: left;
  width: 400px;
  margin-left: -400px;
}

.right-div {
  float: right;
  width: 400px;
  margin-right: -400px;
}

Solution 3:

Possibly use absolute positioning. (Although I would also recommend NOT using 1800px as a static width, I guess the two sidebars are for advertising, and I have had the same arguments with a marketing monkey before about page widths so I understand)

.center {position: absolute; top: 0; left: 50%; margin-left: -500px; display: block;}

then have left and right inside center but pull them out also with absolute positioning.

so for example

.right {position: absolute; top: 0; right: -400px; width: 400px;}

and the reverse for left.

Hope this helps, there will be a horizontal scrollbar, but the same applies to floated elements.

Solution 4:

I don't recommend to make your site to 1800px in width.

but you can follow the below structure : table with 3 td like

<table><tr><tdid="first"valign=top> content </td><tdid="middle"valign=top> content </td><tdid="last"valign=top> content </td></tr></table>

and to disable scrolling add this to your stylesheet :

body{overflow-x:hidden;}

Post a Comment for "Three Divs Wider Than Screen Without Scrolling"