CODEWITHSUNDEEP
csshtml
Elfayer
Elfayer

Reputation: 4561

How to manage div positionning?

I'm trying to position 3 div. One on the left side that takes 25% of the window, one on the right side that also takes 25% of the wondow, and the last one on the center that takes the remaining space. I don't know how to do that.

Here is what I have so far :

html:

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

css:

#left {
    border: 2px solid blue;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 25%;
}

#right {
    border: 2px solid blue;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 25%;
}

#center {
    border: 2px solid red;
    position: absolute;
    right: 25%;
    top: 0px;
    bottom: 0px;
    width: 50%;
}

http://jsfiddle.net/Elfayer/VLjvK/

Upvotes: 1

Views: 3532

Answers (7)

Umair Hafeez
Umair Hafeez

Reputation: 407

See this fiddle: http://jsfiddle.net/VLjvK/8/

#left {
    width: 25%;
    float: left;
    background-color: blue;
}
#right {
    width: 25%;
    float: right;
    background-color: blue;
}
#center {
    width: 50%;
    float: left;
    background-color: red;
}

Upvotes: 0

emiljoseph
emiljoseph

Reputation: 73

Try this one.. i have removed the absolute positioning.

        #left,#right, #center {
            height: 100%;
            float: left;
        }

        #left {
            background-color: red;
            width: 25%;
        }

        #right {
            background-color:green;
            width: 25%;
        }

        #center {
            background-color:yellow;
            width: 50%;
        }

Upvotes: 2

James
James

Reputation: 4580

Try this:

div {
    padding:0px;
    margin:0px;
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#left {
    border: 2px solid blue;
    width: 25%;
}

#right {
    border: 2px solid blue;
    width: 25%;
}
#center {
    border: 2px solid red;
    width: 50%;
}

Upvotes: 0

SaturnsEye
SaturnsEye

Reputation: 6509

Like this?

EXAMPLE

I removed the absolute position and changed it to relative.

Also added display:inline-block and altered the percentage of the divs to accomodate the border widths

Upvotes: 0

Harry
Harry

Reputation: 1699

The left and right sidebars can now be of any width. The main width will be the rest of the space. All divs can have their own padding and margin as appropriate.

http://jsfiddle.net/Elfayer/VLjvK/

html:

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

css:

div {
    box-sizing: border-box;
}

#left {
    border: 2px solid blue;
    width: 25%;
    float: left;
}

#right {
    border: 2px solid blue;
    width: 25%;
    float: right;
}
#center {
    border: 2px solid red;
}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Following is one of the ways to achieve this:

float all divs to left and assign height and width.

#center, #left, #right {
    float:left;
    height:100%;
}
#left, #right {
    width: 25%;
}
#center {
    width: 50%;
}

DEMO here.(with border)

DEMO here.(with background)

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115154

At the moment, the borders are contributing/adding to the widths of the divs.

Add this to your CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JSFiddle

Many would suggest NOT using absolute positioning as the primary layout method. This site might help you to more flexible solutions.

Learn Layout

Upvotes: 2

Related Questions