CODEWITHSUNDEEP
asp.netcss
user2067567
user2067567

Reputation: 3803

Aligning Div in css

I am trying to align div and all my efforts using float and margins didn't bring what I want. So I thought this is the right place

basically looping the below in Foreach:

<div class="comment_name">@Html.displayName</div>
<div class="comment_time">@Html.formattedDateTime(item.dTime.Value)</div>
<div class="comment_body">@item.displayComments</div>

and am trying to display like the below text:

Dispaly Name , 11 Feb 2013: User entered comment.

What should be the CSS to make it work?

Updated after Span answer

Span worked. But am having issues if the length of comment is long. am getting like below

Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid. This article tries to answer the following question

but which should be

Dispaly Name , 11 Feb 2013:The example will show you how to implement a read-only grid.
                            this article tries to answer the following question

Upvotes: 0

Views: 58

Answers (3)

insertusernamehere
insertusernamehere

Reputation: 23580

Personally I would say use <span>s instead of <div>s as they are already inline elements:

<span>@Html.displayName</span>
<span>@Html.formattedDateTime(item.dTime.Value)</span>
<span>@item.displayComments</span>

If you want to stick to <div>s use:

display: inline;

or if the single containers have for example a fixed width:

display: inline-block;

Edit

To achieve the result in your updated question, you can use this:

HTML

<span>Dispaly Name,</span>
<span>11 Feb 2013:</span>
<span> The example will show you how to implement a read-only grid. This article tries to answer the following question.
</span>

CSS

span {
    vertical-align: top;
}

span:last-child {
    display: inline-block;
    width: 400px;
}

DEMO

http://jsfiddle.net/jkZeZ/

Upvotes: 2

Andrea Ligios
Andrea Ligios

Reputation: 50193

You can use float: left on every div and clear: left; for the first one;

Demo: http://jsfiddle.net/9mfR8/

div {
    border: 1px solid red;
    float: left;
}

.comment_name{    
   clear: left;
}

Or you can use display: inline-block; for the three divs and enclose them in a container div (that is display: block by default and will force a "new line"),

Upvotes: 2

thesheps
thesheps

Reputation: 655

The following should achieve what you require:

.comment_name {
    display: inline-block;
}

.comment_time {
    display: inline-block;
}

.comment_body {
    display: inline-block;
}

Upvotes: 0

Related Questions