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] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

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

Code:

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

to

Code:

.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

Originally Posted by williamsun

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">

Code:

<!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.

Originally Posted by williamsun

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

Originally Posted by iluvcss

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.

Thread: Problem With In-line Wrapping of Graphics

Thread Tools

Search Thread

Problem With In-line Wrapping of Graphics

simplier code

Bookmarks

Bookmarks

Posting Permissions