-2

I have three div's and try to draw a border on every div. But it only shows a border at the top of the div`s, as you can see here.

This is my code:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

            .mydiv
            {
                position: relative;
                border:1px solid yellow;
            }


            .mydiv_content
            {
                position: absolute;
                border:1px solid red;
            }

            .mydiv_buttons
            {
                position: absolute;
                border:1px solid green;     /* D8D8D8 */
            }

        </style>
    </head>
    <body>
        <div class="mydiv">
            <div class="mydiv_content">
                <p> TEST 1</p>
            </div>

            <div class="mydiv_buttons">
                <br>
                <input type="submit" value="send"></input>
            </div>
        </div>
    </body>
</html>

I don't know why it only shows the border at the top, it would be great if someone can explain this to me. You can find the full code on jsfiddle.

4
  • jsfiddle.net/k6bwy8hg/2
    – akash
    Oct 2, 2015 at 8:12
  • Why? Because it has no height.
    – Nick
    Oct 2, 2015 at 8:16
  • @Nick, incorrect, the full code is on jsfiddle, i was not allowed to post the whole code. jsfiddle.net/k6bwy8hg/1
    – Black
    Oct 2, 2015 at 8:23
  • 1
    @EdwardBlack 800% of 0 is 0. it has no height
    – Nick
    Oct 2, 2015 at 9:08

3 Answers 3

5

That's because you are setting height with % relative to the parent div which is position:absolute and has no height defined because your are using on it height:800%; that has no affect because of the position property.

Just define the height of the parent in px:

.mydiv
{
    position: relative;
    border:1px solid yellow;    /* D8D8D8 */
    width:70%; 
    height:800px; // define the height
    margin-top: 100px;
    margin-left: 200px;
}
1
  • Thank you, this helped me alot.
    – Black
    Oct 2, 2015 at 8:50
2

Your .mydiv element is not getting proper Height

.mydiv {
    position: relative;
    border: 1px solid yellow;
    width: 70%;
    height: 80px; //added
    margin-top: 100px;
    margin-left: 200px;
}

Working Demo

1

Try change all your class position:absolute; into position:relative;. Or remove the position:absolute in child div.

Try get rid child div height. So won't be huge space in parent div.

Example look at my demo.

My Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.