CODEWITHSUNDEEP
htmlpositioncss
addMitt
addMitt

Reputation: 1021

Dynamic width with an absolute starting position

I have a header with two images next to each other (an icon and a wordmark). The first image has an absolute size, however the second image, a longer word logo, has a dynamic width. What I'd like to happen, is for this wordmark to size dynamically based on screen size (it's a responsive page) while remaining next to the icon. If I take the inline route, it jumps to a new line before relying on max-width to resize the image.

I tried absolute positioning, but the 100% width is always the entire screen width. If I specify left: 20px, it first grabs the full screen width, and then moves the element over 20px. Now the right 20px of the element are clipped off the screen. I tried adding right: 20px to that as well, and the result was the same.

So what I'm looking for is how to have a block with dynamic width (in this case, max-width=100%), but an absolute starting position. If that makes sense?

Do floats work for something like this? Perhaps background images on normal inline-block div elements?

Thanks for reading. I can attach code but I've tried all kinds of different things and I'm not really sitting on much right now.

EDIT: I didn't feel a fiddle would help me describe my problem, I made this image instead: http://i2.minus.com/ifZnLFtk4cfyf.png

Upvotes: 0

Views: 6658

Answers (2)

Jon
Jon

Reputation: 437386

If your elements have a fixed height (which in your case it seems they do) you can use absolute positioning to do this easily.

HTML:

<div id="outer">
    <div id="fixed"></div>
    <div id="fluid"></div>
    Some more content to show that layout continues without issues from here on
</div>

CSS:

div { height: 50px }
#outer { position: relative }
#fixed { width: 20px; }
#fluid { position: absolute; top: 0; left: 20px; right: 0; }

See it in action.

Upvotes: 0

Adam Hart
Adam Hart

Reputation: 569

I think you were getting close with the right and left attributes, try this: http://jsfiddle.net/N8GJa/

You can place the images inside each div with 100% width.

#static {
    position: absolute;
    left: 0;
    top: 0;
    width: 3em; // fixed image width
}
#dynamic {
    position: absolute;
    top: 0;
    left: 3em; // same as width above
    right: 0;
}

Upvotes: 1

Related Questions