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

-

i trying make grid 2 pictures in height , 3 pictures in length inside of section div. this optimal solution. underneath picture descriptive text limited width of single image. these images , text have padding each other. here 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-->

here code started layout 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/


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more