Member Avatar for somjit{}

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
  • 155 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by cmps
Member Avatar for cmps

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

Member Avatar for somjit{}

how do i solve this ?

Member Avatar for dany12

Are you using a css reset?
try

overflow:auto;

on your div.

Member Avatar for dany12

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
Member Avatar for cmps

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.