Sidebar, Navigation and Content how to do it?


Tags: html,css

Problem :

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!



Solution :

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>

    CSS Howto..

    how to put css in selected row in angular js?

    How should I convert this object from .PSD to HTML/CSS?

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How can I create a DIV that expands UP TO a height and then shows a scrollbar?

    How to apply multiple css radial gradients to a single element

    How to not display css padding when span element is empty

    How do I make the dropdown menu width the same as the tab size?

    How to preserve sibling element position when one sibling is absolutely positioned?

    How to put image and input on the same line with css

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    How to add nav icon images using max-width property in CSS

    How to Make A Fancy Arrow Using CSS?

    How can I get the images in my carousel to center?

    how to design a search panel like in mashable with css only

    how do i change button/image onclick to active state?

    How can I add a transition for this growing div?

    How to add a second slideshow on the same webpage

    How to get element to fill 100% height of parent

    CSS how can i turn the scrolling off during the animation?

    How do I center (vertically and horizontally) buttons in a div tag?

    CSS / Jquery How to auto-size containers and images

    How to reach CSS zen?

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    How to make an anchor fill the height of its containing div

    How to Move Bing Maps Menu to the Right side of Screen

    How to keep css style for only one element

    How to hover over a div to change just a part of its background?

    How can I get the name of a page via Laravel Blade

    How to create a sticky footer in CSS inside an absolutely positioned div?

    how to center text AND have max width of 800px in CSS?