SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to align two div side by side ( esp in IE ) ???

    Hello guys
    ( 1st of all am having so much problems developing css in ie and wonder if its only me ??? )

    I recently added like buttons from google and fb to my site, which aligns properly on all browsers, but in IE its aligned one on top of the other.

    HOw do I align both on a horizontal line and on top ???

    many thanks


    Code:
     <div style="float: right; vertical-align: top; "><div class="g-plusone" data-size="medium"></div><div class="fb-like" data-href="http://www.xxxxx" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="verdana"></div></div>
    KISS - Keep It Simple Stupid

  2. #2
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try to fix it with ul and li?

  3. #3
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr.Dee View Post
    Did you try to fix it with ul and li?
    how ???

    Those are divs not ul ???
    KISS - Keep It Simple Stupid

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,119
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    We need to see the CSS as well to be able to help.

    Inline / inline-block / floated elements will sit next to each other, if there's enough room for them.
    In your code there's no styles that we can on those two divs so I'd expect one to sit below the other.

  5. #5
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a test html page. The jscript file is just a combination of both google and fb jscript api codes

    thanks

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="../Scripts/SocialNetworks.js"></script>
    <title></title>
    <style type="text/css">
    .socialnetworks {
    position: absolute;
    top: 70px;
    left: 18%;
    z-index: 2;

    }

    </style>
    </head>
    <body>
    <div class="socialnetworks"><div class="g-plusone" data-size="medium"></div><div class="fb-like socialnetworks2" data-href="http://www.xxxxxx" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="verdana"></div></div>
    </body>
    </html>
    KISS - Keep It Simple Stupid

  6. #6
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think your problem is with width of divs. Try reducing few pixels from both divs to see if that works.
    marketing advice to Atlanta Marketing website!
    Atlanta GA Marketing
    Atlanta Marketing

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,620
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    You didn't specify which version of IE you are concerned about.

    You can either float both of the items or display them as inline-block.

    Both of the following examples work as shown in IE8.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/show...-(-esp-in-IE-)
    Thread: How to align two div side by side ( esp in IE ) ???
    2013.04.26 10:30
    Mary_Itohan
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .socialnetworks {
        position: absolute;
        top: 70px;
        left: 18%;
        z-index: 2;
        border:1px solid magenta;    /* ADDED for demo */
    }
    .g-plusone,
    .fb-like {
        width:100px;
        height:100px;
        border:1px solid cyan;
        background-color:#eee;
        float:left;    /* EITHER float both items */
    /*    display:inline-block;
        vertical-align:top;    /* OR display both items as inline-block */
    }
    
        </style>
    </head>
    <body>
    
    <div class="socialnetworks">
        <div class="g-plusone" data-size="medium"></div>
        <div class="fb-like socialnetworks2" data-href="http://www.xxxxx" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="verdana"></div>
    </div>
    
    </body>
    </html>

  8. #8
    SitePoint Enthusiast Mary_Itohan's Avatar
    Join Date
    Dec 2004
    Location
    e-Planet
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok that sorts it.

    many thanks
    KISS - Keep It Simple Stupid


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •