CSS, spostare un DIV a destra

**robynosse** · 11-06-2012, 14:44

Ciao a tutti,

sto studiando CSS tramite un libro e mi trovo con esempio che non riesco a capire, ci deve essere probabilmente un errore, in quanto il risultato ottenuto e' diverso da quello che propone il libro!!!
Non riesco ad ottenere il risultato che mi aspettavo di ottenere!Il div con id="right_side" dovrebbe stare alla destra, e invece sta attaccato alla parte centrale!!!
In pratica massimizzando la finestra il div left_side dovrebbe stare attaccato alla sinistra della finestra mentre il right_side dovrebbe stare a destra.
Il left_side e il right_side hanno una grandezza prestabilita, la parte centrale dovrebbe massimizzarsi occupando il resto dello spazio!

DOVE E' L'ERRORE?

Grazie,
Roberto

Il codice CSS e' il seguente:

codice:

body{
margin:0;
padding:0;
min-width:525px;
}

#header{
float:left;
width:100%;
background-color:#7152f4;
}

#footer{
float:left;
width:100%;
background-color:#7152f4;
}

#wrapper{
float:left;
padding-left:200px;
padding-right:125px;
}

#left_side{
position:relative;
float:left;
width:200px;
background-color:#52f471;
right:200px;
margin-left: -100%;
}

#right_side{
position:relative;
float:left;
width:125px;
background-color:#f452d5;
margin-right: -125px;
}

#content_area{
position:relative;
float:left;
background-color:#ffffff;
width:100%;
}

il codice html e' invece il seguente:

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//eEN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
});//fine jquery
</script>
<title>Esempi Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">HEADER</div>
<div id="wrapper">
 <div id="content_area">CONTENT</div>
 <div id="left_side">LEFT SIDE</div>
 <div id="right_side">RIGHT SIDE</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>

**Mich_** · 11-06-2012, 15:54

Non hai definito la larghezza del body, per cui ogni browser fa quel che vuole.

Prova ad aggiungere:

codice:

html, body {
  width: 100%;
}

**robynosse** · 11-06-2012, 16:21

Ciao,

grazie per la risposta!

Ma non funziona lo stesso.

Se provi la pagina vedrai che la parte superiore e inferiore occupano gia' il 100%, il problema sta nel #right_side

Roberto

**robynosse** · 11-06-2012, 16:31

Per facilita' posto il codice in un unico 'file':

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//eEN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>

</script>

<title>Test</title>
<style>
body{
margin:0;
padding:0;
min-width:525px;
}

#header{
float:left;
width:100%;
background-color:#7152f4;
}

#footer{
float:left;
width:100%;
background-color:#7152f4;
}

#wrapper{
float:left;
padding-left:200px;
padding-right:125px;
}

#left_side{
position:relative;
float:left;
width:200px;
background-color:#52f471;
right:200px;
margin-left: -100%;
}

#right_side{
position:relative;
float:left;
width:125px;
background-color:#f452d5;
margin-right: -125px;
}

#content_area{
position:relative;
float:left;
background-color:#ffffff;
width:100%;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="wrapper">
 <div id="content_area">CONTENT</div>
 <div id="left_side">LEFT SIDE</div>
 <div id="right_side">RIGHT SIDE</div>
</div>
<div id="footer">FOOTER</div>
</body>

</html>

**robynosse** · 13-06-2012, 00:05

up?

Grazie

Discussione: CSS, spostare un DIV a destra

Strumenti discussione

Ricerca discussione

Visualizza

CSS, spostare un DIV a destra

Permessi di invio