/    Sign up×
Community /Pin to ProfileBookmark

Image side by side

Copy linkTweet thisAlerts:
Jun 14.2015

Is there a way using CSS to put 2 images side by side or next to each other? I was using the this style:

style=”margin-left: 49px; margin-bottom: 74px;”

The problem is when I tried to move the image up next to the Left image, the page pushes down. I used the margin-bottom: 74px but the image does not move at all, it made the pages push down. I just want to make the 2 images sit next to each other.

Here is the picture of what I am trying to do:

[IMG]http://i57.tinypic.com/24f0g3c.jpg[/IMG]

Thanks for any advice!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@LandiaauthorJun 14.2015 — The image is inside the DIV box:

<div style="margin-left: 49px; margin-bottom: 74px;""><img src="assets/images/picture8.gif"></div>
Copy linkTweet thisAlerts:
@LandiaauthorJun 15.2015 — I found this CSS style to work for putting 2 images next to each other by using the DIV tag:

style="position: absolute; top: 73px; left: 863px;
Copy linkTweet thisAlerts:
@jedaisoulJun 15.2015 — 
  • 1. You do not need a div to contain a single image.


  • 2. there are good reasons for using position:absolute, but this is not one of them. Use [b]float:left;[/b].


  • 3. Using inline style is a bad habit to get into. So don't do it. Apply styling to IDs and Classes with a <style> section in <head>.


    • I.e. Something like:

    [code=html]
    <head>
    <title>demo</title>
    <style>
    html,
    body {
    width:100%;
    height: 100%;
    }
    #container {
    width: 80%;
    height: 80%;
    margin: auto;
    }
    .side-by-side {
    float:left;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <img class="side-by-side" src="assets/images/picture7.gif">
    <img class="side-by-side" src="assets/images/picture8.gif">
    </div>
    </body>
    </html>
    [/code]
    Copy linkTweet thisAlerts:
    @AnshiaggarwalJun 17.2015 — Hey friend try this,

    <a href="mailto:[email protected]">

    <img id="fblogo" border="0" alt="Mail" src="http://olympiahaacht.be/wp-content/uploads/2012/07/email-icon-e1343123697991.jpg"/></a>

    <a href="https://www.facebook.com/OlympiaHaacht" target="_blank">

    <img id="fblogo" border="0" alt="Facebook" src="http://olympiahaacht.be/wp-content/uploads/2012/04/FacebookButtonRevised-e1334605872360.jpg"/></a>`
    Copy linkTweet thisAlerts:
    @LandiaauthorJun 17.2015 — @jedaisoul

    Thanks for the great advice!

    Any reason why I would need to add the ID Container for each DIV:

    <div[B] id="container"[/B]>


    I have put all of my CSS styles into a CSS style sheet now inside a CSS folder. So here is what I have now for each DIV:

    <div [B]class="images"[/B]>

    <img class="side-by-side" src="assets/images/picture7.gif">

    <img class="side-by-side" src="assets/images/picture8.gif">

    </div>


    And within the Head section, I put the CSS file inside the CSS folder like this:

    <head>

    <link rel="stylesheet" href="css/css.css" media="screen">

    </head>
    Copy linkTweet thisAlerts:
    @jedaisoulJun 17.2015 — You cannot have multiple DIVs with the same ID in the same web page. If you want to apply CSS settings to multiple DIVs use a CLASS.
    Copy linkTweet thisAlerts:
    @LandiaauthorJun 18.2015 — You cannot have multiple DIVs with the same ID in the same web page. If you want to apply CSS settings to multiple DIVs use a CLASS.[/QUOTE]

    Thank you!
    ×

    Success!

    Help @Landia spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...