Div laterali

**pippuccio76** · 13-10-2012, 10:22

Salve ho un sito formato da diversi div inseriti tutti in un div container+ 1 div footer, volevo inserire un div laterale sinistro affiancato al conteiner.
Pensavo che fosse sufficente mettere un div prima del div container e dargli float left così:

<div id="colonna_sinistra">

<div id="container">

</div> <!--chiudo il container--!>

</div> <!--chiudo la colonna sinistra--!>

<div id ="footer"> </div>

#container {
display:block;
width:950px;
margin:0 auto 0 auto;
}
#pubblicita_sinistra {
display:block;
float:left;
}

ma accanto alla colonna sinistra rimane tutto vuoto e il container si sposta sotto dove finisce la colonna sinistra.

**Prill** · 13-10-2012, 10:34

Ciao, se vuoi una colonna sinistra affiancata al container, il container stesso non deve essere inserito dentro alla colonna sinistra. Quindi dovresti avere un div contenitore generale, largo 950 + la larghezza della colonna sinistra, al suo interno il div sinistro (poi lo chiudi) e quindi l'altro div, affiancati col float (il float puo andare anche solo sul primo e l'altro risalirà da sé, specifica però la larghezza per tutt'e due)

**pippuccio76** · 14-10-2012, 11:59

Non ci sono riuscito , il sito è questo:

www.asptrio.altervista.org

questo il layout che vorrei :

layout

questo il css , un template già pronto che ho adattato solo per alcune cose come la grandezza dell'h1:

codice:

* { margin:0; padding:0; }
body {
  background-color:#4D4D4D
}
p {
  font:normal 13px/20px Verdana, Geneva, sans-serif;
  color:#333;
  padding:0;
  margin:10px 0 10px 0px;
}
#container {
  width:950px;
  margin:0 auto;
}
#masthead h1 {
  display:block;
  float:left;
  width:382px;
  height:121px;
    background:url(logo.png) no-repeat 0 0;
  text-indent:-9999px;
}

#masthead ul {
  display:block;
  float:left;
  height:121px;
  list-style:none;
  background:url(nav-sprite.png) no-repeat 0 0;
}
#masthead ul li {
  display:block;
  height:121px;
  float:left;
}
#home {
  width:115px;
}
#portfolio {
  width:160px;
}
#services {
  width:144px;
}
#contact {
  width:147px;
}
#masthead ul li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:-9999px;
  outline:none;
}
li#home a:hover {
  background:url(nav-sprite.png) no-repeat 0 -121px;
}
li#portfolio a:hover {
  background:url(nav-sprite.png) no-repeat -115px -121px;
}
li#services a:hover {
  background:url(nav-sprite.png) no-repeat -275px -121px;
}
li#contact a:hover {
  background:url(nav-sprite.png) no-repeat -419px -121px;
}
#featured-area {
  clear:both;
  height:304px;
  background:url(bg-featured.jpg) no-repeat 0 0;
}
#description {
  width:455px;
  margin:55px 0 55px 20px;
  float:left;
}
#description p {
  font:bold 30px/32px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#fff;
}
#preview {
  width:445px;
  margin:55px 20px 55px 0;
  float:right;
}
#main-content {
  width:100%;
  float:left;
}
#left-column {
  width:430px;
  margin-left:20px;
  float:left;
}
#right-column {
  width:475px;
  float:right;
}
h2#about-us {
  display:block;
  width:100%;
  height:45px;
  text-indent:-9999px;
  background:url(images/text-about.jpg) no-repeat 0 0;
}
h2#featured-work {
  display:block;
  width:100%;
  height:45px;
  text-indent:-9999px;
  background: url(images/text-featured.jpg) no-repeat 0 0;
  clear:both;
}
div.featured {
  width:100%;
  height:166px;
  padding:10px 0 0 10px;
  background: url(images/featured-work-bg.jpg) no-repeat 0 0;
}
div.featured div.content {
  width:455px;
  height:146px;
}
#footer {
  clear:both;
  background-color:#333;
}
#footer p {
  margin:0 auto;
  padding:0;
  width:950px;
  color:#ccc;
  height:50px;
  line-height:50px;
}

