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