martijnmelchers martijnmelchers - 28 days ago 8
CSS Question

Sidebar, Navigation and Content how to do it?

I have a problem with my CSS.
I am working on a website which I want to make my own CSS for, I tried to make it myself but I can not figure it out.

I am aiming for a website that looks like this
enter image description here
But currently looks like this:
Current look

I tried everything I could. I am using some CSS right now but it isn't working how I want it too.

html {
background: #ECF0F1;
}
.sidebar {
width: 20%;
height: 100%;
float: left;
background: #043D5D;
position: fixed;
top: 50px;
left: 0;
}
.sidebar p{
margin-left: 10px;
color: #FFF;
}
.nav{
float: left;
position: fixed;
width: 100%;
height: 50px;
background: #043D5D;
top:0;
left:0;
}
.nav .logo img{
height: 40px;
}
.content{
width: 80%;
height: 100%;
float: left;
top: 55px;
position: fixed;
margin-left: 21%;
}


Fiddle: https://jsfiddle.net/bqgpn6hj/

Is there a better way to do this? Thanks in advance!

Answer

Check out my jsfiddle here: https://jsfiddle.net/bqgpn6hj/1/

I hope it can be usefull for you.

Code below:

body {
  background: #ECF0F1;
}
.clear {
  clear:both;
}
.nav {
  width:100%;
  float: left;
  background:red;
}
.logo{
  width: 20%;
  float:left;
}
.search {
  width:78%;
  float:left;
  padding: 10px 1%;
  text-align:right;
}
.sidebar {
  width: 16%;
  background: green;
  float:left;
  padding: 2% 2%;
}
.content {
  width: 80%;
  float:left;
  position:relative;
  background: yellow;
  height: 466px;
}
.subbar {
  background: gray;
  height: 200px;
}
.content .bottom {
  position:absolute;
  bottom:0px;
  background: blue;
  width:90%;
  padding: 5%;
}

And HTML

<body>    
     <div class="nav">
          <div class="logo">
              <img src="http://placehold.it/40x40">EasyMusic
          </div>
          <div class="search">
              <input type="text">
          </div>
     </div>
     <div class="clear"></div>
     <div class="sidebar">
          <div class="subbar" id="1">
            <p>Sidebar, links here</p>
          </div>
          <div class="subbar" id="2">
            <p>Bottom</p>
          </div>
     </div>
     <div class="content">
          <p>Content, everything here</p>
          <div class="bottom">
            bottom
          </div>
     </div>
      <div class="clear"></div>
    </body>
Comments