CODEWITHSUNDEEP
htmlcsspositionfixed
HelloDarkness
HelloDarkness

Reputation: 15

Div(s) between two fixed elements (header and footer)

Here's what I want to do:

Layout illustration

I hope I've explained it well with the picture. I searched a lot on this topic but I really don't want to get into tons of functions. I would like to solve it as simple as possible.

The problem is because I want all to be real-time responsive if user changes browser size or for display on different screens.

Also, about adding those images inside of left menu; they are 1:1 sides ratio, but I want to scale them so together they will be 100% height of left menu (blue in picture).

Here is what I have so far:

HTML/CSS:

header {
   background-color: red;
   position: relative;
   width: 100%;
}

#allContents {
   position: relative; /*minus širina headerja in footerja!!*/
   height: 100%;
   width: 100%;
   float: left;
   clear: both;
   z-index: 10;
}

#leftMenu {
   position: relative;
   background-color: green;
   width: 10%;
   height: 100%;
   z-index:10; 
}

#mainContent {
   background-color: yellow;
   size: 20%;
   float: left;
   position: relative;
}

#rightMenu {
   background-color: orange;
   float: left;
   position: relative;
   top: 0;
   right: 0;
   width: 25%;
}

footer {
   clear: both;
   background-color: blue;
   position: fixed;
   bottom: 0px;
   width: 100%;
}
<header>
   Fixed. Some header content... also image on the left.
</header>

<div id="allContents">
   <div id="leftMenu">On left, between header and footer, but never behind. Always between.</div>
   <div id="mainContent">Between all 4 elements. Here will be main content with scrolling.</div>
   <div id="rightMenu">Div with some news.</div>
</div>

<footer>
   Fixed footer.
</footer>

Upvotes: 0

Views: 1171

Answers (2)

Head In Cloud
Head In Cloud

Reputation: 2051

Are you looking for this?

header {
   background-color: red;
   position: relative;
   width: 100%;
}

#allContents {
   position: relative; /*minus širina headerja in footerja!!*/
   height: 100%;
   width: 100%;
   float: left;
   clear: both;
   z-index: 10;
    display: -webkit-flex;
    display: flex;
}

#leftMenu {
   position: relative;
   background-color: green;
   width: 10%;
   height: 100%;
   z-index:10; 
 
}

#mainContent {
   background-color: yellow;
   size: 20%;
   float: left;
   position: relative;
 
}

#rightMenu {
   background-color: orange;
   float: left;
   position: relative;
   top: 0;
   right: 0;
   width: 25%;
  
}
<header>
   Fixed. Some header content... also image on the left.
</header>

<div id="allContents">
   <div id="leftMenu">On left, between header and footer, but never behind. Always between.</div>
   <div id="mainContent">Between all 4 elements. Here will be main content with scrolling.</div>
   <div id="rightMenu">Div with some news.</div>
</div>

<footer>
   Fixed footer.
</footer>

Upvotes: 0

tcasey
tcasey

Reputation: 409

Sounds like you would benefit tremendously from using Flexboxes. They allow you to format the exact structure you want using CSS and they are responsive to window size. Flexbox Froggy is a great resource to learn how to use them.

Upvotes: 1

Related Questions