Home/ Questions/Q 6903541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:56:18+00:00

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>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0