CODEWITHSUNDEEP
htmlcss
user4790312
user4790312

Reputation:

CSS display inline two form without using float

in html/css i have simply two form and i want to set that to single row as inline widthout using float. you can see this ONLINE DEMO

in this below code i want to set display:inline to have single row as two div. like with this screen shot:

enter image description here HTML:

<div class='single-page'>
    <div id="verification-panel">
        <form>
            <fieldset>
                <legend>verification code</legend>
                <label>Mobile Number:</label>
                <input type="text" class="inputs" placeholder="EX:">
                <span class="help-block"></span>
                <button type="button" class="btn">Submit</button>
            </fieldset>
        </form>
    </div>
    <div id="activation-panel">
        <form>
            <fieldset>
                <legend>Active Acount</legend>
                <label>Verfication code:</label>
                <input type="text" class="inputs" placeholder="Verficcation code">
                <span class="help-block"></span>
                <button type="button" class="btn">Submit</button>
            </fieldset>
        </form>
    </div>
</div>

Upvotes: 1

Views: 265

Answers (4)

jagweb3
jagweb3

Reputation: 11

#verification-panel,#activation-panel{
display:inline-block; width:250px;

}

Upvotes: 0

guvenckardas
guvenckardas

Reputation: 738

Here is a demo

   .single-page{
    display: inline;
    width: 100%;
}
#verification-panel,#activation-panel{
        display: inline-block;
        width: 49%; // because of margin or etc.
}

Upvotes: 0

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

Copy this code to your CSS section:

.single-page {
display: inline-block;
width: 769px;
}

.verification-panel,
.activation-panel { display: inline-block; }

To get the forms inline, apart from declaring the display: inline-block to both classes, you have to define a width for the parent container big enough to let them sit besides each other.

Upvotes: 0

Mg Thar
Mg Thar

Reputation: 1102

use display:inline-block; 

#verification-panel,#activation-panel{
    display:inline-block;
}

Upvotes: 1

Related Questions