Align several divs together

Question

Is there a way I can align 4 divs up together so they are all neatly inline, i have an image in one div, header in another, text and another image in other separate divs but I would like them to all look consistent. See fiddle

<div id="christmas_product_boxes">
    <div id="christmas_mattress">
        <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px">
    </div>
    <div id="christmas_pillows">
        <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px">
    </div>
    <div id="christmas_beds">
        <img src="http://blog.applause.com/wp-content/uploads/2013/05/one_star.jpg" height="100px" width="100px">
    </div>
</div>
<br>
<br>
<div id="christmas_product_boxes_title">
    <div id="christmas_mattress_title">
        <h2>Title 1</h2>
    </div>
    <div id="christmas_pillow_title">
        <h2>Title 2</h2>
    </div>
    <div id="christmas_beds_title">
        <h2>Title 3</h2>
    </div>
</div>
<div id="christmas_product_boxes_text">
    <div id="christmas_mattress_text">
        <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p>
    </div>
    <div id="christmas_pillow_text">
        <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p>
    </div>
    <div id="christmas_beds_text">
        <p>This is some text in a p tag!! <br>This is some text in a p tag!! <br>This is some text in a p tag!!</p>
    </div>
</div>
<div id="christmas_product_boxes_buttons">
    <div id="christmas_mattress_button">
        <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a>
    </div>
    <div id="christmas_pillow_button">
        <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a>
    </div>
    <div id="christmas_beds_button">
        <a href="#"><img src="http://www.downloadclipart.net/large/253-button-blue-design.png" height="30px" width="30px"></a>
    </div>
</div>

Consistent in what way? How do you want to arrange them? – Guffa Oct 31 '13 at 13:09 — Guffa, Oct 31 '13 at 13:09

score 0 · Answer 1 · answered Oct 31 '13 at 13:27

0

How about something like this:

fiddle: http://jsfiddle.net/6Lrdp/1/

Apply these styles to most of the containers as per the fiddle.

width: 130px;
margin:0 10px 0 50px
text-align: center;

You'll have to mess around with the dimensions . . .

answered Oct 31 '13 at 13:27

Pat Dobson

3,249
2
19
32

score 0 · Answer 2 · edited May 23 '17 at 12:28

A good start would be to change the way you created the struct of the html. You are trying to organize the content horizontally. You are dividing your "object of interest" (the box, in this case) into many pieces. I'm not saying it's wrong, but it's looks weird (at least for me).

"Horizontal way": http://jsfiddle.net/felipemiosso/yUgLw/3/

Now, what about this: http://jsfiddle.net/felipemiosso/yUgLw/2/

Its not much simpler and easier to see than the other way? Anyway ... both fiddles you give you a north to what you need to change to your code work properly. Hope it helps :)

Just a note about your code: You should not repeat the id attribute in your code.Difference between div id and div class

Align several divs together

2 Answers2