CODEWITHSUNDEEP
htmlcss
Arun Bertil
Arun Bertil

Reputation: 4638

Div content in same line

Following is the js fiddle

http://jsfiddle.net/zk7Uf/1/

<div style="width:200px">
    <span class="span-blankPDF">
        <label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving:</label>
    </span>
    <div class="div-PDF" style="display: inline;width: 50px;">Reason  to  livelong</div>
</div>

The result i want is like this with the above divs width should not be increased.

Reason for leaving:Reason  
                   to  livelong

Upvotes: 0

Views: 2034

Answers (2)

Alex B.
Alex B.

Reputation: 647

Assuming your span element should remain a span and the div inside should remain a div, you can do it nicely with some CSS.

Use the display: inline-block to get rid of how span and div position themselves by default. Then use vertical-align: top to make the elements in the same line align on top of their containers.

So, without changing the widths (as you requested) and just adding some CSS, you can write it like this:

<div style="width:200px;">
    <span class="span-blankPDF" style="display:inline-block;vertical-align:top;">
        <label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving</label>
    </span>
    <div class="div-PDF" style="display:inline-block;width:50px;vertical-align:top;">Reason  to  livelong</div>
</div>

Se live demo here: http://jsfiddle.net/Vg6RG/

EDIT: You get the same result sa Pogrindis suggested, but this one is not using floating.

Upvotes: 0

Pogrindis
Pogrindis

Reputation: 8091

I think this is what you are looking for :

http://jsfiddle.net/BY294/

<div style="width:200px">
<span class="span-blankPDF" style="float:left">
    <label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving :</label></span>
    <div class="div-PDF" style="display: block;width: 50px; float:left">Reason to livelong</div>
    </div>

Position them baby!

You want the span to float left so it has a point of reference, then you want the next div to be a block as its its own entity as such and float that left to 'lean' on the span you have..

Or else i have completely misunderstood the question, in which case im not to blame! :)

Upvotes: 1

Related Questions