CSS Positioning problem!

Hi guys! I have a problem here.

so, here I've just created a simple box model to show how I want it to be;


You see the side boxes, right? I want them to stick a bit out side the "content" I'm absolutely not new at CSS, but I need help.

How do I do to position those boxes? Without that they will fixed to -20px, etc. so when you resize the window (or somebody who doesn't have the same size as me on the screen).

So: How would I position the right and left box? And the clips (they will be like paper clips ) With Relative positioning? Or? HELP!

Can anybody help me?

 

I tested to have the right and left boxes in relative positioning. It looks fine! BUT! It looks very different in IE, than it was in FF..

Please, help me

 

Try a haslayout trigger on their parent element. Basically if you have a div wrapping all three columns, toss zoom:1; at it and see if it helps in IE.

Though I'd probably be using a content (aka center column) first layout technique and then some negative margin tricks to put things where I want them.

 

Hi,

this code will do what you want. I haven't tested it cross browser but it should work.

HTML:

<div id="header"></div>
<div id="wrap">
  <div id="content"></div>
  <div id="left-column"></div>
  <div id="right-column"></div>
  <div id="left-clip"></div>
  <div id="right-clip"></div>
</div>

Code (markup):

CSS:

#header { width:900px; margin:0 auto; height:100px; background-color:#03F; }
#wrap { margin:0 auto; width:980px; overflow:hidden; background-color:#0CF; position:relative }
#content { width:520px; margin:0 30px; padding:0 200px; }
#left-column { position:absolute; top:0; left:30px; width:180px; background-color:#9C0; }
#right-column { position:absolute; top:0; right:30px; width:180px; background-color:#0C9 }
#left-clip {position:absolute; top:30px; left:0; width:180px; background-color: #6F9;}
#right-clip {position:absolute; top:60px; right:0; width:180px; background-color: #30C;}

Code (markup):

Let me know how you get on with that. it should be fairly straightforward. It uses relative and absolute positioning. A lot of people will tell you not to use that type of positioning, but it does have it's uses when used correctly.

Cheers.