CODEWITHSUNDEEP
csscss-float
mcgrailm
mcgrailm

Reputation: 17640

css extra space in div

I'm having trouble figuring out how to make the my pictures 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 top of the page and at the bottom`!

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

Upvotes: 1

Views: 3438

Answers (5)

DavidJCobb
DavidJCobb

Reputation: 1131

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

Upvotes: 2

Ivan
Ivan

Reputation: 10392

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

Upvotes: 0

danyolgiax
danyolgiax

Reputation: 13116

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

Upvotes: 0

onteria_
onteria_

Reputation: 70587

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.

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72729

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

Upvotes: 0

Related Questions