Kind of a dumb question, I know. I want the photo and text to be left-aligned, but remain unaffected by browser window size. Can't use absolute positioning because the image size is going to change with each page. What is a simple way to do this. Floating the divs left does not work when the browser window is reduced. Here's some big screen caps: Notice screen size

The text gets shifted down

11 answers

3
points
This was chosen as the best answer

Something like this should do it (tested in Safari 4):

#container {
    float: left; /* Containing floats */
}
#image {
    float: left;
    margin-right: 200px; /* right margin (width of text box) */
}
#text {
    float: left;
    width: 200px;
    margin-left: -200px; /* compensate right margin of image box */
}

<div id="container">
    <div id="image">Put image here</div>
    <div id="text">Blabla</div>
</div>
Answered over 7 years ago by Thomas Jaggi
2
points

To tack onto Anatoli Papirovski's comment -- You can set the image's padding to the right, then set negative margin on the text box, instead of using absolute positioning.

Answered over 7 years ago by Brad Czerniak
2
points

If you're going to implement the solution that Thomas proposed, then please make sure to add "display: inline;" to both #image and #text if you're planning to support IE6. If not, then it's fine as is.

Answered over 7 years ago by Anatoli Papirovski
1
point

You can actually use absolute positioning for this. Simply set padding-right on the image which would be equal to whatever space you need to the right of the image and then position the text block using "top" and "right". There's also other ways of doing this, but this one is the quickest.

Something like this:

.image {padding-right: 400px;}
.content {position: absolute; top: 50px; right: 50px; width: 200px;}
Answered over 7 years ago by Anatoli Papirovski
orta 244
0
points

You could wrap them both in a div that is big enough to hold them, this would mean as the browser is resized the content inside it isn't floated around.

Answered over 7 years ago by orta
0
points

This design is for a photoblog, so the image could be landscape here, and portrait the next. How would I know how big to make the wrapping div?

Answered over 7 years ago by Johnny Rygielski
orta 244
0
points

There's a slightly hacky way by setting the div as long as the largest photo you can imagine being on there plus the text, and then using overflow-x:hidden; to ensure you get no horizontal scrolling.

Another option is to work with the max-width: 300px property on the photo, but that too comes with its own draw backs.

Or someone else may have a better method :)

Answered over 7 years ago by orta
0
points

Without your exact setup to play with, I'd recommend setting the min-width of the container to a size larger than the largest photo + the text block. Then the container can never be small enough to float drop the text.

If you need to support <IE7, you could use a min-width hack like _width or something similar.

It might be worthwhile to scale the images to a maximum width on the server side and then use a fixed-width page, so as to avoid horizontal scrolling.

Answered over 7 years ago by Brad Czerniak
0
points

To throw in my guess - you have a wrapper container that isn't doing its job. You should wrap both the image and the content in a container that is wide enough to handle both elements. You should also be centering the container to deal with browser resize to a certain point. If you had a code sample to see, it might be easier to fix.

Answered over 7 years ago by Zach Holmquist
0
points

Well, that would exactly be Brad's suggestion. I should have typed faster. ;)

Answered over 7 years ago by Thomas Jaggi
-1
points

If you're not wanting the text to drop at any stage you will have to set a width on your container div. Unfortunately this will cause a horizontal scrollbar at some point for small size windows or resolutions. I usually cater for 1024x768 which means a container width of 996px for maximum window usage.

Keep your image and text column (still floated) widths inside the 996 and you wont have a problem.

Answered over 7 years ago by MattCordell