ansaurus

Question

Answer 1

A:

It can work with either absolute or relative positioning as long as the image width and height are defined.

Update for your recent edit

The issue is that you need to use relative positioning. You should also have a container DIV for the image and the sidebar div, because they will still act incorrectly with only the body as a parent.

You then need a min-width on the container div, set to the min-width which you illustrate in the newer image. These things together will give you what you want.

Note that the sidebar content needs a different margin in this code I'll be posting. I'm not sure why because I'm a little rusty with my CSS but now that both are relative positioned, if you have no negative margin on the sidebar content, the top of it will be aligned to the bottom of the image. I know that margin-top: -256px will get it aligned with the top of the image. Then to vertically center them you need to add half of their difference or (256 - 400) / 2, so you add -72px to the -256px margin to center them again.

Here's the code that works for me:

<html>
<head>
<title>Title</title>

<style>

body {
  margin: 0;
}

#container {
  background: #DDD;
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 900px;
}

img#image {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -128px 0 0 -432px;
  background: black;
  display: block;
}

div#sidebar {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -328px 0 0 0;
  width: 368px;
  height: 400px;
  background: grey;
}

.footer {
  color: #202054;
  text-align: left;
  font-size: 12px;
  text-decoration: none;
  margin-left: 20px;
}

a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }

span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }

a.footer:hover {
  color: #EE001E;
  text-decoration: underline;
}
</style>

</head>
<body>

<div id="container">

    <img id="image" src="" width="432" height="256"/>

    <div id="sidebar" style="">
      <!-- text content -->
      content
    </div>

</div>

<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
  <a style="text-decoration: none;" href="http://www.company.com" >
    <img class="footer" src="" alt="company" width="21" height="13" />
  </a>
  <a class="footer" href="#">Terms of Use</a>
  <a class="footer" href="#">Privacy Policy</a>
  <span class="footer" style="color: #7E7E7E;">Copyright &#169; 2009 Company Inc. All rights reserved.</span>
</div>


</body>

</html>

Note I added colors to help me along, and also I found that you must add display: block to the image.

Hope this helps.

Note: The min-width value was arbitrary. It just needs to be greater than the width of both elements. You may want to play around and see what width the sidebar starts to fall off the page (clipping to the right is unavoidable in browsers)

jonwd7 2009-07-12 08:10:19

Updated. Hopefully you can help!

Michael Swarts 2009-07-12 19:35:34

OK, updated. The image no longer falls off the left of the page.

jonwd7 2009-07-13 01:41:17

Thanks for the reply. I wasn't able to get it to work. It was alright, except it wasn't vertically centered. The top half of both the image and text divs were cut off. The "top: 50%" did not work. I am testing in Safari 4. Any thoughts?

Michael Swarts 2009-07-13 14:23:29

It centers vertically for me in Safari 4, and every other browser I test. Did you paste in my exact code?

jonwd7 2009-07-14 11:10:16

Answer 2

A:

I think you might want something like this:

<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto">
<img src='...'>
</div>

But to center image vertical you will need to put it into table or use JavaScript.

Thinker 2009-07-12 08:33:26

Not true. You can use css to center vertically. Just not straightforward.

cdm9002 2009-07-12 18:54:19

Also as I said in my answer, you can center vertically if you have the height/width of the element, which he does. I'm not sure if this is what cdm9002 is alluding to, or if he's talking about things like `table-cell` display properties, etc. :)

jonwd7 2009-07-13 01:45:50

ansaurus

tags:

views:

answers:

Desperate image positioning problem

Update for your recent edit

related questions