How to fit elements in 100% width without absolute positioning?


Tags: html,layout,css-position,css

Problem :

I'm trying to do a 4-frame design with css, as in this code:

http://jsfiddle.net/7qBKJ/1/

But I don't want to use position:absolute;, and I'm trying to do it like this:

topframe: block;
left,right and centerframes: inline-block;

And I want to ensure there is, say, 200px of width in both rightframe and leftframe, and the remaining parts should be filled by centerframe. How can I manage this without absolute positioning?

I tried this, but it moves the frames up and down, when the screen width decreases :

http://jsfiddle.net/V4vAc/2/

in this fiddle, centerframe aligns with leftframe, since they are both inline-block, with centerframe rule margin-left:0px; but I have no idea how to set centerframe's right to align with rightframe's left, without specifying a width.

So how can I make #centerframe's width equal to screen width - 400 px ?

Thanks !



Solution :

What you have to do is to put both sidebars first in the flow of the document. Then you float the first sidebar right and the second one left.

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

/* main.css */
#left {
    width: 200px;
    height: 100px;
    background-color: blue;
    float: left;
}
#right {
    width: 200px;
    height: 100px;
    background-color: red;
    float: right;
}
#center {
    width: auto;
    height: 100px;
    background-color: green;
    margin: 0 200px;
}

http://jsfiddle.net/samgh/JjsFF/

If you want center to be the full width underneath the two sidebars, you can remove the margins. Hope this helps.


    CSS Howto..

    How can I find the css error when I run a jquery plugin on IE8?

    How can I have a CSS hover affect a different tag?

    How to link my css, js and image file link in django

    Load More / Show Less issues using jquery

    How to make link unclickable using CSS or jquery? [duplicate]

    Timeline divs not showing in Safari 5

    how to add classes to the dropdown menu in the TinyMCE table editor

    How to assign CSS to images which have specific extension, height and width?

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    jqueryui dialog with table — how to limit row height

    How to create correct .css for Html.TextBoxFor

    How to fade in a specific CSS property

    How to inserted HTML tag from pseudo-element content: [duplicate]

    CSS Layout. Can not get idea how to fix it

    How to display text over an image css [duplicate]

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    How to display a box of color beside a table row using CSS?

    How can I get two buttons and textareas from separate forms to display inline?

    How to make specific areas in a div clickable with css / js / anything

    How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

    How to hold three different text alignments in one CSS Box?

    How to use weather API to create my weather HTML page [closed]

    how to flip and rotate an image using css in chrome

    Writing “$('#dialog').modal('show');” as plain javascript?

    How to make common reusable css for almost every common things in web design?

    How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

    How can I append the images from this JSON file properly into the correct divs

    How to Inherit grandparent CSS not parent?

    how to remove a CSS property using jquery

    how to div.width css property using js or jquery?