Search code examples
htmlcsspositioning

Positioning a button with CSS

I have the following standard markup:

<body>
  <header><div class="wrapper">Header</div></header>
  <div id="create">create something</div>
  <div class="wrapper">Content</div>
  <footer><div class="wrapper">footer</div></footer>
</body>

and style:

.wrapper {
    width: 920px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...

enter image description here

The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.

Any advice would be appreciated, thanks.

Solution

  • One element for the button and another element for the line that goes into the infinity and beyond..

    The infinity element is partially hidden under #wrap or #header element's background.

    http://jsfiddle.net/lollero/62wcV/1

    CSS:

    #wrap { 
    width: 400px;
    margin: 0px auto;
    background: #ffffff;
    position: relative;
    z-index: 10;

    height: 600px;
}

#button,
#button_line {
    position: absolute;
    top: 40px;
    right: 0px;
    height: 20px;
    background: #3a99ff;
}

#button {
    width: 100px;
}

#button_line {
    left: 50%;
    z-index: 5;
}

    HTML:

    <div id="button_line"></div>

<div id="wrap">
    <div id="button"></div>
</div>