How can i stylize this structure and add a scrollbar? - html

Question

Hello I want to stylize this structure HTML with CSS , need to create 3 row . 1.header 2.maincontent 3.footer ! and i need to add a scrollbar for all mainpage , just 1 scrollbar not 1 per each row...
Like is on structure of code I want the style for header , maincontent and footer. Waiting for help.
<div id="header">
<div id="headerLeft">
<div class="msgs">Mesazh</div>
<div class="points">Points</div>
</div>
<div id="headerRight">
<div class="hungry">Hungry: </div>Action:
</div>
<div id="maincontent">
<div class="output">LALALALALALALA</div>
</div>
<div id="footer">
<div id="footerleft">
<div class="onlinePlayer">Klevi</div>
</div>
<div id="footerCenter">
<div class="map">harta</div>
<div class="forum">forumi</div>
<div class="logout">logout</div>
</div>
<div id="footerRight">
<div class="details">details</div>
<div class="inventory">inventory</div>
<div class="support">support</div>
</div>
</div>
</div>

Answer 1

You have already asked about the scrollbar 2 other times today.
The basic way to create a layout is using floats to display divs next to each other. You put these divs in a container. You can make the columns fluid with a percentage or fixed.
The HTML for the header would look like
<div class="row">
<div class="two cols">a</div>
<div class="one cols">s</div>
</div>
First css is for the row or container of the div.
.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #fff;
}
The second css is the base code for each type of column.
.col, .cols {
margin-left: 4.40%;
float: left;
min-height: 1px;
position: relative;
}
Below controls the width for the different columns
.col:first-child, .cols:first-child {
margin-left: 0px;
}
.row .one.cols {
width: 30.4%;
}
.row .two.cols {
width: 65.2%;
}
.row .three.cols {
width: 99.99999999999999%;
}
The example below is based on foundation by ZURB
http://jsfiddle.net/vmbm55fo/