CODEWITHSUNDEEP
htmlcsscss-position
wchargin
wchargin

Reputation: 16047

How can I float an element above the DOM but keep the vertical flow?

I have a website that has a main column with of 800px, centered. There's a Java applet that I want to embed in the webpage, but the applet itself is 900px wide.

I'd like to be able to position this element within the DOM, but have it span outside the horizontal bounds of the containing div. I still want it to follow the vertical flow of the DOM. Here's a mockup:

Mockup of intended design

Is there a way to allow this to happen? The width and height of the applet and containing div can be fixed, but I'd like a clean solution (i.e., no absolute positioning plus a blank.gif @ 900×700).

A non-JS solution would be best but I can use JS/jQuery if necessary.

I'm currently using the Fancybox plugin for a similar effect with images but can't figure out how to get it to load an applet.

Any suggestions?

Upvotes: 0

Views: 131

Answers (1)

Carlo Cannas
Carlo Cannas

Reputation: 3262

You can use a negative left margin, wide 50px for this specific case, which comes from the formula (applet width-container width)/2.

You can also use relative positioning.

Upvotes: 2

Related Questions