Need help in CSS positioning in my code

Question

I have been struggling with some CSS Style. The problem is that i am not able to position the images properly. Due to some reason the image is not displaying in proper expected flow. And I also want to centralize the whole content. It is not properly centralize when you resize the the browser. You can easily notice all this issue once you copy past my code. Here is my code. Thanks HTML

    body {
        font-family: 'Open sans',sans-serif; 
    } 
    
    #content p {
        padding: 5px;
        font-size: 0.8em;
    }
    
    #wrap {
        max-width: 900px;
        padding: 3%;
        margin: 0 auto;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    #contact a {
        padding-left: 35px;
        background-repeat: no-repeat;
        background-size: 20px;
    }
    #content a {
        width: 100%;
        display: inline-block;
        height: 100%;
    }
    
    #content li img {
        width: 100%;
    }
    
    a {
        text-decoration: none;
    }
    
    #content li {
        float: left;
        width: 25%;
        margin: 3%;
        box-sizing: border-box;
        background-color: bisque;
    } 
    footer {
        clear: both;
        text-align: center;
    }
    
    footer img {
        width: 25px;
    }
    
    h1 {
        font-weight: normal;
        font-family: 'Change one', sans-serif;
        color: #fff;
        font-size: 2.4em;
        padding: 0px;
        margin: 0px;
        display: inline-block;
    }
    
    h2 {
        font-size: .9em;
        font-weight: normal;
        color: #fff;
        margin: 10px 0;
    }
    
    #content ul { 
        padding: 0;
        margin: 0;
    }

        <div id="wrap">
              <div id="content">
                <ul>
                  <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg"> 
                    <p>Experimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg"> 
                    <p>Experimentation with color and texture Experimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg"> 
                    <p>Experimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg"> 
                    <p>Experimentation with color and textureExperimentation with color and texture</p></a>
                  </li>
                  <li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg"> 
                    <p>Experimentation with color and texture</p></a>
                  </li>
                </ul>
              </div>
        
              <footer>
                <img src="img/twitter-wrap.png">
                <img src="img/facebook-wrap.png"> 
                <p>&copy; 2014 Chimed.</p>
              </footer>
            </div>

set 2 more properties at #content li { height:200px; margin-bottom:100px;} it will better but you will have a problem with bisque background — Alexander
– Alexander, Commented Dec 13, 2014 at 15:54

CodingWithSpike · Accepted Answer · 2014-12-13 15:51:27Z

1

The issue is that some of your text items in the <p> elements wrap to 3 lines, and some only wrap to 2 lines. This makes them taller than the others. When the next <li> wraps to the next line, it ends up being positioned to the right of the taller item.

Represented visually:

block alignment

To fix this, you could try to make all your items the same height. That way they would wrap cleanly around each other.

answered Dec 13, 2014 at 15:51

CodingWithSpike

43.9k18 gold badges106 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix · Accepted Answer · 2014-12-13 15:57:58Z

Two "issues" are in your code, as I can see so far.

You're trying to center your content and doing it right with the #wrap. But the list elements inside the list have a width of 25% each, plus 3% margin to the sides, so 31% in total. So the closest you can get to 100% width of the surrounding element is 93%, leaving a gap on the right side, because of your float: left for the list elements. This should fix the problem:

ul {
    width: 93%;
    margin: 0 auto;
    list-style-type: none;
    padding: 0;
}

#content li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin: 3%;
    box-sizing: border-box;
    background-color: bisque;
}

I added a width and centering margin to the ul and you're li elements are now inline-block and aligned at their top line.

Collectives™ on Stack Overflow

Need help in CSS positioning in my code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related