Mick Mick - 5 months ago 20
HTML Question

Position Cascading DIVs underneath a fixed DIV

I want to create a series of cascading divs without specifiing a 'top' position . I just want them to display underneath a fixed div

My CSS looks like this

.fixed {
position:absolute ;
margin:10px ;
height:50px ;
width: 400px ;
background-color:#3640A8;
top: 30px ; }

.AllTabs {
display:block;
margin:10px ;
height:30px ;
width: 200px ;
background-color:#B53133;
}


My basic code is

<div class="Background">
<div id="fix" class="fixed"> This is fixed </div>
<div id="dv1" class="AllTabs" >Underneath Fixed Div </div>
<div id="dv2" class="AllTabs" >Underneath Fixed Div </div>
<div id="dv2" class="AllTabs" >Underneath Fixed Div </div>
<div id="dv2" class="AllTabs" >Underneath Fixed Div </div>
</div>


I seem to have tried every combination of fixed,relative float positions but noting seems to get my 4 divs to just sit under the fixed div . Can anyone let me know what I am doing wrong ?

Any help much appreciated

thanks Mick

Fiddle Display Example

Answer

Is this what you look for?

As the fixed is positioned absolute, it is taken out of flow making the other children act as it weren't there, hence not get pushed down as you might expect.

By giving the parent a top padding matching the fixed's height and top adjust will do the trick.

.Background {
  padding-top: 80px;
  background-color:#E9BF79;
  height:90%  
}
.fixed {
  position:absolute ; 
  margin:10px ;	
  height:50px ;
  width: 400px ;
  background-color:#3640A8;	
  top: 30px ;
}
.AllTabs {
  display:block;  
  margin:10px ;	
  height:30px ;
  width: 200px ;
  background-color:#B53133;		
}
<div class="Background">

  <div id="fix" class="fixed"> This is fixed </div>

  <div id="dv1" class="AllTabs"  >Underneath Fixed Div </div>
  <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
  <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
  <div id="dv2" class="AllTabs"  >Underneath Fixed Div </div>
  
</div>

Comments