[Resolvido] Problema com blocos

[MatheusSilva 0]

ola a todos, estou tentando fazer isso:

 

 

eis o código.

html

<div id="content">
   	<div id="noticias">
       	<h1 class="titulo">Noticias</h1>
           	<div id="notice">
           	</div>
   	</div><!--Noticias-->

   	<div id="cursos">
       	<h1 class="title">Cursos</h1>
           	<div id="courses">
           	</div>
   	</div><!--Cursos-->

   	<div id="clear">
   	</div><!--clear-->

   	<div id="news">
       	<h1>Cadastre-se</h1>
           	<span>Também se cadastre para receber novidade de cursos.</span>
               	<form id="form1" name="form1" method="post" action="newsletter/cadastro.php" enctype="multipart/form-data">
                   	<span>Nome:</span>
                   	<input type="text" name="nome" id="nome" value="Digite seu nome" onfocus="if(this.value=='Digite seu nome') this.value='';"  onblur="if(this.value=='') this.value='Digite seu nome';"/>
                   	<br />
                   	<span>Email:</span>
                   	<input type="text" name="email" id="email" value="Digite um email valido" onfocus="if(this.value=='Digite um email valido') this.value='';"  onblur="if(this.value=='Digite um email valido') this.value='';" />
                   	<input name="acao" type="submit"  class="btn" value="Cadastrar" />
                   	<input name="acao" type="hidden" value="Cadastrar" />
              	</form>
   	</div><!--News-->
</div><!--content -->

 

css

/*Noticias*/
#noticias{
margin-left:10px;
}
#noticias .titulo{
z-index: 3;
position:absolute;
left:436px;
top:503px;
background:#cacaca;
padding:8px 15px;
font-size:20px;
}
#notice{
float:left;
border:3px solid #333;
z-index: 2;
height:300px;
width:503px;
}

/*cursos*/
#cursos{
margin-right: 10px;
}
#cursos .title{
  z-index: 3;
  position:absolute;
  left:940px;
  top:503px;
  background:#cacaca;
  padding:8px 15px;
  font-size:20px;
}
#courses{
float:right;
border:3px solid #333;
z-index: 2;
height:300px;
width:430px;

}


/*Newsletter*/
#news {
border:3px solid #333;
margin: 15px 10px 5px 10px;
width:503px;
}
#news h1{
position:absolute;
background:#cacaca;
padding:5px;
font-size:20px;
top:807px;
}

 

só que fazendo isso eu preciso colocar uma margem a mais no elemento que ta dentro da box para que o "titulozinho" nao fique em cima do que ta dentro.

alguem sabe como posso fazer isso para que nao ocorra esse tipo de...como posso chamar......esse problema do titulo ficar em cima do conteudo dentro do container.

 

obrigado.

[William Bruno 1501]

use padding em cada box container.

Entendeu ?

[MatheusSilva 0]

pensei que teria outro jeito....obrigado.