homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Problem with images in 100% <div>
When browser reduces in size, the images stack

 4:27 pm on Mar 11, 2003 (gmt 0)

I have a 100% wide <div> with 5 images inside it, when the browser reduces in size, the images stack to the left of the browser. Is there a way to solve this?




 4:39 pm on Mar 11, 2003 (gmt 0)

how are you putting the images? Are the positioned, rel/abs, are you floating them?


 4:40 pm on Mar 11, 2003 (gmt 0)

you could give it a fixed width?


 10:48 am on Mar 12, 2003 (gmt 0)

This is my test <div>. I want it to be 100% width as I have a text-align:center in it to center the images (soon to be buttons). The shim gif separates the button gifs.

<div id="buttons" style="position:absolute; width:100%; top:178px; left:0px; height:66px; z-index:3; text-align:center;">
<img src="images/button.gif">
<img src="images/shim.gif" width="50">
<img src="images/button.gif">
<img src="images/shim.gif" width="50">
<img src="images/button.gif">
<img src="images/shim.gif" width="50">
<img src="images/button.gif">
<img src="images/shim.gif" width="50">
<img src="images/button.gif">

I could easily put the image in a fixed width table, I just wanted to create a design without tables. Possible?


Longhaired Genius

 12:07 pm on Mar 12, 2003 (gmt 0)

What you want to do is quite possible.

You don't need the shim image; you can separate you buttons with their own margin. I would not give the buttons div a specific height; you should make sure it's deep enough with padding or margin. This will allow the div to become deeper when the browser window is reduced and the buttons form two (or more) rows.


 3:24 pm on Mar 12, 2003 (gmt 0)

This will allow the div to become deeper when the browser window is reduced and the buttons form two (or more) rows.

Hang on, this is what it's doing at the moment, I don't want it to form 2 rows, I want it to not collapse and I want the images to remain on the same line when the browser reduces.



 4:15 pm on Mar 12, 2003 (gmt 0)

Why not nest two divs? Just put all the buttons in the inner div and set a fixed width on it.


 5:32 pm on Mar 12, 2003 (gmt 0)

I think this is what you want to do:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>Img Demo</title>

<div id="main">
<img id="container" src="pic.jpg">
<img id="container" src="pic.jpg">
<img id="container" src="pic.jpg">
<img id="container" src="pic.jpg">
<img id="container" src="pic.jpg">




margin:2px auto;


With 5 images, I have 20% of space to work with for each one: so I break that up between margins and widths. Now, if you add borders, thats going to add to the complexity of the width formulation, because when using float, if your width+margin+padding+border adds up to more than 100% when adding up all 5 images, then it will wrap

So as long as you dont go over 100%, you are alright. If you do want to throw in 1px wide borders, for instance, you will need to make wrapper divs around the image. I just left this at the lowest complexity.


 12:43 pm on Mar 13, 2003 (gmt 0)

Thanks, but this seems to rely on images with percentage widths. For me it would not be a good idea to have the images stretch.


 5:04 pm on Mar 13, 2003 (gmt 0)

5 images eh, all some px size? I am making that assumption:

Well if absolute positioning is ok, then just position them where u want them:




#container1{top: 100px;margin-left:2%;width:100px;left:100px; position:absolute}
#container2{top: 100px;margin-left:2%;width:100px;left:200px; position:absolute}
#container3{top: 100px;margin-left:2%;width:100px;left:300px; position:absolute}
#container4{top: 100px;margin-left:2%;width:100px;left:400px; position:absolute}
#container5{top: 100px;margin-left:2%;width:100px;left:500px; position:absolute}

I could have done without the 5 seperate id's in the 2nd case.
my HTML, in this case, is just 5 images one after another. No containing divs.

If you want to relatively position, its not much different:




#container1{top: 100px;margin-left:2%;width:100px;left:100px; position:relative}
#container2{top: 100px;margin-left:2%;width:100px;left:100px; position:relative}
#container3{top: 100px;margin-left:2%;width:100px;left:100px; position:relative}
#container4{top:100px;margin-left:2%;width:100px;left:100px; position:relative}
#container5{top: 100px;margin-left:2%;width:100px;left:100px; position:relative}


 4:34 pm on Mar 14, 2003 (gmt 0)

whoops.........does it throw a spanner in the works when I say it needs to work in NN4?


 8:29 pm on Mar 14, 2003 (gmt 0)

Just a suggestion.

Why fight with divisions when there is already a tag to handle things like this. When it comes to multiple images IMHO tables make more sense.

Tables are designed for things like your situation and will probably remain a valid tag because of it. You can use all the styles for a div on a table and more.

Yes I know, "tables bad CSS good" but lets not through the baby out with the bath water.


 1:19 pm on Mar 15, 2003 (gmt 0)

there is already a tag to handle things like this...Tables are designed for things like your situation

No,no and no - get to the back of the class - the table tag is for marking-up tables. It is not meant for layout and should not be used for such (in fact no true HTML tag should be concerned with layout).

