Log in

View Full Version : Problem With In-line Wrapping of Graphics


iluvcss
08-06-2012, 02:36 AM
I have been losing much sleep over this problem for months.

I am trying to create a resizable container which holds a series of thumbnail-sized inline graphics which float and wraps to the left, no matter what size the viewport is resized to.

The problem I am facing is that whenever the resized viewport does not exactly fit a full graphic, there is an empty gap (margin) on the right side of the viewport. This however does not happen when the empty space can fit a graphic's width.

What I need is for the right frame edge of the viewport to bealways touching the right side of the inline block of graphics.

A sample of my code is as follows:-

<html>
<head>
<style type="text/css">

.celldiv {
display:table;
width:200px;
height:50px;
float:left;}

.cellspan {
display: table-cell;
vertical-align: middle;
text-align: center;
line-height:11px;}

</style>
</head>
<body>
<div id="container">
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
<div class="celldiv"><span class="cellspan"><b>Reserved</b></span></div>
</div>
</body>
</html>

Is there any way to achieve the desired result? Hope someone can help me out on this. Many thanks in advance.
keyboard
08-06-2012, 02:39 AM
Please use the forum's bbcode tags to make it more readable:

for php code............
<?php /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................

Also, not 100% sure what you mean, but try changing


.celldiv {
display:table;
width:200px;
height:50px;
float:left;}
to




.celldiv {
display:table;
width:auto;
height:50px;
float:left;}
iluvcss
08-06-2012, 02:21 PM
Thank you for your suggestion. I need the graphic to be only a background in a fixed-sized cell. This link shows a sample if what I mean:

http://www.yuppyproducts.com/indexspecial.html

If you resize the window, you will find that there will be a blank space on the right of the block of graphics (a background image), whenever the space is less than the full width of the graphic. I want to eliminate that column of blank space on the right of the block of graphics.
williamsun
08-06-2012, 06:31 PM
That's normal behavior. The only way I can think of to eliminate the white space is to make the buttons variable width by using min-width and max-width on them so they stretch to fill the window until they reach min-width and wrap around.

Maybe somebody else has a better suggestion.
iluvcss
08-07-2012, 12:32 AM
That's normal behavior. The only way I can think of to eliminate the white space is to make the buttons variable width by using min-width and max-width on them so they stretch to fill the window until they reach min-width and wrap around...

I like your suggestion of using the min-width/max-width solution. Can you show me an example by modifying my coding?

If the viewport/window will automatically wrap nicely around the graphics block without any white space, I'll be very happy. Thank you.
auntnini
08-07-2012, 12:44 AM
Sorry, couldn't resolve your stated problem (could not wrap my brain around correct percentage width), but you can simplify your code. If content is only 1 line, setting line-height to font size will center it vertically. Also using "background" as attribute in opening tag is old way of specifying background- image; for background-color it would be old <BODY bgcolor="#000000">



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#container { display:block; margin: 0 auto; background: #C03; width: 80%; padding: 20px; overflow: auto; }
.box { font-size:1em; line-height:1em; padding: 10px; text-align: center; width: 8em; background: white; float: left; margin: 0.5%; display: inline-block;
border: #0F9 medium groove; -moz-border-radius: 20px;
-webkit-border-radius: 20px; -khtml-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body bgcolor="#000000">

<div id="container">
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>

<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
<div class="box">SAMPLE</div>
</div><!--closeCONTAINER-->
</body>
</html>


I wouldn't use XHTML anymore, but, if you do, it should be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
iluvcss
08-07-2012, 01:27 AM
The link which I provided above, which is repeated here:

http://www.yuppyproducts.com/indexspecial.html

shows the problem which I am trying hard to find a solution to. For my purpose, I need to have a specific background image as shown.

Any help will be much appreciated. Thanks in advance.
williamsun
08-07-2012, 01:39 PM
I couldn't find a way to make it work with your structure. The right ends of the backgrounds would not fully display while shrinking the window, or in a shrunken state.

The only other thing I can think of is a plain old table with a fixed number of columns. Say 5 coumns, then table @ 100% and each cell @ 20%. Something like that. Although that's not a great way to do it.

Maybe others have better solutions.
iluvcss
08-09-2012, 12:23 PM
Thank you for your attention and suggestion.

Although having a fixed-width table or div will solve the problem, it does not suit my purpose, as I need the column to be floating fluid and flowing downwards to fit screen sizes on various mobile devices.


I couldn't find a way to make it work with your structure. The right ends of the backgrounds would not fully display while shrinking the window, or in a shrunken state.

The only other thing I can think of is a plain old table with a fixed number of columns. Say 5 coumns, then table @ 100% and each cell @ 20%. Something like that. Although that's not a great way to do it.

Maybe others have better solutions.
williamsun
08-09-2012, 02:54 PM
Although having a fixed-width table or div will solve the problem, it does not suit my purpose, as I need the column to be floating fluid and flowing downwards to fit screen sizes on various mobile devices.
I was talking about a set number of columns and the table & cells shrinking and expanding with the screen size, instead of wrapping around. But if that's not what you're looking for, that's fine.
iluvcss
08-09-2012, 03:08 PM
Yes, I do liked the idea which you had suggested earlier in this regard, and by using min-width/max-width to control the stretchable size of the graphics.

If you can suggest a coding sample to achieve that for me to try out, it will be much appreciated. I am still struggling with the problem. Thanks in advance.


I was talking about a set number of columns and the table & cells shrinking and expanding with the screen size, instead of wrapping around. But if that's not what you're looking for, that's fine.
williamsun
08-09-2012, 03:44 PM
I tried it 2 or 3 different ways and could never get it to display right. Anytime the cells were shrunk less than the original background button width, the right end of the background didn't show. So I couldn't figure it out.

Maybe someone else that's better at this can help you.
iluvcss
08-09-2012, 09:44 PM
Thanks for the kind help, Sir. Much appreciated.

Hope I don't need sleeping pills if I continue to lose sleep over this problem. :)

I tried it 2 or 3 different ways and could never get it to display right. Anytime the cells were shrunk less than the original background button width, the right end of the background didn't show. So I couldn't figure it out.

Maybe someone else that's better at this can help you.