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

StackOverflow https://stackoverflow.com/questions/21656359

  •  08-10-2022
  •  | 
  •  

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!

Was it helpful?

Solution

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>

OTHER TIPS

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/

Just add float: left; to .div_main

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;
}

WORKING DEMO -> CLICK HERE

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top