I'm trying to display divs next to each other but have a distance between them. In their masterdiv I put display: inline; then on the 2 divs I put float: left and I got two divs right next to each other. I want a distance between them. Is the only way to do this to add a padding to the left?

I want 1 div on the left side and 1 div on the right side of the page so I want to find a way around using float left just to make them next to each other. Thx in advance.

Here's an example with some code

<div id="masterdiv">
<div id="div1"></div>
<div id="div2"></div>
</div>

Here's the css

#masterdiv{
width: 865px;
height: 250px;
border: 1px solid black;
display: inline;
}

#div1{
height: 50px;
width: 100px;
float: left;
}

#div2{
height: 50px;
width: 100px;
float: left;
}

1 answer

o.k.w 2355
3
points
This was chosen as the best answer

I'm not exactly sure whether you want the right DIV to have a gap offset by a fixed value to the one on the left or flushed it all the way to the right. I've included both css styles below:

#masterdiv{
 width: 865px;
 height: 250px;
 border: 1px solid black;
 /* remove display: inline or use display: inline-block*/
}

#div1{
 height: 50px;
 width: 100px;
 float: left;
}

#div2{
 height: 50px;
 width: 100px;
 float: left;
 margin-left: 100px; /* a gap of 100px between the DIVs */
}

#div2{
 height: 50px;
 width: 100px;
 float: right; /* position to the right edge */
}

PS: refer to the css comments above

Answered almost 7 years ago by o.k.w