The whole point of CSS is to separate style from content.
Is this content a table? no its not.. it's a group of buttons.

Googly: so with your current design when you make the window to narrow, the buttons get reorganised into two rows so that they still fit nicely in the page. But what you want to do is have them start disappearing off the right hand side instead, is that correct?

Seems a slightly odd request but hopefully SethCalls solution is okay for you.


 2:48 pm on Mar 15, 2003 (gmt 0)

or try this..

<div id="buttonbar">
<div id="buttonbarinside">
<img class="button" src="button1.gif">
<img class="button" src="button2.gif">
<img class="button" src="button3.gif">
<img class="button" src="button4.gif">
<img class="button" src="button5.gif">

#buttonbar {
width: 100%;
text-align: center;

#buttonbarinside {
width: 700px;
margin: 0 auto 0 auto;

img.button {
margin: 0 25px 0 25px;

buttonbarinside is a fixed width which stops it getting squashed by the window resize. It is centered inside buttonbar so that it looks ok when the window is bigger.

Adjust the width of buttonbarinside so that it is set to whatever size you would like the images to start being forced off the right hand edge.

Still think this is an odd request. Isn't it better for your users with small windows to have the browser organise it into two rows of centered buttons rather than being forced to scroll to press some of them?


 8:48 pm on Mar 15, 2003 (gmt 0)

get to the back of the class

grahamstewart I'll assume by that comment that you atleast believe you're an authority on the subject. Maybe you can help me understand a few things. Here's my questions.

1/ As I understand it an HTML or XHTML document can contain any valid tags. Is <table> a valid tag?

2/ If so, what is <table> used for?

3/ Does a div automatically act like a table or does it require serious transformation far removed from its intended use?

4/ If so, why is it better to apply all sorts of unnecessary and excessively convoluted styles to one tag to make it act like another?

As I see it, you're misusing divisions just as badly as tables were once misused. Div is for LAYOUT. Not for reinventing other tags. Just because <table> was first used incorrectly for layout doesn't mean it can't be used at all. It's a darn nice tag for tabular display WITHIN a page which appears to me to be exactly what Googly is trying to do.

If I were to do something this pointless I'd just use JS because it has more methods of manipulate content.

As a side note, I'm forever fascinated by the tone of alot of peoples web comments towards others that wouldn't be present face to face. Is this a lack of vision? A lack of the ability to understand that you are communicating directly with another individual? It is a shame.


 1:48 am on Mar 16, 2003 (gmt 0)

Sorry if my post sounded a bit snotty - it was meant entirely tongue in cheek as you seemed to be aware that suggesting a table would incite some mild flaming. It was 2am.. perhaps I didn't word it quite as well as I should have.

I don't regard myself as any kind of authority. I'm just another hack trying to make a living. But I do believe that I understand the philosophy behind HTML and CSS - the separation of content and style.

Anyway, to answer your questions..

1) Yes table is a valid tag and should continue to be so.

2) it is intended for the structural markup of tabular data.

3) nope div doesn't act like a table. Div is a logical block grouping, not a table.

4) look at my solution - I am not emulating a table. I am using two simple divs with very little CSS. Why are those two tags more convoluted than the seven you require for a table?

I completely agree that we shouldn't avoid the table tag - however it should be used correctly. I don't think that structurally this group of buttons is a table, its just a group so I contain it in a div tag and then apply my styles to that.

That seems a perfectly reasonable use of the div tag to me.

If, at a later date, I decide to introduce a new stylesheet which allows the buttons to be reorganised to fit the page; or if I decide to lay the buttons out vertically instead of horizontally; then I could do that by changing the style and not the HTML.

Thus my content and styling are separate.


 5:20 am on Mar 16, 2003 (gmt 0)

I agree with you. In this case the buttons should be contained in divisions. With a table, there is no simple or reasonable option to realign them externally.


 1:16 pm on Mar 18, 2003 (gmt 0)

Ok, I think I better quickly tell everyone the point of my request. My request is based mainly on aesthetics than functionality. When the browser is small enough for the buttons to collapse onto two or more lines, the browser/web page would really be too small to use effectively anyway, (eg. 400px by 400px) What I'm saying is that I do not want the buttons to collapse and obscure the content which is sitting vertically below the <div>, it would be better to just disappear on the right side of the browser. Does that make sense?

With regards to function, the web page works fine for those sing 800x600, with it minimised to a 'reasonable' size.

grahamstewart your solution seems a good one, but an unfortunately belated comment on my behalf was that the layout had to work in NN4 (not necessary to stop stacking in NN4, but the buttons must stay in line when unaffected by the browser size). Your nested div isn't kind to the image in NN4 as they all stack vertically from the start. Thanks anyway.

Yes gph, I have used <table> in my testing, and yes, I do want to get away from it and try a solution with <div> + css.

The solution which I'm hovering around at the moment is a fixed width div, as wide as the space taken up by the buttons. I then use javascript to center the div in the window, not css but hey!. This has the effect that when the width of the browser shrinks, the buttons disappear to the right. Any other ideas?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved