How to fill margin space with divs and give it styles?


Tags: html,css,responsive-design,width

Problem :

For my Website I’d like to have a banner on my header (with all things like logo, menu), which covers 100% of my screen width.

Fine and easy so far.

But now, after a certain screen resolution that banner should stop filling 100%, so I just gave a max-width: 1000px; and a margin: 0 auto; for centering my banner.

The Problem:

In this example, when the screen width exceeds 1000px I will get a margin left and margin right depending on screen width minus the 1000px.

I want each of that margins to have a gradient color or any other styles which other people might want to have.

For this I created a structure (below) which is missing the magic code that I don’t know about or maybe it even needs a complete different solution.

The basis of my structure / code are 3 divs aligned in one row with my banner in the center.

The point where I don’t come any further is how to give the "margins / fill ups” widths matching the remaining space.

Example structure:

HTML

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS

.container {
    width: 100%;
    height: 200px;
}
.center {
    width: 100%;
    /*below breakpoint 1000px*/

    max-width: 1000px;
    /*above breakpoint 1000px*/

    height: 200px;
    background: green;
    margin: 0 auto;
}
/*getting rid of the "fill ups" below breakpoint 1000px"*/

@media screen (max-width: 1000px) {
    .left {
        width: 0px;
        height: 0px;
    }
    .right {
        width: 0px;
        height: 0px;
    }
}
/*generating "fill ups" for remaining space between screen border and "center" (left and right)*/

@media screen (min-width: 1001px) {
    .left {
        width: 200px;
        /* width:50%; would like to have 50% of the remaining space (left)*/

        height: 200px;
        background: red;
        float: left;
    }
    .right {
        width: 200px;
        /* width:50%; would like to have 50% of the remaining space (right)*/

        height: 200px;
        background: blue;
        float: right;
    }
}


Solution :

You can use JS or jQuery for this.

Simply calculate the difference between the width of the .center <div> and the widow width, and then divide that by two to get equal ones on both sides.

jQuery

$(".left, .right").css({width: ($(window).width - $(".center").width()) / 2});

Actually, I guess you could do this with CSS's calc() as well, but this is slightly less dynamic because you have to input the width of the .center <div> (1000px in your case):

CSS

.left, .right {
    width: calc((100% - 1000px) / 2);
}

    CSS Howto..

    How to edit the CSS of a div that does not contain a H1 tag?

    How to apply css class to a based on respective $value in a of that row in a repeat region

    How to draw heart using HTML/CSS table?

    How do you center a line-wrapped

    How to magnify a pure CSS menu item when hovering using JS?

    How to I have a within a
  • align to the right side of the
  • How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

    How to make parent fullscreen div to grow with absolutely positioned child using CSS and jeet?

    How to apply StyleSheet to MVC3 website?

    How to make the footer stick to the bottom?

    How do I stagger divs like Google Plus?

    How to apply css to div which has no class?

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to make a div act as an infinite background

    How to reduce the length of the paragraph by dots(…)?

    How to add text to a CSS Sprite

    How to automatically resize a div based on background image size?

    How Can I Remove a Surrounding DIV with jQuery?

    using the unorthodox `head {display: block}` to show text to user?

    CSS - how to apply styles to first elements in a static generated list

    How to center the pagination in jQuery Bootstrap DataTables plugin?

    How can I make the first letter push itself into the paragraph like a newspaper style

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    How to center a div with dynamic & static content?

    How do I make this background repeat horizontally the entire way across the screen?

    How to layer a
    element ontop of a other elements

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How to style parent li elements of headers using CSS?

    How are the page-break properties in CSS supposed to work?

    How to override a display:none property applied to parent element in specific child elements