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 dynamically assign css line-height to nested objects using jQuery?

    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 do caption hover effect on a background?

    How to make an image always load in the center of page?

    How to scale down CSS background-image when using various background-positions?

    How to make css-menu independent of the number of menu items?

    jQuery - How to aply custom CSS to fields which are not empty

    bar graph with CSS, how to get it filling in from bottom to top, not top to bottom?

    How to add image at right bottom div using css

    CSS: How do I 'raise' the last photo in this page?

    How to Display a div at same position on a any display irrespective of physical dimensions

    How to rotate text using CSS

    How to use external css file to style a javafx application

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How to changes styles on first elements using CSS

    How to divide a menu horizontaly between buttons , using CSS?

    show one div but hide all other divs is not working

    Styling the placeholder of an input, how can I do this? [duplicate]

    How to order rows (or divs) vertically using blueprint css?

    How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed
  • How to include css font in Firefox and internet explorer?

    How to setup a ASP template

    How to Overlap Parent Div From Child Div

    How to make heading appear in different colors

    hide/show element with add/removeClass with CSS transition

    How to add a border-bottom-image with css

    How to create this style of nav bar using exclusively HTML5 and CSS?

    How to determine why floated elements are affecting the heights of non-floated elements (D7 views blocks with zen theme)?

    How do I set dynamic width to a block element?

    How to make a background with 2 gradients in CSS