...

View Full Version : div containers with 'white-space' CSS element: wrap prob in faux tables



RyanRayLA
11-25-2009, 08:50 AM
OK -- first off, my intention is to create div containers in which the titles can wrap underneath the imgs with 3 containers per 'row' of faux table.

Everything renders fine when the text titles below the images do not push beyond the width of the image (107px) and do not wrap. See:

http://www.ryanray.com/images/4.jpg

I'm using a bit of CSS and HTML to accomplish this.

CSS


.website-nominee .grid_item {
width:107px;
float:left;
padding:0 5px 8px 0;
margin-top:0px;
margin-bottom:10px;
margin-right:20px;
margin-left:20px;
white-space:normal;}

.website-nominee .grid_item .name{
font-size:9px;
color:#808080;
padding-top:2px;
text-align:center;
white-space:wrap;
}



HTML


......<div class="grid_item">
<a href="http://9cloudsinc.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//889d79900afa6e90e3835ff9b7e08bbe.jpg"/><div class="name">9 Clouds, Inc</div></a></div>

<div class="grid_item">
<a href="http://www.billcosby.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//00c7ce79b659b0abfb627a4d7e542540.jpg"/><div class="name">Bill Cosby</div></a></div>

<div class="grid_item">
<a href="http://www.clarklittlephotography.com/" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//aaef4d8f6b4de6411ec700a002c04a18.jpg"/><div class="name">Clark Little Photography</div></a></div> .......


Here's the problem, however:

In IE 8 and Chrome with the 'white-space' property set to "normal/wrap" the text wraps within its own DIV but leaves empty spaces to compensate for the white space that would have otherwise been there, producing this result:
http://www.ryanray.com/images/1.jpg

In Chrome with the 'white-space' property set to "nowrap" the text does not wrap within its own DIV and does not leave empty spaces, again.. still not producing the desired results 'cause I do want the title text to wrap:
http://www.ryanray.com/images/2.jpg

In IE 8 with the 'white-space' property set to "nowrap" the text does not wrap within its own DIV and DOES leave empty spaces, pushing the imges out of their own blocks/columns -- def. not good.:
http://www.ryanray.com/images/3-ie.jpg

So, again, my goal is to get the text to wrap correctly within each DIV and to keep the block formate of the grid intact, with 3 images, with respective text below wrapped if necessary, all uniformly rendered.

The problem may not even be the CSS element 'White-space'. I'm not sure 'cause this is a little out of my league. Can anyone help? :confused:

Excavator
11-25-2009, 09:00 AM
Hello RyanRayLA,
To keep the .website-nominee .grid_item with longer titles from pushing the other floated divs out of the way you need to put a height on it so all .website-nominee .grid_item are the same height.

If that doesn't work, you will need to put the 3 side by side in a container div like this -
<div class="wrap">
<div class="grid_item">
<a href="http://9cloudsinc.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//889d79900afa6e90e3835ff9b7e08bbe.jpg"/><div class="name">9 Clouds, Inc</div></a></div>

<div class="grid_item">
<a href="http://www.billcosby.com" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//00c7ce79b659b0abfb627a4d7e542540.jpg"/><div class="name">Bill Cosby</div></a></div>

<div class="grid_item">
<a href="http://www.clarklittlephotography.com/" target="_blank"><img src="http://www.wakeupawards.com/wp-content/plugins/wp-portfolio/cache//aaef4d8f6b4de6411ec700a002c04a18.jpg"/><div class="name">Clark Little Photography</div></a></div>
<!--end .wrap--></div>

When you do that, .wrap can push down on the next row without moving any out of the way.

Would be easiest to give each .website-nominee .grid_item a height that fits the longest expected title.

RyanRayLA
11-25-2009, 09:31 AM
Awesome! Simply adding the height property fixed my problem in Chrome but in IE it didn't help. Any thoughts as to why? If interested the full code and site is: http://www.wakeupawards.com/nominate

I don't really think container DIV for the three will work because these are being generated by PHP automatically

Excavator
11-25-2009, 09:46 AM
Put a background color on those .grid_item's and you'll see that something is making it expand more than the height:100px; you've put on it.
Like this

.website-nominee .grid_item {
width:107px;
height: 100px;
float:left;
padding:0 5px 8px 0;
margin-top:0px;
margin-bottom:10px;
margin-right:20px;
margin-left:20px;
white-space:wrap;
background: #fff;

}

It could be as simple as zeroing out default browser settings with a reset (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/).
I always use the following, or some variation, at the top of my CSS in everything I write -

* {
margin: 0;
padding: 0;
border: none;
outline: none;
text-decoration: none;
}

RyanRayLA
11-26-2009, 08:36 AM
You did it!~ Your tip of changing the background color of the DIV clued me in and I was able to fix my margins, etc. to get everything to break perfectly.. Geeze, IE can be a pain in the *** sometimes!

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum