I need help for css and html gallery problem

[MonKey]

i will paste now the css code here : .gallery {
margin-left:101px;
width: 640px;
padding: 5px;
float:left;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.gallery > div {
position: relative;
float: left;
padding: 5px;
}

.gallery > div > img {

width: 200px;
transition: .1s transform;
transform: translateZ(0); /* hack */
}

.gallery > div:hover {
z-index: 1;
}

.gallery > div:hover > img {
transform: scale(1.7,1.7);
transition: .3s transform;
}

.cf:before, .cf:after {
display: table;
content: “”;
line-height: 0;
}

.cf:after {
clear: both;
}

i want to ask why my gallery have only 3 collums and i cant add more , when i add photo they are added only under last one . Sorry for bad english , thanks :)

[Beverleyh]

The width of the gallery container is 640px

The width of the images inside it are 200px

200 into 640 goes 3 times.

(NOTE: There is additional padding to account for too which can also affect the box model if it hasn’t been absorbed by box-sizing: border-box;. That may or may not be in effect in some form of global/local reset elsewhere in your CSS.)

[MonKey]

Sorry but i dont understand you , what exactly i should do if you can post code :/ sorry for this

[Beverleyh]

Hmmm, it’s simple mathematics…

Well, you could start by increasing the width of the gallery container (640px) to allow 4 images to sit along the same row. I don’t need to post code for you – you just need to edit what’s there.

[MonKey]

sorry , now i understand it , just i am new :)

[Author]

Posts