CODEWITHSUNDEEP
htmlcss
Madoka Kaname
Madoka Kaname

Reputation: 1

Align Two Images Next to Each Other

Problem here is the 1/2 and 3/4 images are right underneath each other, I'm trying to get them side by side (with some blank space in between), and centered as well, which is why float:left isn't helping me. This is so easy, but it's killing me.

Fiddle: http://jsfiddle.net/9ABsP/

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <meta name="color:Background Color" content="#FFFFFF"/>
    <meta name="image:Background Image"/>
    <meta name="image:Header Image"/>
    <meta name="image:Panel 1 Image Font"/>
    <meta name="image:Panel 1 Image Back"/>
    <meta name="image:Panel 2 Image Font"/>
    <meta name="image:Panel 2 Image Back"/>


    <title>{Title}</title>
    <link rel="shortcut icon" href="png2.png" />
    <link rel="apple-touch-icon" href="png1.png"/>
    <style>



      .flip-container {
          -webkit-perspective: 1000;
          -moz-perspective: 1000;
          perspective: 1000;
      }

      .flip-container:hover .flipper, .flip-container.hover .flipper, .flip-toggle.flip .flipper {
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
      }
      .flip-container, .front, .back {
          width: 152px;
          max-height: 511px;
      }
      .flipper {
          -webkit-transition: 0.6s;
          -webkit-transform-style: preserve-3d;
          -moz-transition: 0.6s;
          -moz-transform-style: preserve-3d;
          transition: 0.6s;
          transform-style: preserve-3d;
          position: relative;
      }
      .front, .back {
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;
          position: absolute;
          top: 0;
          left: 0;
      }
      .front {
          z-index: 2;
      }
      .back {
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
          transform: rotateY(180deg);
      }




    body {
        background-color: {color:Background Color};
        background-image: url({image:Background Image});
    }

    #header {
    height:125px;
    margin-bottom: 0px;
    }

    #header img {
    height:75px;

    }

    </style>
    <body>
    <title>{Title}</title>
    <center>
    <div id="header">
    <a href="/" title="{Title}"><img src="http://www.rheababla.co.uk/wp-content/uploads/2013/02/header.jpg" /></a>
    </div>



    <div class="flip-toggle">

    <div class="flip-container">

        <div class="flipper">

            <div class="front">

                <img src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-th.png">

            </div>

            <div class="back">

                <img src="http://thecripplegate.com/wp-content/uploads/2012/12/2.png">

            </div>

        </div>
    </div>


    <div class="flip-container">

        <div class="flipper">

            <div class="front">

                <img src="https://yt3.ggpht.com/-iAlI90Z4-OM/AAAAAAAAAAI/AAAAAAAAAAA/S6CbXusFQXQ/s100-c-k-no/photo.jpg">

            </div>

            <div class="back">

                <img src="http://upload.wikimedia.org/wikipedia/en/thumb/0/06/LAret4.PNG/100px-LAret4.PNG">
            </div>
        </div>
    </div>
    </div>

    </div>

</center>
</body>
</html>

Upvotes: 0

Views: 498

Answers (2)

Samy S.Rathore
Samy S.Rathore

Reputation: 1823

Add display: inline-block; to flip-container div. Here is an updated fiddle. You can use margin/padding to adjust the space in between.

Upvotes: 1

Suresh Karia
Suresh Karia

Reputation: 18218

add css rules

css

    .flip-container{
    display: block;
    float: left;
    margin:10px;
    }

Upvotes: 0

Related Questions