KofYebs KofYebs - 4 months ago 9
CSS Question

How to style html layout with double sidebars

I'm trying to style a layout with a double sided bar. Left bar and right bar. I've tried solving it with the html/css below. below is the code could someone help me out.
example of the layout

CSS code below

#wrap {
margin: auto;
position: relative;
width: 700px;
border: 3px solid black;
background-color: grey;
height: 700px;
padding: 10px
}

#header {
margin: auto;
background-color: white;
height: 70px;
padding: 10px;
}

#left {
margin: auto;
width: 150px;
height: 70%;
background-color: white;
float: left;
padding: 10px;
}

#content{
background-color: red;
}

#right {
margin: auto;
width: 150px;
height: 70%;
background-color: white;
float: right;
padding: 10px;
}

#footer {
margin: auto;
height: 10%;
background-color: blue;
padding: 10px;
}


Here is the HTML

<div id="wrap">
<div id="header">
<p>header will be here</p>
</div>
<div id="left">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="content">
content here
</div>
<div id="right">
<p> name and address here</p>
</div>
<div id="footer">
<p> copyright </p>
</div>

</div>

Answer

That's called the Holy Grail Layout and it's been easily solved with Flexbox

#wrap {
  margin: auto;
  position: relative;
  width: 90%;
  border: 3px solid black;
  background-color: grey;
  height: 700px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
#header {
  background-color: pink;
  height: 70px;
  padding: 10px;
}
.center {
  flex: 1;
  display: flex;
}
#left {
  width: 150px;
  background-color: goldenrod;
  padding: 10px;
}
#content {
  background-color: red;
  flex: 1
}
#right {
  width: 150px;
  background-color: #c0ffee;
  padding: 10px;
}
#footer {
  height: 10%;
  background-color: blue;
  padding: 10px;
}
<div id="wrap">
  <div id="header">
    <p>header will be here</p>
  </div>
  <div class="center">
    <div id="left">
      <ul>
        <li><a href="#">Link 1</a>
        </li>
        <li><a href="#">Link 2</a>
        </li>
        <li><a href="#">Link 3</a>
        </li>
      </ul>
    </div>
    <div id="content">
      content here
    </div>
    <div id="right">
      <p>name and address here</p>
    </div>
  </div>
  <div id="footer">
    <p>copyright</p>
  </div>

</div>