Carrying a wide item inside a narrow column

I have a form of width 450px with one item that has to take the full page's width (990px).

position:absolute is a problem because this wide item needs to fit in the flow of elements inside the form. margin-left:-270px seems a bit hackish and likely to break down with future rule changes. Is there a better solution?

How can I get an element in the form's flow that takes up the whole page's wid开发者_运维百科th?

If you're using fixed width layouts, I don't really see a margin-left of -270 as being hackish. If you hadn't posted it yourself, it would be the answer I would suggest.

To make it seem less hackish, an alternative might be to use Less - it's effectively a CSS based language that compiles to plain CSS. You could then specify the rule so that changes to the form or page width will automatically sort out your margin also:

@page_width: 990px;
@form_width: 450px;
...
.full_width_form_element {
  margin-left: (@form_width - @page_width) / 2;
}

http://lesscss.org/

Use the overflow property of CSS. overflow: auto to cause scrolling, overflow: visible to allow it to leak out of the box. overflow: hidden to hide whatever part of it leaks outside the box.