How to make DIV appear inline?

programming web dev
1

Hi, this is mind boggling. I have 3 DIV’s inside a wrapper DIV. I want those 3 DIV’s to appear horizontally next to eachother inside the wrapper DIV and NOT one under the other. I have the following CSS:

#wrapperA{
position: relative;
display: inline;
left: 0;
width: 100%;
height: 150px;

}

#cal{
position: relative;
display: block;
width: 30%;
height: auto;
}

#ad{
position: relative;
display: block;
width: 30%;
height: auto;
}

#news{
position: relative;
display: block;
width: 30%;
height: auto;
}

this does not seem to be working though, anyone know how to go about this? I also tried a “float: left” in the wrapper DIV instead of “display: inline”…that doesn’t work either.