Div is not moving nearby divs

Question

I have something like this:

<div class="top">top</div>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

Relevant code in jsFiddle

As you can see, between top and bottom divs, there is a div container. I want this div container to move bottom dive as much as is needed (and i don't want it to be a fixed value - that means if, lets say left container will get much higher - the bottom div will be pushed down as well.

How can i do that?

I'm not quite sure what you mean. Do you mean you want equal height for `#left` and `#right` columns? — Sven Bieder, Jan 09 '13 at 18:11
Your left and right divs are positioned absolutely which takes them out of the flow of the document so the bottom element has no way of telling where they are. — j08691, Jan 09 '13 at 18:13

score 1 · Answer 1 · answered Jan 09 '13 at 18:15

1

Right now you're using absolute positions for the left/right div's, so you will always need to know the height in order to position the bottom div correctly. What you want to do is float these instead, then clear the floats in the bottom div. That way the left/right can be as high as their contents, and the bottom div will always appear below.

.bottom {
    clear: both;
}

.left {
    float: left;
    width: 50%;
    min-height: 50px;
}

.right {
    float: right;
    width: 50%;
    min-height: 150px;
}

I've modified your jsFiddle accordingly, and made the right div higher to show how the bottom always appears below.

answered Jan 09 '13 at 18:15

Rich Adams

26,096
4
39
62

Yes but before, the right column had fixed width while left one had the rest of the space. Now you made it 50/50 and i _need_ the right one to be fixed width. – ojek Jan 09 '13 at 18:21
you can always change the width and set it to whatever you want.. and thanks @Rich for the fiddle. – Praveen Puglia Jan 09 '13 at 18:23
@pjp: No not really. When i change width of the right column to 250px and then set left width to 100%, it crashes out. – ojek Jan 09 '13 at 18:25
you cant logically do that right? you are asking one child to take everything of the parent and then giving 250px to another child. It will crash right! What i meant was you can apply any width that logically fits both the divs inside the container. i.e. the total width of those two divs should not exceed the parent's width. – Praveen Puglia Jan 09 '13 at 18:32
@pjp: But how do i do that? You are telling me to put something like right width 150px, and left width ~70% ? I don't like it this way, because i will need to guess what percentage i should put. And what if my parents div width will change? What then? – ojek Jan 09 '13 at 18:36
see you gotta decide upon one thing and one think only. if you use percentage, you will have to calculate it for both the child divs and apply to them, you cant apply percentage to one and pixel values to the other one. thats a bad practice and it will crash. Try following a grid system. if you want the divs to be fluid, use percentage for both. if you want to have fixed right div anyway, and rest of the space for the left one, then make use of `overflow` peoperty. set it to `hidden`; – Praveen Puglia Jan 09 '13 at 18:40

score 1 · Accepted Answer · edited May 23 '17 at 11:56

This is a simple seeming problem that ends up being kind of tricky. The above suggestion about position:relative vs. position:absolute are a good first step. After that you need to make some room for the set width right div:

.left {
    height: 100%;
    min-height: 50px;
    border:1px dashed red;
    padding-right: 50px;      <---
}

Then float your right div in the space you made:

.right {
    float:right;              <---
    width: 50px;              (This needs to match the padding-right value above.)
    text-align: right;
    min-height: 50px;
    height: 100%;
    border:1px dashed blue;
}

Finally, put the right div before the left div in the html:

<div class="top">top</div>
<div class="container">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="bottom">bottom</div>

(Tested in Chrome and IE.)

See: Right div fix width, left div extend to max width?

You can check out a fiddle here: http://jsfiddle.net/x3QfG/1/

Will that work for you?

score 0 · Answer 3 · answered Jan 09 '13 at 18:19

Use floats rather than positioning them absolutely. That will make your architecture very much fluid and flexible.

After you apply necessary float values to your .left and .right, use a clearfix hack to contain your floated elements within the container. Now whenever any of the .left or .right divs increase in height, the bottom div will be pushed down.

score 0 · Answer 4 · answered Jan 09 '13 at 18:55

0

Make Container Relative and left and right absolute,and for positioning set width rather than using float.

answered Jan 09 '13 at 18:55

Shashi

474
6
21

Div is not moving nearby divs

4 Answers4