Search code examples
htmlcssfixed

Fixed CSS Div overlaps other box

I'm not really a CSS-hero ;-) Well, I try to create a form with bootstrap and some custom css.

I want 3 columns:

  1. Content
  2. Editor
  3. Settings

The Editor should be fixed.

Thats my html: http://d.pr/n/YsVJ

The part of the fixed editor is:

<div class="form-vertical fixed"> <?php echo $this->form->getControlGroup('content'); ?> </div>

I added some custom css like this:

http://d.pr/n/v9EN

Well, it works, the editor is fixed, but there is one problem: If I use my iPad or Netbook the div of the editor overlaps the div of the settings (span3).

How can I solve that?

Solution

  • By setting something as fixed it removes it from the flow of the document, which means it won't affect anything else on the page.

    You would need to use a margin or padding to create a bit of extra space for the element that is being overlapped and not positioned fixed.