How I can change the position of 3 div's to be side by side?

Question

how I can change the position of 3 div's to be side by side?

Here's my HTML Code:

    <body>
    <div class="div_header" id="div_header"></div>
    <div class="div_left" id="div_left"></div>
    <div class="div_main" id="div_main"></div>
    <div class="div_right" id="div_right"></div>
    </body>

Here's my CSS Code of the 3 Div's:

.div_header {
    height: 40px;
    width: 100%;
}

.div_left {
    float: left;
    min-height: 300px;
    width: 250px;
}

.div_main {
    min-height: 300px;
    margin-left: 250px;
    margin-right: 250px;
}

.div_right {
    float: right;
    min-height: 300px;
    width: 250px;
}

Thank you!

score 2 · Accepted Answer · answered Feb 09 '14 at 07:09

2

Rearrange your markup with the right-floated div before the main div

FIDDLE

<div class="div_header" id="div_header"></div>
<div class="div_left" id="div_left"></div>
<div class="div_right" id="div_right"></div>
<div class="div_main" id="div_main"></div>

answered Feb 09 '14 at 07:09

Danield

121,619
37
226
255

Interesting. Why does the order in which you process them matter if the widths are all sized appropriately? – leigero Feb 09 '14 at 07:12

score 1 · Answer 2 · answered Feb 09 '14 at 07:13

You can use css "calc" to control your main div's width than add float:left on it.

.div_main {
    float: left;
    min-height: 300px;
    width: calc(100% - 500px);  <-- 250px+250px(div-left's width + div-right's width)
    background-color: blue;
}

here is an example:

http://jsfiddle.net/creed88/ucKw7/

score 0 · Answer 3 · answered Feb 09 '14 at 07:08

0

Just add float: left; to .div_main

answered Feb 09 '14 at 07:08

TwilightSun

2,275
2
18
27

thank you, and how i can make the .div_main 100% width? – user3140252 Feb 09 '14 at 07:10

score 0 · Answer 4 · answered Feb 09 '14 at 07:14

You can add float: left; to .div_main or rearrange the div's.

If you don't have to use a float based layout, you can change the div's to be inline-block.

Div's are block level elements by default, and if you want things to be inline you need to change the display property.

Maybe the css below will work for you.

Fiddle

.div_left,
.div_main,
.div_right {
    display: inline-block;
    min-height: 300px;
    width: 250px;
}

score 0 · Answer 5 · answered Feb 09 '14 at 07:15

0

WORKING DEMO -> CLICK HERE

add a class .divpull and add float:left to the class :)

answered Feb 09 '14 at 07:15

Magesh Kumaar

1,485
2
10
29

How I can change the position of 3 div's to be side by side?

5 Answers5