CODEWITHSUNDEEP
htmlcss
H.Julius
H.Julius

Reputation: 25

How to make a grid of images with padding in HTML and CSS

I am trying to make a grid that is 2 pictures in height and 3 pictures in length inside of the section div. This would be the optimal solution. Underneath the picture would be a descriptive text that would be limited to the width of a single image. All these images and text would have a padding for each other. Here is the JSfiddle. https://jsfiddle.net/278sem83/

CSS 

body{
    margin:0; 
    padding:0;
}

#header {
    background-color:#ff6600;
    color:white;
    text-align:left;
    padding:2px;
}

#nav {
    line-height:30px;
    background-color:#fff000;
    height:350px;
    width:125px;
    float:left;
    padding:5px;
}

#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:#737373;
    color:white;
    clear:both;
    text-align:center;
}

#container {
    margin:auto;
    width:900px;
    text-align:left;
    overflow: hidden;
}
.inner_block {
    display: inline-block;
    text-align: center;
    width: 350px;
    height:200px;
}

img {
    width: 350px;
}

.main_block{
    text-align:center;
    width:750px;

}

HTML 

<div id="container"><!---container--->
    <div id="header">
        <h1>JORDAS</h1>
    </div><!--header-->

    <div id="nav">
        <a href="index.html">Etusivu</a> <br>
        <a href="teltat.html">Teltat</a><br>
        <a href="page2.html">Palvelut</a><br>
        <a href="Yhteystiedot.html">Yhteistiedot</a><br>
    </div>
    <div id="section">
        <div class="main_block">
            <p> Tervetuloa Jordas Ab:n kotisivuille. Olemme...
        </div><!--mainblock-->
    </div>
    <div id="footer">
        <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
    </div><!--footer-->
</div> <!--container-->

Upvotes: 1

Views: 119

Answers (1)

mrvncaragay
mrvncaragay

Reputation: 1260

Here some code that will get you started to get the layout you wanted: 

<div class="main_block">

    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div> 

</div><!--mainblock-->

CSS: 

.box {
    float: left;
    width: 29%;
    height: 75px;
    margin: 10px;
    border: 3px solid blue;  
}

Working fiddle: https://jsfiddle.net/nfeLtafz/

Upvotes: 1

Related Questions