CODEWITHSUNDEEP
htmlcss
martijnmelchers
martijnmelchers

Reputation: 51

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!

Upvotes: 1

Views: 76

Answers (1)

TheBosti
TheBosti

Reputation: 1425

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>

Upvotes: 1

Related Questions