How to make my CSS responsive


Tags: html,css,html5,css3,responsive-design

Problem :

He I am working on a standard template for my applications. I suck in CSS and I have a headache working on making a good responsive design.

Now this is my idea:

enter image description here

This is how it works out:

demo

Now with some java-script I can probably do this but if this is possible in CSS it would be nice. My question is how can I make my design with just HTML and CSS.

A jsFiddle just fore fun:

jsFiddle

My css:

body{
    font-family:"Trebuchet MS",sans-serif;
    padding:0px;
    margin:0px;
}

#content{
    min-height: 100%;
    width: 100%;
    position: absolute;
    background-color: #5adc23;
}

input[type="button"]{
    border:2px outset rgb(166, 166, 166);
    display:inline-block;
}

input[type="button"]:hover{
    border:2px inset rgb(166, 166, 166);
    display:inline-block;
    cursor: pointer;
}

#mainbar{
    height: 31px;
    background-color: rgb(109, 164, 227);
    background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%);
}

    #mainbar_border{
        height: 100%;
        border-bottom:1px solid rgb(0, 0, 0);
        color: rgb(255, 255, 255); 
        font-family: 'Courier New', serif; 
        font-size: 21px; 
    }

#mainmenu{
    width: 40px;
    height: 96%;
    min-height: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
}

    #mainmenu_border{
        height: 99%;
        padding: 4px;
        padding-top: 46px;
        padding-bottom: 19px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
    }

        #mainmenu_item_container{
            list-style-type:none;
        }

#content_app{
    float: left;
    width: 88%;
    height: 96%;
}

    #content_app_border{
        height: 99%;
        padding: 4px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-width: 1px;
        border-right-style: solid;
    }

my html:

<div id='content' class='invoer'>    
    <div id='mainbar'>
        <div id='mainbar_border'>
            Mainbar
        </div>
    </div>
    <div id='mainmenu'>
        <div id='mainmenu_border'>
            <ul id='mainmenu_item_container'>
                <li><input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /></li>
                <li>button</li>
                <li>button</li>
            </ul>
        </div>
    </div>
    <div id='content_app'>
        <div id='content_app_border'>
            content
            <br>
                <br>
                    <br>
         </div>
     </div>
</div>


Solution :

This JsFiddle that will give you a rough version of the layout your diagram is looking for. From here you could use media queries as Jefferson suggested to create alternate versions for mobile devices. One tip - the divs that are here should be used just as a skeleton, I would not try to style them. If you start adding borders and some other styles to them the edges will no longer line up. Here is the CSS and HTML -

<div id="header">Header</div>
<div id="left_nav">Left Navigation</div>
<div id="content">Content</div>

div {
    position: absolute;
}

#header {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    background: blue;
}

#left_nav {
    top: 40px;
    left: 0px;
    width: 100px;
    bottom: 0px;
    background: red;
}

#content {
    top: 40px;
    left: 100px;
    bottom: 0px;
    right: 0px;
    background: green;
}

UPDATE: After your last comment I worked on this a bit more. First off, here are you criteria as I understand them:

  1. The left menu and the content should start 100px down from the top to accomodate the header.
  2. The left manu and content should extend at least to the bottom of the page.
  3. If either the left menu or content overflows beyond the bottom of the page, then: a. They should both expand down so that their height is equal. b. The entire page should scroll, instead of individual panels.

With this in mind, I was unable to produce all of these effects purely with CSS and HTML, so it looks like Javascript may be required here. I've updated this JSFiddle so that overflow from the #main_container is shown. At this point the solution accomplishes 1, 2 and 3b. To accomplish 3a I added this javascript:

$(document).ready(function(){
    var body_height = $("body").height();
    var body_scroll = $("body").get(0).scrollHeight;
    var menu_height = $("#left_nav").height();
    var content_height = $("#content").height();

    if(body_scroll > body_height && (menu_height != content_height)) {
        if(menu_height > content_height) {
            $("#content").css("height", (menu_height + "px"));
        } else {
            $("#left_nav").css("height", (content_height + "px"));
        }
    }
});

All this does is ensure that the #left_nav and #content are the same height. It does use JQuery, so if you're not using JQuery you'll have to rewrite it for pure Javascript. Though, if you aren't using JQuery, I'd highly recommend you get it here. It'll make your life a lot easier. Also take note of the #spike div, which provides an example of adding a "border" div inside one of the positioning elements.

Hope this helps.


    CSS Howto..

    How do you find the largest font size that won't break a given text?

    How to create a multi colored circle in html and css

    Jquery datepicker only year and month how to set CSS to hide calendar when there are severals datepickers?

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    How to apply a css rule based on the number of siblings an element has? [duplicate]

    How to break a line after some certain width in css

    How can I differentiate unordered lists in CSS?

    How to remove an css style from a div ?

    How do I display a randomly generated list in columns with CSS?

    How to select this td element?

    How to switch visibility of an HTML div in css for overlaying

    How to place rectangle inside image and make hover animation for it in CSS?

    How to select an html element that has two class names?

    How to create 3d ribbon box in css

    How do I interact with @font-face definitions using the Chrome debugger?

    Dropdown list doesn't show up, what am i doing wrong

    How to set inline css width using model values in c#, mvc

    How to design the data that you gathered from the table

    How to make a div fill the height until the next absolutely positioned element

    Sum of two divs widths is greater than parent width. How to make the browser resize the last div instead of moving it to the next line?

    How do I set a CSS url to an absolute location?

    How to make two tooltip ids independently close, and remember cookie?

    How to make my CSS responsive

    How to change font color inside nav element?

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How do I use a variable to get CSS info on an element?

    Smarty / How to include PHP function to compress CSS file

    how do I create unique looking angular ui bootstrap dialogs

    How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

    How do I make a horizontal sitemap using UL?