Three Divs Wider Than Screen Without Scrolling
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>
<div class="center">
This is my content!
<div class="side left">LEFT</div>
<div class="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>
<div class="left-div"></div>
<div class="right-div"></div>
</body>
...the CSS
body {
width: 1000px;
margin: 0 auto;
padding: 0 400px;
}
.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>
<td id="first" valign=top> content </td>
<td id="middle" valign=top> content </td>
<td id="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"