Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

button float drops below parent div

Tags:

html

css

Given this simplified snippet :

<html>
  <body>
    <div>
      <div style='text-align:center;'>asdfaskjdfakjsd</div>
      <div style='float:right'>
        <input type='submit' value='asdf' />
      </div>
    </div>
  </body>
</html>

The button floats to the right, but below the text(On the next line). I know I can realign it using relative positioning, but is there a correct way of having both on the same line.

Even better if adding the button on the right would not effect the centre align of the text. ie it does not get pushed to the left.

like image 356
Kassym Dorsel Avatar asked Feb 20 '23 00:02

Kassym Dorsel


2 Answers

You can switch the order of the two divs:

  <div style='float:right'>
    <input type='submit' value='asdf' />
  </div>
  <div>asdfaskjdfakjsd</div>

As long as you don't mind them being in reverse order.

Here's a fiddle to demonstrate this effect. The fourth example shows the divs reversed.

like image 94
Steven H Avatar answered Feb 22 '23 14:02

Steven H


I apologize for jumping around. I noticed that even with the reversed divs, the text didn't appear completely centered.

Here is yet another solution (5th example): http://jsfiddle.net/tracyfu/zYzqr/

#method5 {
  position: relative;
}

#method5 .submit {
  position: absolute;
  right: 0;
  top: 0;
}

The only problem with this is that if you're not careful, or your text is dynamic, it could collide with the absolutely positioned submit.

like image 44
Tracy Fu Avatar answered Feb 22 '23 13:02

Tracy Fu