JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sectionDown">
<div class="sectionDownSide" style="float:left;"></div>
<div class="sectionDownSide" style="float:right;"></div>
<!--<div style="clear:both;"></div>-->
<div class="center">
<div class="sectionDownContainer">
<!--<div class="sectionDownMenu"></div>-->
<div id="image_container">
<img src="http://www.globalskm.com/Site-Images/Signature-Project-Images/Markets/Mining/Pilbara-Joint-Venture/Pilbara_Joint_Venture_980x270.jpg?width=980&height=270" width="980" height="270" />
</div>
<div class="sectionDownContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo
convallis elit ut dapibus. Proin augue magna, sollicitudin at placerat
ut, dapibus vel urna. Duis venenatis massa et diam porttitor tempor. Integer
varius nulla eu est adipiscing facilisis. Maecenas sagittis volutpat nulla
a placerat. Nunc et erat elit, non pellentesque libero. Proin dictum mauris
vel leo faucibus pretium. Sed lacus eros, dignissim sit amet scelerisque
et, tempor vitae est. Quisque ligula ipsum, pellentesque at interdum at,
imperdiet sed nisi. Nullam tempor neque eu nibh posuere vehicula nec sed
quam. Pellentesque et massa tellus, eu dapibus tellus. Fusce vel hendrerit
lorem. Donec nec sem dui. Sed vestibulum, nulla nec sollicitudin pellentesque,
metus mauris blandit quam, a semper tellus est eu felis. Phasellus tincidunt
vulputate odio ut interdum. Sed eget facilisis quam. Nunc ullamcorper congue
quam a lacinia. Donec aliquet suscipit velit, eget dapibus arcu viverra
eget. Cras ornare, nunc nec ullamcorper porta, nisl libero gravida justo,
a faucibus nulla orci vitae odio. Pellentesque a elit eu mauris varius
iaculis vel eget quam. Aliquam id erat...
CSS
body {
margin:0;
padding:0;
}
.center {
width:980px;
margin:0 auto;
}
#sectionDown {
width: 100%;
position: relative;
min-width: 980px;
}
.sectionDownSide {
height: 270px;
width:100px;
position: relative;
top: -32px;
background-color:green;
}
.sectionDownContainer {
width: 980px;
/*height:270px;*/
border:1px solid red;
/*position: absolute;*/
position:relative;
top: -32px;
z-index: 1;
}
/*.sectionDownMenu {
margin-left: 50px;
margin-top: 1px;
display: block;
}
*/
#image_container {
position:relative;
width:980px;
height: 270px;
margin-top:-2px;
z-index:2;
}
.sectionDownContent {
width: 640px;
margin-top: -190px;
margin-left: 50px;
position: relative;
z-index:5;
color:#000;
font-weight:bold;
}
#footer {
height: 142px;
width:100%;
min-width: 980px;
background-color:blue;
}
JavaScript
$(document).ready(function(){
var x = $(document).width();
var xy=(x-980)/2;
if(xy>0){
$('.sectionDownSide').css('width',xy);
}
else{
$('.sectionDownSide').css('display','none');
}
});
$(document).ready(function(){
$(window).resize(function () {
var s = $(document).width();
var ns = (s - 980) / 2;
if (ns == 0) {
$('.sectionDownSide').css('display', 'none');
}else {
$('.sectionDownSide').css('display', 'block');
$('.sectionDownSide').css('width', ns);
}
});
});