Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

My div doesn't stay inside my div container

I have a three divs and I am giving them absolute positioning. However, they are not staying inside my container div.

Here is the code:

<body >
    <div id="container">
        <div id="col1"> testing one</div>
        <div id="col2"> testing two</div>
        <div id="col3"> testing three</div>
        <br/><p/>ksjdlfkjsldkjfl;s

Here is the CSS for my three divs and my container:

div#container {
    position:reletive;
    border-spacing: 10px;
    margin: 100px 80px auto;
    padding: 0  100px10px;
    background-color: #EEEEEE;
    width: 800px;
     -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border: 1px solid;
}

div#col1{
    position:absolute;
    float: left;
    left:0;
    width:220px;
    background-color :red;
}

div#col2{
    position:absolute;
    float: left;
    left:220px;
    width:220px;
    background-color :yellow;
    padding: 10px auto ;
}

div#col3{
    position:absolute;
    float: left;
    left:500px;
    width:100px;
    background-color :green;
    padding: 10px auto;
}
like image 695
benji_r Avatar asked Jan 24 '26 11:01

benji_r


1 Answers

I think, firstly, the position of container div should be "relative" , not the "reletive". Secondly, I think you should use "relative" position instead of "absolute".

like image 88
Prince Avatar answered Jan 26 '26 01:01

Prince



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!