CODEWITHSUNDEEP
csscss-floatcenter
Norse
Norse

Reputation: 5757

CSS Float an element next to a centered element

I have a table in the center of my page

http://jsfiddle.net/YrBnd/3/

Is it possible to place the button in the example, just to the left of the table?

This highly skilled drawing should give you a better picture:

|                  |
|    $$center      |
|                  |

Where $$ is the button I want to place off center.

Upvotes: 6

Views: 926

Answers (3)

Anil kumar
Anil kumar

Reputation: 136

.center
{
   width:250px;
   margin:0px auto 0px auto;
}
.center input[type="button"], div
{
   float:left;
}

<div class="center">
   <input type="button" name="submit" value="$$" />
   <div> center text </div>
</div>

Upvotes: -1

iBoonZ
iBoonZ

Reputation: 1035

you can solve this with jquery.

on page load you can check where the table starts and then add the button to the left of this table

For example

$(function(){
  //Get the left position of the table
  var leftPosition =  $("table").offset().left;
  //Get the top position of the table
  var topPosition=  $("table").offset().top;

  //Now add the left position of the table minus the button width and a spacing of 5
  var leftButtonPosition = leftPosition -  $("myButton).width() + 5;

 $("myButton).offset({ top: topPosition + 5 , left: leftButtonPosition });
});

et voila ;)

Upvotes: -2

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

Try this approach, based on your jsfiddle:

HTML

<span>Center body text<button>Click</button></span>

​ CSS

span {
    display: block;
    width: 200px;
    margin: 0 auto;
    position: relative;
}
button {
    position: absolute;
    right: 100%;
}

​ http://jsfiddle.net/YrBnd/4/

The button is placed absolutely, from the right edge, to 100% of the width of the span element.

Upvotes: 9

Related Questions