How do you align an image directly over 2 columns?

[Zad]

I'm trying to overlay an image (and some text below it) directly over two adjacent columns, like this: http://snipr.com/css.image

 

There won't be any content in the bottom section of the left & right columns - only the image. How is this done...I assume that I have to use absolute positioning?

 

BTW, I will be using an external style sheet.

 

-Thanks

[jlhaslip]

Nope, margins and padding should be able to do that for you.

Do you have the basic code for the page so we can mess around with a sample?

I don't feel that we need to write the entire page for you.

Edited March 15, 2009 by jlhaslip

[Zad]

 

 

 

 

 

Header

 

 

 

 

 

 

Content column

 

 

 

Yak yak...

 

 

More content

 

 

 

Blah blah...

 

 

 

 

 

Left column

 

 

...some text here

 

 

 

Right column

 

...Rilvan quis lectus ac nulla mattis auctor aliquam

 

 

 

 

 

 

 

 

footer

 

 

 

 

 

 

[Wickham]

You can do it with position: relative for the image to move it across under the middle of the left and right columns like I have done here:-

 

http://www.wickham43.com/forumposts/zad090316.html

 

or use position: absolute.

 

You only showed one image in your example

http://ibennia.fileave.com/positioning.JPG

so I haven't shown the second one which you have in the code.

 

I didn't like your very large side margins and negative margins so I rearranged the divs.

 

It also didn't validate so I cured that too. I used the HTML 4.01 doctype as we prefer that on this board.

 

You still have lots of nested divs which could be combined into the containing div to simplify the coding.

 

Your example image shows borders to the divs which I've shown here:-

http://www.wickham43.com/forumposts/zad090316-1.html

I had to add heights to the divs. There is a way to make the divs flexible in height and all keep the same height as the div with the most content, but I haven't had time to code that method.

Edited March 16, 2009 by Wickham

[Andrea]

I used the HTML 4.01 doctype as we prefer that on this board.

It's not actually just a board preference - it's based on solid info on what doctype applies to what situation.

 

HTML or XHTML

[Zad]

Wickham - Thanks for all your help. The image I am trying to position has these dimensions: width=141, height=171. The taller size apparently pushes the text (under the image) down so that it overlaps the footer, especially when viewed in Safari. How do I prevent this?

[Wickham]

My second solution had fixed heights so you could edit the top position of the div with the image:-

 

 

 

Text under image

 

or increase the heights in:-

#content_column { }

#left_column { }

#right_column { }

 

As I said, creating fluid heights where the background-colors or border heights are the same for all divs is more difficult.