Positioning of header, footer and aside?

Question

Positioning of header, footer and aside?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

The css code I have is the following

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;
    }

and my html

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

I am looking for the way in which it is represented as the following figure:

In this case he would be the body, what properties do I have to add?

html css

asked by Omar Montoya 13.02.2017 в 01:39

source

3 answers

Create a modal window to implement full texts [closed] Control over ImageView, Android Studio

score 1 · Answer 1

What if you try using flex box .
At the time of layout it becomes easier.

Visit the flex box guide

I hope you find it useful.

* { 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>

score 0 · Answer 2

An excellent option to design is to use bootstrap, you save time and the sites are responsive, and you have implemented a lot of things that only copy and paste, I hope it helps you.

Here I leave you as it would be using bootstrap, only would be to add the css at your convenience.

<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>

score 0 · Answer 3

The ideal would be to use Flexbox, you would save a lot of time.

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;
}