Come posso inserire un div laterale a sinistra e magari inserirne uno a destra?

**pippuccio76** · 14-10-2012, 15:44

Scasate , il sito è questo (volevo modificare ma è passato troppo) :

asptrio

**Prill** · 15-10-2012, 11:06

Esempio (ho inserito solo la prima parte dei contenuti, il css è nella pagina per mia comodità, ma è da portare fuori):

codice:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
body {
  background-color:#4d4d4d;
}
#main {
	width: 1260px;
	margin:0 auto;
	background-color:#FF99FF /* da rimuovere, serve per colorare a destra e sinistra lo spazio corrispondente alle colonne laterali */
}
#left {
	float:left;
	width: 140px;
}

#right {
	float:right;
	width: 140px;
}
#rightContent, #leftContent{
	padding:5px;
}
#content {
	width: 950px;
	padding:0 15px;
	float:left;
	background-color:#4d4d4d;
}
#footer {
  clear:both;
	width:100%;
  background-color:#333;
	color:#ccc;
  height:50px;
  line-height:50px;
	text-align:center;
}
#masthead {
	width:950px;
  height:121px;
}
#masthead h1 {
  float:left;
  width:382px;
  height:121px;
  background:url(logo.png) no-repeat 0 0;
  text-indent:-9999px;
}
#masthead h1 a {
  display:block;
  width:100%;
  height:100%;
  background:url(logo.png) no-repeat 0 0;
  outline:none;
}
#masthead ul {
  float:left;
  width:566px;
  height:121px;
  list-style:none;
  background:url(nav-sprite.png) no-repeat 0 0;
}
#masthead ul li {
  display:block;
  height:121px;
  float:left;
}
#home {
  width:115px;
}
#portfolio {
  width:160px;
}
#services {
  width:144px;
}
#contact {
  width:147px;
}
#masthead ul li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:-9999px;
  outline:none;
}
li#home a:hover {
  background:url(nav-sprite.png) no-repeat 0 -121px;
}
li#portfolio a:hover {
  background:url(nav-sprite.png) no-repeat -115px -121px;
}
li#services a:hover {
  background:url(nav-sprite.png) no-repeat -275px -121px;
}
li#contact a:hover {
  background:url(nav-sprite.png) no-repeat -419px -121px;
}
#featured-area {
	width:950px;
  height:304px;
  background:url(bg-featured.jpg) no-repeat 0 0;
}
#description {
  width:455px;
  margin:55px 0 55px 20px;
  float:left;
}
#description p {
  font:bold 30px/32px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#fff;
}
#preview {
  width:445px;
  margin:55px 20px 55px 0;
  float:right;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="left">
    <div id="leftContent">CONTENUTI COLONNA SINISTRA</div>
  </div>
  <div id="content">
    <div id="masthead">
      <h1>Portfolio Web Design</h1>
      <ul>
        <li id="home">Home
        <li id="portfolio">Portfolio
        <li id="services">Dove siamo
	<li id="contact">Contatti[/list]
    </div>
    <div id="featured-area">
      <div id="description">
        

Queste sono solo alcune realizzazioni.</p>
      </div>
	<div id="preview"> [img]images/sample-preview.jpg[/img] </div>
    </div>
  </div>

  <div id="right">
    <div id="rightContent">CONTENUTI COLONNA DESTRA</div>
  </div>

  <div id="footer">©2012 Il sito è a cura dello studio ... tutti i diritti riservati.</div>
</div>
</body>
</html>

P.S.: se modifichi la larghezza delle colonne laterali, sarà da modificare anche quella del contenitore generale che ho chiamato main che è da calcolare in base a larghezza di left+right+content+padding di content

Discussione: Div laterali

Strumenti discussione

Ricerca discussione

Visualizza

Div laterali

Permessi di invio