How to line up images in a horizontal row with CSS?


Tags: html,css

Problem :

I'm trying to line up these image links in a row but having some difficulty with it. If I add some CSS parameters like float left and float right, it ends up positioning it in weird spots on the page.

This is what I got:

HTML:

<a href="http://www.page.com/album">
<div class="preview">
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Record-Album-02.jpg" title="Photo Albums" alt="" />
    <div>
        <div>
            <h2>Photo Albums</h2>

            </div>
        </div>
    </div></a>

<a href="http://www.page.com/storybook">
    <div class="preview">
     <img src="http://www.clipartbest.com/cliparts/RiA/6a5/RiA6a5eoT.jpeg" title="Digital Story Books" alt="" />
        <div>
            <div>
                <h2>Digital Story Books</h2>

        </div>
    </div>
</div>
</a>

and the CSS:

.preview {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.preview img {
    width: 100%;
    height: 100%;
    padding: 0;
}
.preview > div {
background-color: rgba(0,0,0,0.75);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.3s linear;
text-shadow: #000 1px 1px 0;
color: #ccc;
text-align: center;
}
.preview:hover > div {
    display: block;
    opacity: 1.0;
}
.preview > div div {
    padding: 20px 40px;
}
.preview h2 {
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.preview p {
    margin-bottom: 10px;
}

How can I line them up so that there is a half an inch of space in between?

Here is a preview of what I have: http://jsfiddle.net/FZ2rZ/



Solution :

This should do it:

.preview {
    display: inline-block;
    margin: 0 40px 0 0;
}

Inline-block for the div containing the image will display the images in a row as you'd like. The margin applies 40px to the right side of the images.

By default images are block elements, meaning they will take up the entire width of the page. Inline elements (like an or tag) do not collapse and will be on the same row. Learn more about display CSS property.

*edited to correct margin instead of padding.


    CSS Howto..

    How to make 1 css value dependent on another?

    How to use more times css transform property?

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How to use EMs in CSS Media Queries aligned with JavaScript events?

    How to size a content div to cover the entire content area in jQuery Mobile

    how to apply conditional stylesheet $this->headLink()->appendStylesheet('css/css.css') with zend-framework

    How to create CSS with 2 loops

    How use Append Jquery

    How to make a div snap to min or max size, without any sizes in-between?

    CSS: how to make a DIV with display: table-celll extend 100% in width

    How implement a button clear in a RadDatePicker

    Stylized HR is not showing properly in IE

    How can I use themeroller'ed styles in “regular” parts of a page?

    How can I do this: text inside rectangle using HTML/CSS?

    How to get a button to fill the full width of the footer in Mobile View?

    How is `outline: inherit 0` interpreted?

    How to remove underline in css for anchors pseudo element in IE

    How to apply Css class to a row using datatables.js?

    How can I make a photo which fit the div shape using css

    how can I hide an element inside iFrame using Jquery or CSS

    How do i make a div stick down from his div container?

    How to create a responsive top bar with CSS

    Horizontal Navigation with Angled Side Borders - How to handle “Active” state?

    How to add javascript expression's output to my CSS?

    how to put marquee div at the back of another none marquee div?

    HTTPS and how to reference files and images

    Wordpress nav menu images not showing up in mobile safari

    How to detect whether a browser has tap highlighting?

    How to scale an entire webpage down to ipad or phone size

    How can I get my divs to process separately?