Right aligning image in max-width div

Question

Hello,

I have a wrapper div with a max width of 700px and the only content is an right-aligned image of less than 700px width. Since it doesn't fill it, the wrapper doesn't expand to 700px. How can I make the wrapper expand to the full width when there is space in the browser window? The only hack I have found so far is to also include a zero height span with more than one line of text in...

Answer 1

A div should by default expand horizontally to the width of it's parent object. Try setting a width on the div to 700px.

Answer 2

You can set overflow: hidden on the 700px div, assuming that you are not setting an explicit height.

Answer 3

As CRasco mentioned, a Div will normally expand to fill its container, until we come along with some fancy style and screw that up. Here are the styles I can think of off the top of my head that will prevent a Div from expanding to fill its container:

These will make it the smallest size needed to hold its contents.

• float: left;
• float: right;
• display: inline;
• display: inline-block;

And, of course, any of these would set or restrict the size of the Div. I'm betting you'd have noticed if these were causing your problem, but I thought I should include them to be as complete as possible.

• width: 100px;
• max-width: 100px;
• height: 100px;
• max-height: 100px;

Answer 4

If you know the with of the image you could add a margin to it.