Reputation: 549

how can I fix the button position without use floating

I'm having problems to align correctly the buttons on side by side. I need to build a solution without use the float resource. See it:

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

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Documento sem título</title>
        <style type="text/css">
            * {
                margin:0px;
                padding:0px;
            }
            a {
                display:inline-block;
                padding: .63em;
                border:1px solid #ccc;
                position:relative;
            }
            .b2 {
                padding: .0em 1em .0em 2.1em;
                text-decoration:none
            }
            .icon {
                position:absolute;
                width:16px;
                height:16px;
                background-color:#999;
                top:50%;
                margin-top:-8px;
                left:2px;
            }
        </style>
    </head>

    <body>
        <div style="background-color:#f0f0f0; margin-top:50px; position:relative; height:22px; padding:4px;"> <a href="#"><span class="icon"></span></a>

            <div style="display:inline-block; width:2px; height:22px; background-color:#666;"></div> <a href="#"><span class="icon"></span></a>
 <a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a>

        </div>

<h2 style="background:#999"> test</h2>

<a href="#" class="b2"><span class="icon"></span><span>Casa d wqe dde qeasd sd</span></a>

    </body>

</html>

Upvotes: 0