Saul Ortega February 2016

Object gets pushed down when text on the right grows

How can I put the name David Laecke under the stop image with CSS?

Right now the text David Laecke depends on how much the text on the right grows so that name gets pushed down when the text on the right grows, but I would like it to be independent of the text on the right.

I already made it a div, I then changed it to a span and I changed the width to be less but I can see that it's for some reason taking all the space to the other side of the element, so that's why is being pushed down.

How can I do it? any help would be appreciated.

My HTML code:

<h4>
    <form method='post' id='deleteinsight-2' action="insights.php?chapter=1" data-ajax='false'> <input type='hidden' name='deleteinsightinput' value='2'>
        <a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' onclick='deleteinsight(this,event);' style='position:absolute;top:-20px;right: -10px' >Delete</a>
    </form>
    <div class='ui-grid-a'>
      <div class='ui-block-a textfloatleft' > 1 new </div>
      <div class='ui-block-b textfloatright'>   Jan 27 2016, 12:25 pm </div>
    </div>
    <div class='ui-grid-b' style='width:900px;'>
      <div class='ui-block-a' id='blocka'>
        <img  id='imguser' src='http://www.testingcolorvision.com/widget/core/restart.png'>
      </div>
    <div class='ui-block-b' id='blockb'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. I        

Answers


user5697101 February 2016

Just put the name in the same <div> as the image and it should work

Like so:

<div class='ui-block-a' id='blocks'>
 <img  id='imguser' src='http://www.testingcolorvision.com/widget/core/restart.png'>
 <br />
 <span id='namefirstlast'>David  Laecke </span>
</div>

https://jsfiddle.net/bkt27wvk/2/

Post Status

Asked in February 2016
Viewed 1,602 times
Voted 10
Answered 1 times

Search




Leave an answer