How do we create an image grid, ie: Gallery

Question

This is a different kind of a gallery.
Here is a fiddle http://jsfiddle.net/HVMt9/
When the page loads, you see the title and a big image with 100% height and width. I want it to scroll, and the part where the image ends and the orange-ish part starts, the one with the text 'portfolio', i want the 6 images below it and the orange part to fit the page, 100%.
that means that starting from the orange part to the end of the gallery must be 100%height.
The problem here is that the gallery is not fitting 100% into the screen and is shortened or something like that.
How do i make it like so the gallery images is 100%hieght and width.
i used HTML

<div class="PortfolioMain">
    <div class="HeadingBar"> <span class="HeadingBarText"> Portfolio </span> 
    </div>
    <div class="Portfolio">
        <img src="1.png" class="HomePortfolioLeft" />
        <img src="2.png" class="HomePortfolioCenter" />
        <img src="3.png" class="HomePortfolioRight" />
        <img src="4.png" class="HomePortfolioLeft" />
        <img src="5.png" class="HomePortfolioCenter" />
        <img src="6.png" class="HomePortfolioRight" />
    </div>
</div>

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}
.Portfolio {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.HomePortfolioLeft {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}

score 0 · Answer 1 · answered Mar 22 '14 at 14:59

0

I didn't get what exactly u r expecting. But if you want to show six images covering full browser area, then Try with making changes in HomePortfolioLeft, HomePortfolioright, HomePortfoliocenter

  height:33.33%;

To

  height:100%;

answered Mar 22 '14 at 14:59

Dr Manish Lataa-Manohar Joshi

2,380
5
17
38

That isnt it, but your answer finally led me to the correct solution, so thanks :D. – user3219918 Mar 22 '14 at 15:18
plz give more details on your answer and what u expected. so other members will also be get benefited – Dr Manish Lataa-Manohar Joshi Mar 22 '14 at 15:20

score 0 · Answer 2 · answered Mar 22 '14 at 15:23

I found the answer by myself.
I changed the height of the images left, right and center to 46%, because the portfolio text div was 8%.
Updated fiddle http://jsfiddle.net/HVMt9/1/

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}

.HomePortfolioLeft {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:46%;
    margin:0;
    padding:0;
    float:left;
}

score 0 · Answer 3 · answered Oct 29 '14 at 00:01

Using floats is very useful, but you will run into troubles when using variable height images or when using margins, for a powerful and best user friendly grid I recommend you to use Isotope, or even better use a plugin that implement Isotope v2 quite simple: http://goo.gl/sQ6yXj

How do we create an image grid, ie: Gallery

3 Answers3