CODEWITHSUNDEEP
csstwitter-bootstraphtmltwitter-bootstrap-3
user21398
user21398

Reputation: 1493

Putting two divs next to each other with borders in bootstrap 3?

I'm trying to align some text next to twitter's button, and have them all line up with borders. Unfortunately, the text div shrinks and floats to the upper left with its borders. The button seems fine because bootstrap properly aligns everything. But both the text and button divs suffer from padding (or margin) issues in that the borders won't line up to form a rectangle (with a border line in between the text and button div also).

This is what I'm aiming for:

enter image description here

The grey 1px borders are supposed to be equal all around, but I had trouble with my touchpad.

This is what I have so far:

                             <div class="mydiv">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-sm-6">
                                            <div class="textdiv">
                                                 Text!
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div class="btndiv">    
                                                <a class="btn" href="#">Button!</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

CSS:

 .textdiv {
         border-top: 1px solid #DDDDDD;
         border-left: 1px solid #DDDDDD;
         border-right: 1px solid #DDDDDD;
         border-bottom: 1px solid #DDDDDD;
         margin: 0 auto;
    }
    .btndiv {
         border-top: 1px solid #DDDDDD;
         border-bottom: 1px solid #DDDDDD;
         border-right: 1px solid #DDDDDD;
    }
    .mydiv {
         width:30%;
    }

Upvotes: 1

Views: 8459

Answers (3)

David Taiaroa
David Taiaroa

Reputation: 25495

Here is one idea for you:
http://jsfiddle.net/panchroma/y79gm/

The html is almost exactly the same as yours except I wraped your textdiv block in .btndiv class ( to provide the border), added the class of btn to .textdiv so that it inherits the same bootstrap styling as the btn link, and I added 

.textdiv{
cursor:default;
}

to force the cursor to stay as the default arrow when over the text block.

Good luck!

Upvotes: 0

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

<div class="mydiv">
    <div class="row">
        <div class="col-md-12">
            <div class="col-sm-6">
                <div class="textdiv">Text!</div>
            </div>
            <div class="col-sm-6">
                <div class="btndiv"> <a class="btn" href="#"> Button!</a>

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

CSS

.row {
    width:250px;
    margin:0px auto;
    border:1px solid black;
    height:75px;
    background-color:#f2f2f2;
}
col-sm-6 {
    width:200px;
    margin:0px auto;
    text-align:center;
}
div.textdiv {
    border:1px solid #9a9a9a;
    background-color:Aqua;
    padding:5px;
    color:black;
    font: bold 16px arila;
    width:100px;
    float:left;
    text-align:center;
    margin-left:10px;
    margin-top:25px;
    margin-right:3px;
}
div.col-sm-6 a {
    border:1px solid #9a9a9a;
    margin:0px auto;
    background-color:Aqua;
    color:black;
    text-decoration:none;
    font: bold 16px arila;
    width:100px;
    padding:5px;
    margin-left:3px;
    margin-right:10px;
    margin-top:25px;
    float:right;
    text-align:center;
}

Working Fiddle

Output:

enter image description here

Upvotes: 2

D. Melo
D. Melo

Reputation: 2239

I've just made some updates in the way things get their padding. Please take a looke at the followingo fiddle: http://jsfiddle.net/WNPRA/1/

I created a new class to handle some problemns and updated the css to be more neat.

div.no-padding {
    padding: 0;
}

div.textdiv {
    padding: 7px 12px 7px 12px ;
    text-align: center;
}

Please, do not consider the col-xs-6 classes I added. They are just to make things work on fiddle.

Upvotes: 0

Related Questions