Html float left problem

[Milktealol]

Hi, I'm having a problem whereby the 2nd row image is pushed down. Can anyone help me? Thanks!

 

Here is my css.

 

    #homeposter

    {

        width:100%;

        height: 100%;

        overflow: hidden;

    }

 

    #HomePoster > img

    {

        width:25%;

        height:50%;

        float:left;

        display: block;

        position: relative;

    }

 

Here is my coding

 

<div id="HomePoster">

    <img src="../media/MoviePoster/Annabelle.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/Annabelle.jpg';"onmouseout="this.src='../media/MoviePoster/Annabelle.jpg';"/>

    <img src="../media/MoviePoster/Taken3.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/Taken3.jpg';"onmouseout="this.src='../media/MoviePoster/Taken3.jpg';"/>

    <img src="../media/MoviePoster/BigHero6.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/BigHero6.jpg';"onmouseout="this.src='../media/MoviePoster/BigHero6.jpg';"/>

    <img src="../media/MoviePoster/gonegirl.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/gonegirl.jpg';"onmouseout="this.src='../media/MoviePoster/gonegirl.jpg';"/>

    <img src="../media/MoviePoster/Nightcrawler.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/Nightcrawler.jpg';"onmouseout="this.src='../media/MoviePoster/Nightcrawler.jpg';"/>

    <img src="../media/MoviePoster/still_alice.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/still_alice.jpg';"onmouseout="this.src='../media/MoviePoster/still_alice.jpg';"/>

    <img src="../media/MoviePoster/TheBoyWhoSmellsLikeFish.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/TheBoyWhoSmellsLikeFish.jpg';"onmouseout="this.src='../media/MoviePoster/TheBoyWhoSmellsLikeFish.jpg';"/>

    <img src="../media/MoviePoster/TheInterview2014.jpg" alt="" onmouseover="this.src='../media/MoviePoster/moviedited/TheInterview2014.jpg';"onmouseout="this.src='../media/MoviePoster/TheInterview2014.jpg';"/>

    

    </div>

 

I attached the image below.

Thanks in advance!

 

 

[Joeytyndale]

Make sure there's enough room for it. For example if imgA is to go next to imgB they should be sized imgA.width=30% and imgB.width=70%. If one is too wide to allow the other to be next to it then it will be shifted down.

[Milktealol]

Make sure there's enough room for it. For example if imgA is to go next to imgB they should be sized imgA.width=30% and imgB.width=70%. If one is too wide to allow the other to be next to it then it will be shifted down.

 

I made the width of that div to be 100%.

The img will be 25% each. So 4 pictures will be there.

But for the 2nd row, only one picture appeared and 3 others have been pushed down to the 3rd row. 

[Joeytyndale]

I made the width of that div to be 100%.

The img will be 25% each. So 4 pictures will be there.

But for the 2nd row, only one picture appeared and 3 others have been pushed down to the 3rd row. 

Does the div have any borders or padding on it? Cause that could actually make the inner space smaller and even 1 pixel can mess things up. Change the individual pictures to 24% and see what happens.

[Milktealol]

Does the div have any borders or padding on it? Cause that could actually make the inner space smaller and even 1 pixel can mess things up. Change the individual pictures to 24% and see what happens.

Nope, no borders or paddings. I also tried making it 24% but it didn't work also.

[Joeytyndale]

Nope, no borders or paddings. I also tried making it 24% but it didn't work also.

Interesting... Is there more code than what you shared? Because I copied what you have up top and it's working for me.

[Milktealol]

Interesting... Is there more code than what you shared? Because I copied what you have up top and it's working for me.

The other codes has nothing to do with it. The only thing is i made my whole page into 3 columns, nav(20%) content(64%) and advertisement(16%). But the problem should not be related because of the parent child container. I will try to see if the image size itself is the problem. 

Do you think that maybe the problem?

[Joeytyndale]

The other codes has nothing to do with it. The only thing is i made my whole page into 3 columns, nav(20%) content(64%) and advertisement(16%). But the problem should not be related because of the parent child container. I will try to see if the image size itself is the problem. 

Do you think that maybe the problem?

I would think the original image size shouldn't matter if it's being re-sized by css later. But you can try it if you want.

[Milktealol]

I would think the original image size shouldn't matter if it's being re-sized by css later. But you can try it if you want.

I solved it already! 

The problem is because of the different sizing in the image itself.. basic error I made.

 

I also thought that editing the size in the css would resize it but for my case now, that is where the problem lies. 

 

Thanks a lot for helping me!

[Joeytyndale]

I solved it already! 

The problem is because of the different sizing in the image itself.. basic error I made.

 

I also thought that editing the size in the css would resize it but for my case now, that is where the problem lies. 

 

Thanks a lot for helping me!

Awesome glad you got it fixed!