How to Make Multiple Divs Display in One Line But Still Retain Width

How to make multiple divs display in one line but still retain width?

You can use display:inline-block.

This property allows a DOM element to have all the attributes of a block element, but keeping it inline. There's some drawbacks, but most of the time it's good enough. Why it's good and why it may not work for you.

EDIT: The only modern browser that has some problems with it is IE7. See Quirksmode.org

How To Have Multiple Divs On One Line With Even Spacing

I would suggest adding a new element inside each serviceBox, in this example the div with class box

CSS:

#serviceBox
{
    width:100%;
    margin: 0 auto;
    margin-top:75px;
    height:250px;
    border:1px solid black;
}
.serviceBox1, .serviceBox2, .serviceBox3, .serviceBox4 {
    float:left;
    width:25%;
}

.box{
    height: 250px;
    background-color: white;
    border:1px solid #bdbdbd;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px #bdbdbd;
    -webkit-box-shadow: 0 0 10px #bdbdbd;
    box-shadow: 0 0 10px #bdbdbd;
}

HTML

 <div id="serviceBox"> 
    <div class="serviceBox1">
        <div class="box">
        <h2> Heading 1</h2>
        <p>Information</p>
        </div>
    </div>
     <div class="serviceBox2">
         <div class="box">
        <h2>Heading 2</h2>
        <p> Information</p>
         </div>
    </div>
    <div class="serviceBox3">
        <div class="box">
        <h2>Heading 3</h2>
        <p>Information</p>
        </div>
     </div>
    <div class="serviceBox4">
        <div class="box">
        <h2>Heading 4</h2>
        <p>Information</p>
        </div>
     </div>
 </div>

This way the service boxes are nicely a quarter of the container and inside service box you can add the border and shading to the new box element

Make multiple variable-height divs inline, yet maintain a fixed width container

If you want to have them on one line horizontally, you can try to use display: inline-block with white-space: nowrap on a parent, so the blocks would be on one line: http://jsfiddle.net/kizu/efVjj/26/

Make multiple divs of equal height when they aren't always on the same line

You can use fix height and vertical align top as below

div div {
        display:inline-block; 
        border:1px solid gray;
        padding:5px;
        margin:10px;
        width:20%;
        height:150px;
        border-radius: 8px;
    vertical-align:top;
};

Fiddle Demo

How do I keep two divs on the same line?

You can make two divs inline this way:

display:inline;
float:left;

---

Related Topics