Question

This is a snippet of the code

<div id="container">
   <article>
      <p>contents</p>
      <img ... />
      <footer>meta data</footer>
   </article
</div>

#container{
  width:960px;
          }
article{
  width:640px; 
      }
footer, img{
    width:960px; /*well I may want it 640px but float right all the way back to the edge of #container*/
      }

The footer and image do not take that width; I tried the position:absolute and it works, but they go to the top, even when I add position: relative to the container.

Normally I would close the article tag, add the image, and then start with the article. This is not an ideal solution.

Answer 1

First thing is that they need to be block or inline-block to accept a width. Floats could cause weird wrapping. You could try overflow: visible to see if it helps.