Reputation: 923

HTML tag <hr> behind <div>

I have the following HTML code:

<div id="my_div" style="height:400px"></div>
<hr>
<input type="text" id="my_input">

my_div will be populated with data later (via jQuery) but the thing is that the

<hr>

appears behind my_div but my_input is where it should be (that is, after my_div).

Does anyone know why?

EDIT: A bootstrap css class (span10) was causing this problem. After I removed that class, it worked.

Upvotes: 0

Answers (7)

kettlepot

Reputation: 11011

Judging from the information you've provided, I think it might depend on the content you're placing into it. As you can see here, the <hr> is displaying below the div, as it should.

One case I can think of that might be causing this is if you're inserting content that is floated using CSS inside the div. In that case, the div will "shrink" to the height of the last in-flow (not floated) element it contains, which will make it shrink to a height of 0 if there are no non-floated elements inside it.

If that is your case, then you can work around that by adding the following CSS to your #my_div:

#my_div {
  overflow: hidden;
}

There are also other workarounds for this kind of problem, but this one is the easiest to try out in order to check if that's the problem affecting you.

Another issue that could possibly be affecting you is that the height of the div is restricted to 400px. If the content of the div exceeds that height, it won't push the div's boundaries down, but instead it will overflow (quick demonstration). If that's the case, you can either set the div's height to auto, so that it will stretch along with the content, or you can make sure the content won't get past the div's height by tweaking it.

Upvotes: 1

averageman

Reputation: 923

A bootstrap css class (span10) was causing this issue. After removing it from my_div, it worked.

Upvotes: 1

Kevin Lynch

Reputation: 24733

Give your div a position: relative value

<div id="my_div" style="height:400px; position: relative;"></div>

For testing purposes only, i would give your CSS a declaration of !important just to rule out any javascript/ bootstrap override

<div id="my_div" style="height:400px !important; position: relative !important;"></div>

Upvotes: 1

SAFEER N

Reputation: 1197

i think jquery first remove your "my_div" then append to your container. try this fix

<div id="yourContainer">
            <div id="my_div" style="height:400px"></div>
            <hr>
        </div>

$(document).ready(function() {
    $('#yourContainer').find('hr').remove();
    $('#yourContainer').append('<hr />');
});

Upvotes: -1

Ilya Streltsyn

Reputation: 13556

It's because your div has fixed height of 400px. It may be overflowed by the content, but it can't move other blocks further than its specified height. Probably you need to set to it min-height: 400px instead of height: 400px.

Upvotes: 0