CODEWITHSUNDEEP
htmlcss
You Know Nothing Jon Snow
You Know Nothing Jon Snow

Reputation: 833

Displaying two boxes side by side as if they are one

I have this boxes http://jsfiddle.net/eqhH9/show/ and this is the fiddle http://jsfiddle.net/eqhH9/

I want to display one box with text and the other with a glyphicon as shown in the examples.This is the html 

<div class="col-sm-3 les_four">
<article class="les_two_boxes"><section class="les_b_1">hello<section class="les_b_2"><span class="glyphicon glyphicon-film "></span></section></section></article>
</div>

The problem is the first box <section class="les_b_1">hello... messes the entire box when there is more text.How can i fix this?.

Upvotes: 0

Views: 50

Answers (1)

Pete
Pete

Reputation: 58432

if you change your html to the following for each article (section.les_b_2 is no longer nested):

<section class="les_b_1">hello</section>
<section class="les_b_2"><span class="glyphicon glyphicon-film "></span></section>

You can use the following styles to achieve what you want:

.les_two_boxes {display:table; width:100%;}
.les_two_boxes > section {display:table-cell;}
.les_b_1{background-color:pink;vertical-align:top;width:60%;}
.les_b_2{border-left:1px solid white;font-size:30px;width:40%;background-color:brown;text-align:center; vertical-align:middle;}

Example

Upvotes: 1

Related Questions