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;
}
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”.