CODEWITHSUNDEEP
htmlcss
RandomBeginner
RandomBeginner

Reputation: 562

How do I achieve this simple boxes layout

I'm trying to create the following layout using only regular CSS display properties (block, inline..) not using flex or grid.

enter image description here

The top thing(bandeau) should have a height of 100px and horizontal margins that are 50px.

Both the left and right columns should have a width of 100px.

The footer thingy(pied) should have a height of 80px and horizontal margins of 75px.

body {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100%;
}

.bandeau {
  height: 100px;
  background: white;
  margin: 0 50px;
}

.menuGauche {
  width: 50px;
  background: lightblue;
  height: calc(100% - 80px);
  margin: 0 0 80px 0;
  position: absolute;
}

.ecran {
  background: lightgreen;
  width: calc(100% - 100px);
  height: calc(100% - 80px);
  position: absolute;
  margin: 0 50px;
}

.menuDroite {
  width: 50px;
  background: lightblue;
  height: calc(100% - 80px);
  margin: 0 0 80px 0;
  position: absolute;
  left: calc(100% - 50px);
}

.pied {
  height: 80px;
  background: white;
  margin: 0 75px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
<div class="bandeau"></div>
<div class="menuGauche"></div>
<div class="ecran"></div>
<div class="menuDroite"></div>
<div class="pied"></div>

Upvotes: 0

Views: 73

Answers (3)

grey.dim
grey.dim

Reputation: 156

When I am doing this kind of layout, I try to group them horizontally, so the two columns will be wrapped in another div. similar to this:

<!DOCTYPE html>
<html>

<head>
  <style>
    .main {
      background-color: black;
    }

.top {
  margin: 0 50px;
  height: 100px;
  background-color: white;
}

.mid {
  height: 500px;
  background-color: green;
}

.left-col,
.right-col {
  height: 100%;
  width: 100px;
  background-color: blue;
}

.left-col {
  float: left;
}

.right-col {
  float: right;
}

.bottom {
  margin: 0 75px;
  height: 80px;
  background-color: white;
}
  </style>
</head>

<body>
  <div class="main">
    <div class="top"></div>
    <div class="mid">
      <div class="left-col"> </div>
      <div class="right-col"> </div>
    </div>
    <div class="bottom"> </div>
  </div>
</body>

</html>

I've used float and assume a height for the middle section as it was not specified. Here is a plunk. Hope this helps!

Upvotes: 0

caiovisk
caiovisk

Reputation: 3819

You can use the display:table on some elements to achieve the result. so wrap your main content then display it as table.

html,
body {
  height: 100%;
}
body{
margin: 0;
padding: 0;
background: black;
}

.bandeau{
    height: 100px;
    background: white;
    margin: 0 50px;
}
.content-wrapper {
    display: table;
    height: calc(100% - 180px);
    width: 100%;
}
.content-wrapper > div{
  display:table-cell;
}

.menuGauche,
.menuDroite{
    width: 100px;
    background: lightblue;
}

.ecran{
    background: lightgreen;
}

.pied{
    height: 80px;
    background: white;
    margin: 0 75px;
}
<body>

        <div class="bandeau"></div>

    <div class="content-wrapper">
      <div class="menuGauche"></div>
      <div class="ecran"></div>
      <div class="menuDroite"></div>
    </div>

      <div class="pied"></div>

</body>

Upvotes: -1

G-Cyrillus
G-Cyrillus

Reputation: 106038

As a beginner, you should avoid using absolute positionning and learn display , then float.

Nowdays display flex makes it easier.

You may also use tags which can be meaningfull for the contents they hold.

Here an example via flex:

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  display: flex;
}
.bandeau {
  height: 100px;
  background: white;
  margin: 0 50px;
}

.menuGauche {
  width: 50px;
  background: lightblue;
}

.ecran {
  background: lightgreen;
  flex: 1;
}

.menuDroite {
  width: 50px;
  background: lightblue;
}

.pied {
  height: 80px;
  background: white;
  margin: 0 75px;
}
<header class="bandeau"></header>
<main>
  <div class="menuGauche"></div>
  <div class="ecran">Play the snippet full page or play with:<a href="https://codepen.io/anon/pen/rJMrgz">https://codepen.io/anon/pen/rJMrgz</a>.</div>
  <div class="menuDroite"></div>
</main>
<footer class="pied"></footer>

Here is a tutorial (among others) to start with : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

( 101 advises : for french readers https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html )

Upvotes: 0

Related Questions