css - How to place two images side by side with text above in HTML -
i trying place 2 images in html (with css) side side small padding space between two, text above two. inside "section div" managed them side side work got lost , did not manage place text above images. appreciated! thanks!
#header { background-color:#ff6600; color:white; text-align:left; padding:2px; } #nav { line-height:30px; background-color:#fff000; height:350px; width:189px; 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; }<div id="container"> <!---container---> <div id="header"> <h1>jordas</h1> </div> <!--header--> <div id="nav"> <a href="index.html">etusivu</a> <br> <a href="page1.html">teltat</a> <br> <a href="page2.html">palvelut</a> <br> <a href="page3.html">yhteistiedot</a> <br> </div> <div id="section"> <a href="page2.html"><h1>pro</h1></a> <div class="main_block"> <div class="inner_block"> <img src=grafik/talt.png> </div> <div class="inner_block"> <img src=grafik/talt.png> </div> </div> <!--mainblock--> </div> <div id="footer"> <h3>pop-up telttojen ykkÖnen </h3> </div> <!--footer--> </div> <!--container-->
more simple solution, use inline-block property images wrapers , similar width images , wrapers:
.inner_block { display: inline-block; text-align: center; width: 100px; } img { width: 100px; } 
Comments
Post a Comment