Jump to content
Killersites Forums

How do you align an image directly over 2 columns?

Recommended Posts

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.



Link to post
Share on other sites

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 by jlhaslip
Link to post
Share on other sites













Content column





Yak yak...



More content





Blah blah...






Left column



...some text here




Right column


...Rilvan quis lectus ac nulla mattis auctor aliquam
















Link to post
Share on other sites

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:-




or use position: absolute.


You only showed one image in your example


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:-


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 by Wickham
Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...