CODEWITHSUNDEEP
htmltwitter-bootstrap
Milligran
Milligran

Reputation: 3161

How to horizontally align 2 Divs close to each other

I am currently using Twitter bootsrap 2.3 in my Razor view

How can I horizontally align the below divs beside each other to get the effect similar to a table with a row and 2 cells. Divs should be to the left and right of each other.

        <div id="Main">

            <div id="left">
                <label><input type="checkbox" /> Left Side</label>

                <label><input type="checkbox" /> Left Side</label>

                <label>  <input type="checkbox" checked/> Left Side</label>

            </div>

            <div id="right">                 

                <label><input type="checkbox" /> Right side</label>

                <label><input type="checkbox" /> Right side</label>

                <label>  <input type="checkbox" checked/> Right side</label>

                </div>

        </div>

Upvotes: 0

Views: 168

Answers (3)

Able
Able

Reputation: 3912

working fiddle with twitter bootstrap

<div class="container">
    <div class="row">
        <div class="col-md-6">
                <h2>
                Heading
            </h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
                ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
                sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
                odio dui.</p>
            <p> <a class="btn btn-default" href="#">View details »</a>

            </p>
        </div>
        <div class="col-md-6">
                <h2>
                Heading
            </h2>

            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
                ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
                sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
                odio dui.</p>
            <p> <a class="btn btn-default" href="#">View details »</a>

            </p>
        </div>
    </div>
</div>

Upvotes: 0

user1899563
user1899563

Reputation: 

<div id="Main">
        <div id="right" style="float:left;">                 

            <label><input type="checkbox" /> Right side</label>

            <label><input type="checkbox" /> Right side</label>

            <label>  <input type="checkbox" checked/> Right side</label>

            </div>


        <div id="left" style="float:left;">
            <label><input type="checkbox" /> Left Side</label>

            <label><input type="checkbox" /> Left Side</label>

            <label>  <input type="checkbox" checked/> Left Side</label>

        </div>


    </div>

Upvotes: 1

suff trek
suff trek

Reputation: 39767

You can float left DIV by setting it's float style to left:

<div id="left" style="float:left">

Demo: http://jsfiddle.net/GC4GY/

P.S. You don't have to put checkbox inside of label, you can user label's "for" attribute instead. E.g. you can change

<label>  <input type="checkbox" checked/> Left Side</label>

to

<input type="checkbox" id="chk3" checked="true" /><label for="chk3"> Left Side</label>

Upvotes: 1

Related Questions