CODEWITHSUNDEEP
css
goto
goto

Reputation: 8162

Global Layout and positionning

I'm beginning the integration of a design.

first layout possible second layout possible

<body>
    <header></header>
    <nav id="main-nav">main-nav</nav>
    <nav id="sub-nav">sub-nav optionnal</nav>
    <section id="main-section">main section</section>
</body>

I tried to put the 2 nav bloc as absolute, but my content section is not dynamicly on their left. [fiddle]

header { height: 250px; }
#main-nav {
  width:150px;
  position: absolute;
  top: 150px;
  left: 0;
}
#main-section { margin-left:150px; }

I tried float left but my nav is not over the header.

Do you have some ideas? I can use bootstrap 3 even if the design has not to be responsive

Upvotes: 2

Views: 52

Answers (1)

&#193;lvaro Reneses
&#193;lvaro Reneses

Reputation: 701

What about this solution: http://codepen.io/anon/pen/pJzReW

header { 
  height: 250px;
  background-color: red;  
}
#main-nav, #sub-nav {
  width:150px;
  position: relative;
  float: left;
}
#main-nav {
  background-color: blue;
  margin-top: -100px;
  height: 500px;
}
#sub-nav {
  background-color: yellow;
  margin-top: -50px;
  height:  450px;
}
#main-section { 
  background-color: green;
  height: 400px;
}

With position: relative; the element's original space is kept (in this case, we use it for maintaining the width), but you can move them (in this case, using a negative margin top).

Edit

In case you want the navs to touch the bottom of the page, I think this approach can be better: http://codepen.io/anon/pen/MwgJEQ?editors=110

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
header { 
  height: 250px;
  background-color: red;
}
#main-nav, #sub-nav {
  width:150px;
  position: absolute;
}
#main-nav {
  background-color: blue;
  bottom: 0px;
  top: 100px;
}
#sub-nav {
  background-color: yellow;
  left: 150px;
  top: 150px;
  bottom: 0px;
}  
#main-section { 
  background-color: green;
  height: 400px;
  padding-left: 300px;
}

Upvotes: 1

Related Questions