Home/ Questions/Q 8441855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:40:55+00:00

I have a css layout. I have the divs #header, #content and #footer inside

  • 0

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:&quot;contacto@felipelopez.com.ar&quot;">contacto@felipelopez.com.ar</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:&quot;contacto@felipelopez.com.ar&quot;">contacto@felipelopez.com.ar</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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d suggest that you add overflow: hidden to the #header css, which forces it expand to ‘wrap’ around its child elements, and does so with no need for extraneous mark-up.

    • 0