0

If we have something in a div block , how come it can flow out of the div block as if nothing's even there ?
For example , here :

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="box.css"/>
        <title>Result</title>
    </head>
    <body>
        <div>
            <p>one</p>
            <p>two</p>
            <p>one</p>
            <p>two</p>
            <p>one</p>
            <p>two</p>
        </div>
    </body>
</html>

the <p> stuff flows out of the <div> so easily. Why is that ?

stylesheet:

* {
    border: 1px dashed black;
}
div {
    height: 50px;
    width: 100px;
    border: 4px solid #FF0000;
    border-radius: 5px;
    background-color: #308014;
    margin:10px 10px 10px 10px;
    padding:40px;
}
div p{
    background-color:yellow;
    /*display:inline;*/
}
3
Contributors
5
Replies
24
Views
4 Years
Discussion Span
Last Post by cmps
0

Because div has a fixed height of 50px ... Theres a conflict where u dont want things to be displayed outside the div but u r forcing it with the p

0

Ok I think this is what you want see the jsfiddle

* {
    border: 1px dashed black;
}
div {
    height: auto;
    width: 100px;
    border: 4px solid #FF0000;
    border-radius: 5px;
    background-color: #308014;
    margin:10px 10px 10px 10px;
    padding:40px;
}
div p{
    background-color:yellow;
    /*display:inline;*/
}

Hope this solves your problem

Edited by dany12

0

How do uvwant things to be displayed ? Do u want things to be truncated outside the div or what ?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.