Home/ Questions/Q 8542709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:07:55+00:00

I have no idea how to title this properly, but here is my problem:

  • 0

I have no idea how to title this properly, but here is my problem:

I have this layout:

<html>
<body>
    <div id="content">this is my page</div>
    <div id="button">magic button</div>
</body>
</html>

css: 

#button {
  position: fixed;
  bottom: 20px;
  background-color: #f00;
  padding: 5px;
  left: 50%;
  margin-left: 250px;

}

html, body{
  height: 100%;
}
#content {
  margin: 0 auto;
  width: 700px;
  min-height: 100%;
  background-color: #eee;
}​

See fiddle here: http://jsfiddle.net/n6UPF/

image

My page works just as I want it, the button is exactly where I want it to be.

But if I change the text on my button, it is no longer positioned properly.

I would like to position it “fixed” relative to the right edge of my content area.

Can this be done in pure CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If modifying the HTML is acceptable, you can use a wrapper:

    <div id="button-wrapper">
    <div id="button">magic button</div>
</div>

    #button-wrapper {
    bottom: 40px;
    left: 50%;
    margin-left: 350px;
    position: fixed;
}

#button {
    background-color: red;
    padding: 5px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
}

    http://dabblet.com/gist/3740941

    No, it’s not really pretty, but…

    • 0