HTML & CSS Not displaying inline-blocks properly

Question

http://gyazo.com/16e481d4611e1087f892e7c568640ab1.png

This is what is happening to the site, whenever I type in a certain amount it always move the contents upwards. Why is this? I tried for a few hours now to get this and everything I try yields the same result.

        <style type="text/css">

            #main {
                width: auto;
                height: 800px;
                background-color: #666;
                display: block;
            }
#main #images h4 {
    font-family: "Courier New", Courier, monospace;
    color: #3998c9;
    font-size: 24px;
    font-weight: 600;
    text-transform: capitalize;
}
#main #images span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

            ul#navigation li a.home {
                width: 90px;
                background-position: 0 -80px;
            }

            ul#navigation li a.aboutus {
                width: 125px;
                background-position: -90px 0;
            }

            ul#navigation li a.services {
                width: 125px;
                background-position: -215px 0;
            }

            ul#navigation li a.projects {
                width: 125px;
                background-position: -340px 0;
            }

            ul#navigation li a.testimonials {
                width: 185px;
                background-position: -465px 0;
            }

            #main #images {
    display: inline-block;
    height: 400px;
    width: 200px;
    text-align: center;
            }

        </style>

    </head>

    <body>

    <div id="logo">
    <a href="index.html"><img src="images/logo.png" width="125" height="141" alt="logo" /></a>
    </div>

    <div id="navbar">
        <ul id="navigation">
            <li><a href="index.html" class="home"></a></li>
            <li><a href="aboutus.html" class="aboutus"></a></li>
            <li><a href="services.html" class="services"></a></li>
            <li><a href="projects.html" class="projects"></a></li>
            <li><a href="testimonials.html" class="testimonials"></a></li>
        </ul>        
    </div>

    <center>

    <div id="main">
            <div id="images">
                <h4>RESIDENTIAL</h4>
                <img src="images/home_1.jpg" width="150" height="150" />
                <br /><br />
                <span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
            </div>
      <div id="images">
                <h4>COMMERCIAL</h4>
                <img src="images/home_2.jpg" width="150" height="150" />
                <br /><br />
                <span>Doing it Right and Getting the Job Done! The possibilities of the product industry are Endless and finding Reliable, Knowledgeable</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
            </div>
      <div id="images">
                <h4>GOVERNMENTAL</h4>
                <img src="images/home_3.jpg" width="150" height="150" />
                <br /><br />
                <span>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci., ullamcorper ele...</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
            </div>
      <div id="images">
                <h4>INDUSTRIAL</h4>
                <img src="images/home_4.jpg" width="150" height="150" />
                <br /><br />
                <span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
            </div>
    </div>

Will you post a jsfiddle? It would make everyone's lives a lot easier. — steinmas
– steinmas, Commented Feb 14, 2014 at 17:27
ID = Identifier = name that identifies a unique object You must not use the same ID on several elements. — feeela
– feeela, Commented Feb 14, 2014 at 17:29

enguerranws · Accepted Answer · 2014-02-14 17:54:06Z

Try :

#main #images {
  vertical-align: top; // this is what you're looking for.
  display: inline-block;
  height: 400px;
  width: 200px;
  text-align: center;
}

And yeah, you should learn how to use ID and classes ;)

For convenience a full example using this fix and correct markup:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        #main {
            width: auto;
            height: 800px;
            background-color: #666;
            display: block;
            text-align: center; /* instead of <center> element */
        }
        .images {
            display: inline-block;
            vertical-align: top; /* aligning blocks to the top of #main */
            height: 400px;
            width: 200px;
            text-align: center;
                            position: relative;
        }
        .images h4 {
            font-family: "Courier New", Courier, monospace;
            color: #3998c9;
            font-size: 24px;
            font-weight: 600;
            text-transform: capitalize;
        }
        .images span {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
                    .images span img {
                            position: absolute;
                            bottom: 5px;
                            left: 50%;
                            margin-left: -45px;
                    }
    </style>
</head>
<body>
    <div id="main">
        <div class="images">
            <h4>RESIDENTIAL</h4>
            <img src="images/home_1.jpg" width="150" height="150" />
            <br /><br />
            <span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
        </div>
        <div class="images">
            <h4>COMMERCIAL</h4>
            <img src="images/home_2.jpg" width="150" height="150" />
            <br /><br />
            <span>Doing it Right and Getting the Job Done! The possibilities of the product industry are Endless and finding Reliable, Knowledgeable</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
        </div>
        <div class="images">
            <h4>GOVERNMENTAL</h4>
            <img src="images/home_3.jpg" width="150" height="150" />
            <br /><br />
            <span>Suspendisse vulputate fringilla arcu et porttitor. Mauris placerat mattis tellus id sodales. Morbi vitae ipsum lectus, ullamcorper eleifend orci., ullamcorper ele...</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
        </div>
        <div class="images">
            <h4>INDUSTRIAL</h4>
            <img src="images/home_4.jpg" width="150" height="150" />
            <br /><br />
            <span>24 Years Of Service! Paul Best, Owner and Founder Of Best Choice Painting & Renovations has been in the service sector for over 25 years.</span><br /><br /><img src="images/readmore.png" width="91" height="29" />
        </div>
    </div>
</body>

Once I do that the images for read more are not aligned. How could I go about doing that? vertical align bottom?
@user3311214 Nope, that won't work unless you set everything to be a table. But you could use absolute positioning: .images { position: relative; } .images span { position: absolute: bottom: 0; }. Maybe you should post a second question for that. But first please set up a JSFiddle to play with.

Mike · Accepted Answer · 2014-02-14 17:32:51Z

0

You have multiple ID's that are the same. You need to be using classes

where it is

id="images"

should be

class="images"

and in your CSS styles

change your hashtags to periods

#images

becomes

.images

answered Feb 14, 2014 at 17:32

Mike

8941 gold badge8 silver badges15 bronze badges

Collectives™ on Stack Overflow

HTML & CSS Not displaying inline-blocks properly

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related