How to achieve this CSS layout? [closed]


Tags: css,layout

Problem :

I'm not very good at describing this issue in words, so i painted a small picture with the properties the layout should have.

enter image description here

I tried several possibilities but i wasn't able to achieve this without absolute positioning and flexboxes. I'm also not so familiar with css hacks.

Does anybody have a solution for this type of layout with CSS only and IE9+ (if possible IE8) compatibility?

Thanks in advance



Solution :

Here is my solution, good luck bro and welcome to the world of front end.

Solution Here

HTML:

<body>
    <div class="wrapper">
        <div id="header"></div>
        <div id = "content">
            <div class="sidenav"></div>
            <div class="info"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>

CSS:

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    min-height:100%;
    position:relative;
}

#header {
    position: fixed;
    top: 0;
    z-index: 9999;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    height: 4em;
    background: navy;
}

#footer {
    width: 100%;
    height: 4em;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: pink;
}

#content {
    width: 100%;
    height: 2000px;
    display: inline-block;
    padding-top: 4em; /*same height header*/
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 4em;
    /* or:
    padding: 4em 0 4em 0;
    margin: 1em 0 1em 0;
   */
}

.sidenav {
    float:left;
    width:500px;
    height: 100%;
    background-color: gray;
    margin-right: 1em;
}

.info {
    overflow:hidden;
    height: 100%;
    background-color: purple;
}

    CSS Howto..

    How do I calculate percentage based on pixels for CSS conversion?

    How to link to a “tab” on my website

    How to protect my injected elements CSS?

    How do I apply a CSS to a clutter stage?

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    How to apply css selector in ZK

    how to align a sidebar to the right with css?

    Show/hide without using CSS

    How to style parent li elements of headers using CSS?

    How to make attractive dropdown menu using css3? [closed]

    How to same element with unique XPath/CSS selector by both ID and Class?

    How can I hide elements on a HTML page until a user hovers over it using CSS?

    How can I apply CSS to dropdownlists?

    How can I align my form to the center of the background? CSS

    How to selectively load/use CSS for YUI modules?

    how to make the navbar fixed to top

    Javascript Slider not showing and Graph tips

    How do i shrink my link menu

    How to modify CSS or JS file from “materialize:materialize” package in Meteor

    What is a CSS Parse error and how do I fix it?

    How to vertically center image and text in a block element? [CSS]

    css issue in IE7, not sure how to fix

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to cut down HTTP request on js/css in laravel

    How to center a rotated div inside a table element with a specific width?

    How to reorder controls of WYSIWYG editor

    CSS - How do you make text overflow out both ends of a div?

    How do I get rid of this blue halo around the close dialog button with jqueryui?

    How to set border to 0 in this table

    Google font shows boxes in Internet Explorer 8 - IE 8