In a regular-sized monitor, the four images in the main content line up exactly how I want them to look. But in a wider-screen monitor, there’s a large amount of empty space between the big image and the three smaller ones to the right.
Is the solution to ‘align: center’ everything, or is there an easier way? I just want the images to have the same position regardless of the size of one’s computer monitor.
As you have fixed size images you are probably better off putting them in a fixed width container and using margin:auto to keep them centred on the viewport.
You could scale the images but the results can be varied.
Copy and paste that code and run it in the browser while online and you should see the effect.
Be careful when using height for text containers as that will stop any content showing outside if the user resizes the text (or if text wraps). Use min-height instead if you want an initial height or just let the content dictate the height.
OK, I did that. There is still an amount of space between the big image and the three smaller ones. Do I just create some padding to bring them closer together?
Ray’s (dresden_phoenix) example above shows you how to bring them closer together in a fixed width scenario. My code example in my first post shows the alternative (responsive) version where the large image stretches to fill the available space as the screen grows and shrinks and looks quite good in my opinion but if you want a fixed width then Rays example is the one to follow.
Actually the op’s original code was in source order but in my example I changed the source order to allow for the stretchy behaviour of the large image as floats must come first as you know
Yes, basically when you have two columns but you want one column to be fluid you can’t just float both columns.
Therefore you must first float the fixed width column so that it is first in the html. Then the content that follows will wrap alongside the float but to stop the content also wrapping underneath the floated column you need to use a margin to avoid the float. You must remember that margins on static elements will slide under a float because floats are removed from the flow so in order to keep a static element in a square box to the side of say a 200px float you must use a margin equal to or greater than the width of the float which would be 200px.
This creates a float to the right but then a rectangular block to the left that fills and stretches the available space and will flex with the browsers width.
The reason that I then added an extra 100% floated inner element was in order to avoid a float drop scenario because if you place an element in the left column and you simply apply clear:both to it it will then clear the floated right column in apparent error. Using a 100% float to contain the content on this “non-floated” side ensures that any clear statements in that section do not affect any other floats outside that context. (It can be done in less code by applying overflow:hidden to the static element (and zoom:1.0 for ie6 and 7) but then means you are restricted to having any visible overflow in the future which may be limiting.)
Last night I changed the picture on the main page, and added another small picture in the right column. This lined up perfectly on my PC at home. Now, when I look at it on a smaller screen, the right column pictures don’t line up with the picture in the left column.
How can I make the pictures in the right column line up with the length of the picture in the left hand column?
Of course now you are really starting to stretch that image and perhaps you need to think carefully about how you want this to look. It was ok with three images at the side but with 4 images you are stretching things a little. Maybe the left picture should have been a background image instead and you just reveal more or less of it as required and then overlay the real text content on top of the image as normal browser text (Mon- sun and menu text etc). After all “content” is what is important to the web and not pictures of text.
You need to stop and think a bit about what you are doing when you make random changes and how the changes will affect the layout.
To return to the previous display you would need to change the height and min-height again.
#left-column {
overflow:hidden;
[B]height:515px;/* match min-height of image */[/B]
margin:0 200px 20px 10px;
}
#left-inner {
width:100%;
float:left;
}
#left-inner img {
width:100%;
height:auto;
[B]min-height:515px;[/B]
}
However, because you have now added important text to your big image the text content will be cut off because we are hiding the overflow to keep the image level with the images on the right.
Therefore you will need to keep the image at full height and scale the width only which won’t look as good but keeps your content in view.
#left-column {
overflow:hidden;
height:515px;/* match height of image */
margin:0 200px 20px 10px;
}
#left-inner {
width:100%;
float:left;
}
#left-inner img {
[B] width:100%;
height:515px;[/B]
}
As I mentioned above you really don’t want to add important text as an image as that goes against every concept of good and accessible web design. You may as well just draw your whole site in photoshop and upload a picture of the whole site if you follow that line of thinking. It’s not what the web is about. You must have accessible content in the form of normal browser text for most of the information you want to convey.
I would remove all that text from your image and just overlay it in normal browser text so the content is actually in the html and accessible to all. Of course you would have to position it as required so would take a little while to do but you shouldn’t really add information to an image unless its the odd word or two for a heading or logo and then you can use an accessible image replacement technique.
It almost looks like you could instead have an image slider with perhaps captions over the top providing information.
