I have a css layout. I have the divs #header, #content and #footer inside a #wrapper. The issue is that the explorer shows the h1 and h2 elements inside the #content div, not in #header where these elements actually are. Insofar that increases the top-margin of #content, h1 and h2 go down too. Why could it be happening?
I would like that this elements stay horizontally aligned (one at right and the other at left) in the same way that the email and the Facebook button are on the footer.
Here is the HTML:
<!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>Felipe López</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=148925589393";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="wrapper">
<div id="header">
<h1 class="divisor_izquierda">Felipe López</h1>
<h2 class="divisor_derecha">DISE?O WEB</h2>
</div>
<div id="content">
<h3>Hola!</h3>
<p>Me llamo Felipe y tengo 21 a?os. Desde los 15 que aprendo Dise?o Web como autodidacta y en la actualidad me encuentro cursando la carrera de <a href="#">Dise?o de Multimedios</a>. Podés descargar <a href="#">mi Currículum.</a></p>
<h3>Qué hago?</h3>
<p>Los sitios web que dise?o y programo tienen las siguientes caracteristicas:</p>
<ul>
<li>Sistema de autoadministración.</li>
<li>Posicionamiento en motores de búsqueda.</li>
<li>Suscripción y envío de newsletters.</li>
<li>Indexación con redes sociales.</li>
<li>Sistema de ecommerce.</li>
</ul>
<h3>Algunos trabajos</h3>
<p><a href="#">www.nicolasgolub.com.ar</a><br />
Dise?o, Maquetacion HTML, Cabecera en Flash, Instalación de Wordpress y creación de Tema para Wordpress. Sitio administrado por el cliente.</p>
<p><a href="#">www.davidaviles.com.ar</a><br />
Instalación de Wordpress, instalación y modificación de Tema de Wordpress.</p>
<p><a href="#">www.luzlo.com.ar</a><br />
Instalación de Wordpress, instalación y modificación de Tema de Wordpress.</p>
<p><a href="#">www.movpatriotico.com.ar </a><br />
Maquetacion HTML y Cabecera en Flash.</p>
<p><a href="#">www.fiestadelaluz.com.ar</a><br />
Maquetacion HTML y Cabecera en Flash.</p>
<h3>Contactame</h3>
<p> Mandame un email a <a href="mailto:"[email protected]"">[email protected]</a> o un mensaje personal por <a href="https://www.facebook.com/unapersona">Facebook</a>.</p>
</div>
<div id="footer">
<span class="divisor_izquierda"><div class="fb-like" data-href="http://www.felipelopez.com.ar" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="recommend" data-font="arial"></div></span>
<span class="divisor_derecha"><a href="mailto:"[email protected]"">[email protected]</a></span>
</div>
</div>
</body>
</html>
And the CSS:
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #EBEBEB;
font-family: Calibri;
font-size: 16px;
}
ul {
text-transform: none;
}
a {
font-style: italic;
color: #000;
text-decoration: none;
}
/*h1 {
font-size: 36px;
position: relative;
}
h3 {
margin-top: 20px;
}
*/
p {
margin-bottom: 8px;
}
#wrapper {
width: 1014px;
margin: 0 auto 0 auto;
position: relative;
}
#header {
position: inherit;
float: right;
}
#wrapper #header p {
color: #F90;
font-family: Euphemia;
text-align: center;
font-weight: normal;
float: left;
font-size: 36px;
clear: both;
width: 50%;
}
#wrapper #header img {
float: right;
width: 30%;
}
#content {
background-color:#FFF;
padding: 42px;
padding-bottom: 34px;
position: relative;
}
.divisor_izquierda {
text-align: left;
float: left;
width: 50%;
}
.divisor_derecha {
text-align: right;
float: left;
width: 50%;
}
Thank you!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
