JSFiddle - React, Tailwind, and code Playground
HTML
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1>
</div>
</div>
<div id="content-container">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">content here</div>
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">content here</div>
</div>
</div>
<div id="footer"><a href="#">UIasdfg</a>
</div>
</div>
CSS
body {
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b {
font-size: 110%;
}
em {
color: red;
}
#maincontainer {
width: 1000px;
/*Width of main container*/
margin: 0 auto;
/*Center container on page*/
}
#topsection {
background: #f0f0f0;
height: 90px;
/*Height of top section*/
}
#topsection h1 {
margin: 0;
padding-top: 15px;
}
#content-container {
float:left;
width:100%;
background:#f8f8f8;
border:1px solid #f0f0f0;
margin-top:-22px;
margin-left:-1px;
height:auto;
}
#contentwrapper {
float: left;
width: 100%;
}
#contentcolumn {
margin-right: 310px;
/*Set right margin to RightColumnWidth*/
background:none;
padding:15px;
clear:both;
}
#rightcolumn {
float: left;
width: 310px;
/*Width of right column*/
margin-left: -311px;
/*Set left margin to -(RightColumnWidth) */
background: none;
padding-top:20px;
margin-top:1px;
border-left:1px solid #222222;
}
#rightcolumn h2 {
font:18px georgia;
font-weight:bold;
border-bottom:2px solid #222222;
}
#footer {
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a {
color: #FFFF80;
}
.innertube {
margin: 10px;
/*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
body {
margin:0;
padding:0;
line-height: 1.5em;
background:#f7f7f7;
}
b {
font-size: 110%;
}
em {
color: red;
}
#maincontainer {
width: 1000px;
/*Width of main container*/
margin: 0 auto;
/*Center container on page*/
}
#topsection {
background:...