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

HTML & CSS
1

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

 <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>
2

Did you try to fix it with ul and li?

3

how ???

Those are divs not ul ???

4

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

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;

}

&lt;/style&gt;

</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>

6

I think your problem is with width of divs. Try reducing few pixels from both divs to see if that works.

7

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.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1045072-How-to-align-two-div-side-by-side-(-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

ok that sorts it.

many thanks