1

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%;
    }
1

3 Answers 3

2

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

0

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.

8
  • @DMelo The textdiv and the btndiv aren't next to each other though?
    – user21398
    Jan 25, 2014 at 4:05
  • I'm so sorry. Pasted the wrong link. Look this one, please: jsfiddle.net/WNPRA/1
    – D. Melo
    Jan 25, 2014 at 4:07
  • @DMelo Thanks! Is there any way to have the textdiv auto resize its width if I have a longer text like "Text!Text!Text!Text!Text!Text!Text!"? Right now it spills into the other div if the text gets longer or grows in height if the text is a long sentence.
    – user21398
    Jan 25, 2014 at 4:11
  • does .mydiv needs to be 30% ?
    – D. Melo
    Jan 25, 2014 at 4:13
  • @DMelo Oh, no it doesn't need to be 30%. But the entire thing should be as the sum of the width of btndiv and textdiv. If the text is very little in both divs, then mydiv should be small. I added the 30% because the two divs kept separating, but I want them side-by-side with borders like how you have it right now.
    – user21398
    Jan 25, 2014 at 4:19
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.