0

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>
2
  • 2
    Will you post a jsfiddle? It would make everyone's lives a lot easier. Commented Feb 14, 2014 at 17:27
  • 2
    ID = Identifier = name that identifies a unique object You must not use the same ID on several elements. Commented Feb 14, 2014 at 17:29

2 Answers 2

2

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>
Sign up to request clarification or add additional context in comments.

2 Comments

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.
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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.