CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1642018
user1642018

Reputation:

Bootstrap Div inside dd, alignment issue

I am trying to align div tag inside dd tag. but the div is getting on the new line. I have to use div for using it as javascript selector.

HTML

<dl class="dl-horizontal dl-horizontal-info">
    <dt>created</dt>
    <dd>2013-11-24 09:47:55 GMT</dd>

    <dt>uploaders</dt>
    <dd><i class="fa fa-arrow-up"></i> <div id="uploaders">445453</div></dd>

    <dt>downloaders</dt>
    <dd><i class="fa fa-arrow-down"></i> <div id="downloaders">123123</div> <a href="javascript" class="btn btn-default btn-xs pull-right" id="refreshbtn"><i class="fa fa-refresh"></i> Refresh</a></dd>

    <dt>Updated</dt>
    <dd id="date">2013-11-24 09:47:55 GMT</dd>
</dl>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.0.3/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");


.dl-horizontal-info > dt{float:left;width:120px;overflow:hidden;clear:left;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.dl-horizontal-info > dd{margin-left:130px}

http://jsfiddle.net/whats_wrong/y22ZH/

In above example the Div tag having id uploaders and Div tag having id downloaders are getting on the new line. how can i get then on the same line as of dd and icons.

Upvotes: 1

Views: 968

Answers (4)

Rohitha
Rohitha

Reputation: 759

To display uploaders and downloaders values in same line you can use span tags instead of div tags. for example:

 <dl class="dl-horizontal dl-horizontal-info">
    <dt>created</dt>
    <dd>2013-11-24 09:47:55 GMT</dd>
    <dt>uploaders</dt>
    <dd><i class="fa fa-arrow-up"></i> <span id="uploaders">445453</span></dd>
    <dt>downloaders</dt>
    <dd><i class="fa fa-arrow-down"></i> <span id="downloaders">123123</span> <a href="javascript" class="btn btn-default btn-xs pull-right" id="refreshbtn"><i class="fa fa-refresh"></i> Refresh</a></dd>
    <dt>Updated</dt>
    <dd id="date">2013-11-24 09:47:55 GMT</dd>
</dl>

Check this link: Updated code

Upvotes: 1

lubert
lubert

Reputation: 119

You want to add style: "display: inline" to the divs, or div { display: inline } to get them to appear on the same line

Upvotes: 1

Abhineet
Abhineet

Reputation: 632

try it..

dd div {
    display: inline-block;
}

Upvotes: 1

hannebaumsaway
hannebaumsaway

Reputation: 2734

Use this CSS for #uploaders and #downloaders (or simply dd > div):

display: inline;

Upvotes: 1

Related Questions