css extra space in div

I'm having trouble figuring out how to make the my picture开发者_如何学Cs div show in the right place

here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do

here is how it really looks a the

as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.

I can't figure out where the extra space is coming from

additional

there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits

The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.

(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)

You have top: 200px; in the CSS of your pictures div

Hard to tell with the JSFiddle but:

div.pictures {
    position:relative;
    top:200px;
    width:90%;
    margin:auto;
    background: rgba(255,255,238, 0.25)    
}

Looks like that top:200px; rule is adding significant space.

try putting a <br style="clear:both;" /> at the end of the div!

Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.