1

El código de css que tengo es el siguiente

header {
        width: 100%;
        height: 60px;
        background-color: #141616;
        z-index: 0;
        border-bottom: 1px solid #383838;
        color: #FFFFFF !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    body {
        margin: 0;
        background-color: #1E2222;
        z-index: 0;
        height: auto;
        width: 100%;
    }
    aside#left {
        width: 215px;
        background-color: #141616;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 999;
        border: 1px solid #383838;
        color: #FFFFFF !important;
    }
    footer {
        height: 42px;
        position: fixed;
        bottom: 0;
        background-color: #141616;
        z-index: 1;
        color: #FFFFFF !important;
        width: 100%;
        text-align: center;
    }
    main{
        margin-left: 217px;
        margin-top: 61px;
    }

y mi html

<body>
<header></header>
<aside id="left">
    <img src="logo.png">
</aside>
<main style="background-color: red;">
asdf
</main>
<footer>Carinae Gaming</footer>
</body>

estoy buscando la manera en la que se represente como la siguiente figura:

En este caso el sería el body ¿qué propiedades tengo que agregar?

1

3 respuestas 3

1

Que tal si intentas utilizando flex box.
A la hora de maquetar se hace mas fácil.

Pásate por la guía de flex box.

Espero te resulte útil.

* { margin: 0; padding: 0; }

.wrapper{
  border: 1px solid black;
  color: #000;
  margin: 10px auto;
  width: 90%;
}

header {
  background: coral;
  height: 5em;
  width: 100%;
}

.container {
  display: flex;
  height: 10em;
}

aside {
  background: lightgreen;
  width: 30%;
}

section {
  background: lightblue;
  width: 70%;
}

footer {
  background: lightgray;
  height: 5em;
  width: 100%;
}

.center {
  text-align: center;
  line-height: 4em;
  font-weight: bold;
}
<div class="wrapper">
  <header class="center">
    <span>Header</span>
  </header>
  <div class="container">
    <aside class="center">
      <span>Aside</span>
    </aside>
    <section class="center">
      <span>Body</span>
    </section>
  </div>
  <footer class="center">
    <span>Footer</span>
  </footer>
</div>

0

Una excelente opción para maquetar es utilizar bootstrap, ahorras tiempo y los sitios son responsivos, y tiene implementados un montón de cosas que solo sería copiar y pegar, espero te sea de ayuda.

Aquí te dejo como quedaría utilizando bootstrap, solo quedaría agregarle los css a su conveniencia.

<html lang="es">
<head>
    <title>Titulo de la web</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script Language=Javascript src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />
</head>

<body>
    <header>
       <h1>Mi sitio web</h1>
       <p>Mi sitio web creado en html5</p>
    </header>
    <section class="container-fluid">
        <div class="row">
            <aside class="col-xs-12 col-md-3">
                <h3>Titulo de contenido</h3>
                <p>contenido</p>
            </aside>
            <article class="col-xs-12 col-md-9">
                <h2>Titilo de contenido<h2>
                <p>Contenido (ademas de imagenes, citas, videos etc.)</p>
            </article>
        </div>
    </section>
    <footer>
        Creado por mi el 2011
    </footer>
</body>

0

Lo ideal sería usar Flexbox, te ahorrarías un motón de tiempo.

HTML

<body>
   <header>Header</header>
   <div class="container">
     <aside>Aside</aside>
     <section class="body">Body</section>  
   </div>
   <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

body > * {
  width: 100%;
  border: 1px solid #000;
  border-bottom-width: 0;
  box-sizing: border-box;
  text-align: center;
}

body > *:last-child {
  border-bottom-width: 1px;
}

header,
footer {
  min-height: 100px;
}

aside {
  width: 25%;
  border: 0 solid #000;
  border-right-width: 1px;
}

.container .body {
  width: 75%;
}

.container {
  display: flex;
  min-height: 300px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.