# How to make DIV appear inline?

**URL:** <https://forum.kirupa.com/t/how-to-make-div-appear-inline/194165>\
**Category:** web dev\
**Created:** [July 21, 2006, 12:58am UTC](https://forum.kirupa.com/t/how-to-make-div-appear-inline/194165 "2006-07-21T00:58:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![anif](https://avatars.discourse-cdn.com/v4/letter/a/da6949/32.png) [@anif](https://forum.kirupa.com/u/anif)\
**Post date:** [July 21, 2006, 12:58am UTC](https://forum.kirupa.com/t/how-to-make-div-appear-inline/194165/1 "2006-07-21T00:58:27Z")

</div>

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.