CODEWITHSUNDEEP
jqueryhtmlcss
Michiel Peeters
Michiel Peeters

Reputation: 400

Div does not show up correctly after a jQuery function

I already have a solution for this problem but I do not understand why the div does not correctly show up after executing a jQuery function.

I have some divisions and one of them is absolute. I want to place the yellow division beside the green division and the teal division must go to the new row.

Only the teal one and the yellow one stays on the same place and when I add 94 pixels to margin-left of the teal one it goes to the new row but it does not correctly show up. It sounds like a weird problem, but if you try the html code and jQuery function you will understand :-)

This is the css I've put in the <head>:

.iconHolder {
    margin: 10px;
    height: 85px;
    width: 64px;
    float: left;
}

This is my html page (I also have a button on it where I can click to execute the jQuery function):

<div style="width: 336px; height: 315px; border: 1px solid black;">
    <div class="iconHolder" style="background-color: red;">
    </div>

    <div class="iconHolder" style="background-color: blue;">
    </div>

    <div class="iconHolder" style="background-color: green;">
    </div>

    <div class="iconHolder" style="background-color: yellow; position: absolute;">
    </div>

    <div class="iconHolder" style="background-color: teal;">
    </div>

    <div class="iconHolder" style="background-color: black;">
    </div>

    <div class="iconHolder" style="background-color: pink;">
    </div>

    <div class="iconHolder" style="background-color: gray;">
    </div>
</div>

This is my jQuery function where I was testing with:

$(function() {
  $("#btnTest").click(function() {
    var iconHolderGreen = $(".iconHolder:eq(2)");
    var iconHolderYellow = $(".iconHolder:eq(3)");
    var iconHolderTeal = $(".iconHolder:eq(4)");

    iconHolderYellow.css("top", iconHolderGreen.position().top);
    iconHolderYellow.css("left", iconHolderGreen.position().left + iconHolderGreen.width() + 20);

    iconHolderTeal.css("margin-left", 94);

// Or try iconHolderTeal.css("margin-left", 10);
  });
});

I can -84 pixels on the end to give the correct position to the teal division but I don't want to do that.

Can someone explain to me why this is not working correctly?

Upvotes: 0

Views: 261

Answers (3)

NGLN
NGLN

Reputation: 43659

Instead of:

    iconHolderTeal.css("margin-left", 94);

Use:

    iconHolderGreen.css("margin-right", 94);

See Updated demo fiddle.

Upvotes: 1

Sam Dufel
Sam Dufel

Reputation: 17598

Absolutely positioned elements don't reserve space in the document flow. You're essentially increasing the size needed by the teal div by 94, which causes it to no longer fit on the first line. It floats to the second line, with a left margin of 94.

You can, instead, move it down the the second line by increasing the right margin of the green div (it'll force the teal div off the first line, but won't impact the placement of the teal div on the second line).

If all you're trying to do is reorder the elements, there are much simpler ways of doing it. I'd recommend you add/remove elements with .show() / .hide() and reorder them with .insertBefore() / .insertAfter()

Upvotes: 1

thirtydot
thirtydot

Reputation: 228182

All the divs have float: left.

Only the yellow div has position: absolute, and so float: left becomes irrelevant - the element is absolutely positioned and is removed from the normal flow.

So, as far as the floated divs are concerned, the yellow div no longer exists. The yellow div overlaps the teal div. That's demonstrated here: http://jsfiddle.net/xgCbL/2/

Your fix was to add 94px of margin-left to the teal div:

That margin-left means there is no longer space on the first row for the teal div, so it drops down to the second row. Unfortunately, that also means that there are only 3 "slots" for floated elements on the second row, because the margin-left is taking one of the "slots".

Upvotes: 2

Related Questions