Floating sidebar is pushed down

[donboe]

Hi I have the following html:

<section class="main">
  <section class="content"></section>
  <section class="sidebar"></section>      
  <div class="col"></div>
</section>

and the following CSS:

.main {
  width: 60%;
  margin: 3em auto;
  overflow: hidden;
  position: relative;
  z-index: 4;
}

.sidebar,
.content {
  position: relative;    
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; 
}

.sidebar {
  width: 25%;
  padding-right: 2em;
  float: left;
  clear: left;
  font-size: .85em;    
}

.content {
  margin-left: 25%;
  padding-left: 2em;        
}

.col {
  width: 25%;
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 5px 0 5px -5px #333;    
}

But the sidebar is pushed down… What is wrong with this?

[RyanReese]

The floated element needs to come first in the source code. You need to switch your HTML. Put sidebar before content.

[donboe]

That is how it was. But I thought this would work. But hey I have to come up with another idea.

Edit: for smaller devices I need section.content to come above section.sidebar that’ss why I tried this.

Any way thank you Ryan.

[RyanReese]

http://codepen.io/ryanreese09/pen/yNJBdj?editors=110

I’m not sure what kind of width behavior you are after.

[donboe]

Hi Ryan. thanks again. That is the point in the actual design the sidebar is situated left. This how I got the design

[RyanReese]

@donboe

hat is the point in the actual design the sidebar is situated left.

That’s fine. I just changed the float direction. Very simple.

Please look. I still do not know what width behavior you want though.
http://codepen.io/ryanreese09/pen/yNJBdj

[donboe]

Hi Ryan. That is indeed where I was after. I am still playing arround with the width bahavior though. Thank you very much