If you want to hide the scroll bars then just wrap an element around the div that is shorter than the scrolling div and has overflow:hidden applied and you won’t see the scrollbars.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='ca'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Gimnàs Esportiu · Posa't en forma amb nosaltres</title>
<link rel='stylesheet' href='css/estil.css' type='text/css' />
<style>
/*
Theme Name: Gimnàs Esportiu
Version: 2.0
Author: Zahara Méndez Hernández
*/
/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0
}
table {
border-collapse:collapse;
border-spacing:0
}
fieldset, img {
border:0
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal
}
ol, ul, li {
list-style:none
}
caption, th {
text-align:left
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal
}
q:before, q:after {
content:''
}
a img {
border:none
} /* Gets rid of IE's blue borders */
/* LAYOUT */
.header {
display:block;
width:100%;
height:12em;
}
.header img {
float:left;
}
.lateral1 {
display:block;
float: left;
width:10em;
padding:1em;
}
.principal {
width:45em;
height:100%;
padding:1em;
margin-left:12em;
}
.principal form {
}
.lateral-wrap {
float: right;
width:15em;
height:25em;
overflow:hidden;
position:relative;
border:1px solid #B57C0F;
background:#FDB234;
margin:1em;
display:inlnine;
}
.lateral2 {
height:27em;
overflow:hidden;
overflow-y:hidden;
overflow-x:scroll;
}
.lateral2 div {
height:25em;
overflow:hidden;
padding:1em;
}
/*TIPOGRAPHY & COLOR*/
body {
font-family:Arial, sans-serif;
background:#FFD14B;
}
h1 {
font-family: Verdana, sans-serif;
font-size:3.5em;
padding:1em;
color:#5F4817;
text-transform:uppercase;
}
h2, h3, legend {
font-weight:600;
text-transform:uppercase;
}
.lateral1, .lateral2 {
margin:1em;
border:1px solid #B57C0F;
background:#FDB234;
}
.lateral2 {
border:none;
margin:0;
}
.lateral1 h2, .lateral2 h3 {
margin:1em 0;
color: #5C6F0D;
display: block;
width:100%;
border-bottom:1px solid #9CB113;
}
.lateral1 ul li {
text-indent:0.5em;
}
.lateral1 ul li a {
text-decoration:none;
}
.lateral1 ul li a:hover {
background-color:#FFD14B;
}
.lateral1 ul li a {
color: #000;
padding:0.3em;
display:block;
}
.principal legend, .principal h2 {
display: block;
width:100%;
color:#2072AF;
text-align:center;
margin: 1em 0;
}
.principal form fieldset {
margin-bottom:1em;
}
.principal form label {
width: 40%;
float:left;
clear:both;
text-align:right;
padding:0.5em;
}
.principal form input {
width: 12em;
float:left;
margin:0.5em;
border:1px solid #B57C0F;
background:#FFD14B;
}
.principal form input:focus {
background:#fff;
}
.principal form select {
width: 8em;
float:none;
border:1px solid #B57C0F;
background:#FFD14B;
margin:1em;
}
.principal form div {
margin-left:15em;
}
.principal h2, .principal p {
margin:1em;
}
.lateral2 {
}
.lateral2 ul {
margin:1em 0;
}
.lateral2 ul li {
text-indent:0.5em;
}
</style>
</head>
<body>
<div class="header"> <img src="http://www.zaharamh.com/web2/imatges/logo.png" alt="Gimnàs esportiu" title="Gimnàs esportiu" />
<h1>Gimnàs Esportiu</h1>
</div>
<div class="lateral1">
<h2>Activitats</h2>
<ul class="menu">
<li><a href="#aerobic">Aeròbic</a></li>
<li><a href="#bicicleta">Bicicleta</a></li>
<li><a href="#natacio">Natació</a></li>
<li><a href="#ioga">Ioga</a></li>
</ul>
<h2>Horaris</h2>
<ul class="menu">
<li><a href="#aerobic_horari">Aeròbic</a></li>
<li><a href="#bicicleta_horari">Bicicleta</a></li>
<li><a href="#natacio_horari">Natació</a></li>
<li><a href="#ioga_horari">Ioga</a></li>
</ul>
</div>
<div class="lateral-wrap">
<div class="lateral2">
<div> </div>
<div id="aerobic">
<h3>Aeròbic</h3>
<p>L'aeròbic és una modalitat de gimnàstica sueca amb acompanyament musical que consisteix en una sèrie d'exercicis que faciliten l'oxigenació dels pulmons i el bon funcionament del sistema cardiovascular.</p>
</div>
<div id="aerobic_horari">
<h3>Horaris d'aeròbic</h3>
<p>L'activitat d'aeròbic té els següents horaris:</p>
<ul>
<li>Dilluns 19-21h.</li>
<li>Dijous 12-15h.</li>
</ul>
</div>
<div id="bicicleta">
<h3>Bicicleta</h3>
<p>La bicicleta és un vehicle de dues rodes que normalment són de la mateixa mida. Serveix pel transport d'una o dues persones, a causa de la força que es fa sobre els pedals, transmesa al pinyó de la roda de darrera per una cadena circular. Les modalitats esportives que es poden practicar amb aquest vehicle són anomenades ciclisme. </p>
</div>
<div id="bicicleta_horari">
<h3>Horaris de bicicleta</h3>
<p>L'activitat de bicicleta té els següents horaris:</p>
<ul>
<li>Diumenge 12-16h.</li>
<li>Dijous 12-15h.</li>
</ul>
</div>
<div id="natacio">
<h3>Natació</h3>
<p>La natació és el mètode pel qual els éssers vius es desplacen a través de l'aigua en un mètode que no implica simplement el caminar pel fons. La natació és una activitat recreatiu popular i un esport competitiu. És una activitat física molt recomanable per a la majoria de les persones, però que requereix unes precaucions bàsiques. </p>
</div>
<div id="natacio_horari">
<h3>Horaris de natació</h3>
<p>L'activitat de natació té els següents horaris:</p>
<ul>
<li>Dilluns 13-15h.</li>
<li>Divendres 10-11h.</li>
</ul>
</div>
<div id="ioga">
<h3>Ioga</h3>
<p>El ioga s'originà abans de la nostra era a l'Índia, on persisteix com a tradició. Donat que els textos en sànscrit manquen de cronologia, es desconeix exactament quan els habitants del subcontinent índi van començar a realitzar aquest tipus de meditació amb postures físiques. </p>
</div>
<div id="ioga_horari">
<h3>Horaris de Ioga</h3>
<p>L'activitat de ioga té els següents horaris:</p>
<ul>
<li>Dimecres 18-20h.</li>
<li>Dissabte 10-12h.</li>
</ul>
</div>
</div>
</div>
<div class="principal">
<form action="envia.html" method="post">
<fieldset>
<legend>Dades personals</legend>
<label for="nom">Nom:</label>
<input type="text" name="nom" id="nom" size="30" maxlength="100" />
<label for="cognoms">Cognoms:</label>
<input type="text" name="cognoms" id="cognoms" size="30" maxlength="100" />
<label for="dni">DNI:</label>
<input type="text" name="dni" id="dni" size="30" maxlength="8" />
<label for="adre">Adreça:</label>
<input type="text" name="adre" id="adre" size="30" maxlength="150" />
<label for="localitat">Localitat:</label>
<input type="text" name="localitat" id="localitat" size="30" maxlength="100" />
<label for="cp">CP:</label>
<input type="text" name="cp" id="cp" size="30" maxlength="5" />
<label for="tel">Telèfon:</label>
<input type="text" name="tel" id="tel" size="30" maxlength="9" />
</fieldset>
<fieldset>
<legend>Activitats matriculades</legend>
<label for="activitats">Selecciona màxim dues activitats:</label>
<select name="activitat1" id="activitats">
<option value="Aerobic">Aerobic</option>
<option value="Bicicleta">Bicicleta</option>
<option value="Natacio">Natació</option>
<option value="Ioga">Ioga</option>
</select>
<select name="activitat2" id="activitat2">
<option value="Aerobic">Aerobic</option>
<option value="Bicicleta">Bicicleta</option>
<option value="Natacio">Natació</option>
<option value="Ioga">Ioga</option>
</select>
</fieldset>
<div>
<input type="reset" value="Esborrar les respostes" id="reset" />
<input type="submit" value="Enviar respostes" id="submit"/>
</div>
</form>
</div>
</body>
</html>
I don’t know how I feel about that. And I don’t know how I’d go about doing it- this world is so full of complications…