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 create a 3 column layout in css?

    How to inherit from ancestor and not parent in CSS?

    ExtJS - How to customize buttons?

    How to embedded all resources(css,js,images) into one single html file?

    How to have different transistions for background-image and text in a div using CSS

    Best Practice (jQuery, CSS): How to initialize hidden elements that will toggle visible?

    How to get these timestamps, which come after in the html, to float right on the same line

    css how to select a class in another div

    A CSS question: why is the Facebook Share button often styled as “icon” + text to fake as a button, and how to do it well?

    How to 'clip away' part of a div using CSS?

    How to keep css content position when zooming in and out?

    How to force the Sass interpreter to output non-css code?

    how to order CSS elements?

    How to change the width of css tab according to length of alphabet?

    HTML divs, how to wrap content?

    Yahoo's new blur effect in web mail - How?

    How to position heading (h1) placed on a background image and centered according to it outside of its container

    How to create a div in the same size as the contained image. Both should be responsive

    How to modify the layout of jQuery UI autocomplete combobox

    How to hide text using CSS?

    How to rotate an element and correctly position it with CSS or jQuery

    How to fix the shadow on my menu, Fiddle example shown

    How do I center a button in an angular-ui-grid cell?

    How to Create hidden CSS?

    jquery hide and show for printing

    How to do “display = block” using jquery for particular element

    Site Network Bar - Show Current Site Stats, CSS?

    How to align this CSS menu to the right of its containing div?

    How to translate html, css and js into one javascript (animation)

    How to change elements opacity based on if checkbox is or is not checked with CSS only?