Jump to content

How do you align an image directly over 2 columns?


Recommended Posts













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 comment
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 comment
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 comment
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 comment
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...