-
Scrollable DIV
I have a .class DIV which contains 2 DIVs. In the right DIV I have some content that need to be scrolled. I just can't find out how to do that. I tried the option "Scroll", "Visible" etc. but really.... can't make it work ! Hope you can help me out guys !
Here is the CSS:
Code:
body{
margin: 0;
padding: 0;
background-image: url(img/back.png);
}
#wrapper {
width: 100%;
}
#header {
height: 112px;
width: 100%;
border: 1px solid #A2A2A2;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#logo_gauche {
float: left;
width: 20px;
height: 112px;
padding-left: 0px;
margin-left: 0px;
}
#menu {
margin-right: auto;
margin-left: auto;
}
.center {
width: 100%;
margin-right: auto;
margin-left: auto;
float: left;
position: fixed;
height: auto;
}
#left {
width: 22%;
float: left;
padding-left: 45px;
padding-top: 50px;
}
#right {
width: 38%;
float: left;
border:solid;
border-width:.9px;
border-color:#5D5D5D;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
background-color: #FFF;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-repeat: no-repeat;
font-family: Tahoma, Geneva, sans-serif;
font-size: .78em;
color: #0C4465;
text-align: justify;
overflow: auto;
height: auto;
}
ul.menu{
margin-top: 22px;
margin-right: auto;
margin-left: auto;
}
.tftable {
font-size:12px;
color:#333333;
width:100%;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse;
}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {
font-size:12px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
}
.tftable tr:hover {background-color:#ffffff;}
And the HTML:
Code:
<div class="center">
<div id="left">
<img src="img/logo_left.png" align="absmiddle">
</div>
<div id="right">
<table class="tftable" border="1">
<tr><th>Descriptions</th><th>Forfait de BASE</th><th>Forfait RÉGULIER</th><th>Forfait de LUXE</th></tr>
<tr><td>Nb de pages maximum</td><td align="center">4 pages</td><td align="center">8 pages</td><td align="center">16 pages</td></tr>
<tr><td>Formulaire de contact</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Page Facebook</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Papier-Peint</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Menu Dynamique</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Prise de photos</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Google Map intégrée</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Achat du nom de domaine</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Achat de l'hébergement</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Configuration des courriels</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Mise-à-jour - 1 mois</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td><td align="center"><img src="img/y.png"></td></tr>
<tr><td>Menu-Onglets maximum</td><td align="center">4 onglets</td><td align="center">6 onglets</td><td align="center">8 onglets</td></tr>
<tr><td>Animation (Intro)</td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/x.png"></td><td align="center"><img src="img/y.png"></td></tr>
</table>
</div>
Thank you very much !!!
-
"Scroll" and "visible" aren't css properties - but overflow is http://www.w3schools.com/cssref/pr_pos_overflow.asp