CSS boxes spacing issue

HTML & CSS
1

I am using CSS boxes to create three images equally spaced, with three sub titles, also equally spaced. I can’t seem to get the sub titles to cooperate.
See http://clickbasics.com/test_boxes.html

The CSS is:

#boxsub {
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
    margin-left:auto; 
    margin-right:auto;
}
#boxsub .smbox {
    width:30%;
    min-width: 220px;
    display: inline;
    border: 1px solid #f00;
    text-align: center;
    margin: 5px;
}

The HTML is:

<div id="boxsub">
<div class="smbox">Be Family</div>
<div class="smbox">Get Romantic</div>
<div class="smbox">Get Together</div>
</div>

Neither width nor min-with seem to take hold. Thought? Ideas?

2

Neither width nor min-with seem to take hold. Thought? Ideas?
Hi,
That’s because elements with display:inline; (other than replaced elements , images etc.) can’t take a width.

If you want to use text-align to center them while using widths then use display: inline-block

One other thing, your auto margins on #boxsub are not doing anything unless you give it a width.

3

Thanks. That worked!

4

According to Adobe Browser lab, it appears to be working in all browsers except IE7, Firefox 2 -OSX, and FireFox 2 Windows. http://clickbasics.com/test_boxes.html What is the workaround?

5

Hi,
FF2 does not support native inline-block and it requires a -moz vender extension with inline-box.

IE6/7 do not have native support either and they require the inline tripswitch in a new ruleset lower down in the cascade.

#boxsub .smbox {
    width:30%;
    min-width: 220px;
    [COLOR=Blue]display: -moz-inline-box;[/COLOR][COLOR=DarkGreen]/* for FF2 and K-Meleon */[/COLOR]
    [COLOR=Blue]display:inline-block;[/COLOR][COLOR=DarkGreen]/* for modern browsers */[/COLOR]
    border: 1px solid #f00;
    text-align: center;
    margin: 5px;
}
* html #boxsub .smbox{[COLOR=Blue]display:inline;[/COLOR]}[COLOR=DarkGreen]/* IE6 tripswitch */[/COLOR]
*+html #boxsub .smbox{[COLOR=Blue]display:inline;[/COLOR]}[COLOR=DarkGreen]/* IE7 tripswitch */[/COLOR]
6

Have you considered eliminating that top div that the images are in and just setting them up as image captions.

That will keep the images centered above your text and reduce the code as well. Normally I do those with a <UL> but you can get the same results using divs.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test boxes</title>

<style type="text/css">
#box {
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}
#box img {
    margin:0 0 20px;
    vertical-align:bottom;
}
#box div {
    width:30%;
    min-width: 220px;
    display: -moz-inline-box;/* for FF2 and K-Meleon */
    display:inline-block;/* for modern browsers */
    border: 1px solid #f00;
    text-align: center;
    margin: 5px;
    padding: 10px 0;
}
* html #box div {display:inline;}/* IE6 tripswitch */
*+html #box div {display:inline;}/* IE7 tripswitch */
</style>

</head>
<body>

<div id="box">
    <div>
        <img src="images/istockphoto_12279862-family-having-fun-in-snowy-woodland_215w.jpg" alt="Family Vacation" />
        <br><a href="#">Be Family</a>
    </div>
    <div>
        <img src="images/istockphoto_11792121-dinner-couple-toasting_215w.jpg" alt="Romantic Getaway" />
        <br><a href="#">Get Romantic</a>
    </div>
    <div>
        <img src="images/istockphoto_14339102-group-of-adults-smiling-together-full-body-isolated-on-white_215w.jpg" alt="Groups" />
        <br><a href="#">Get Together</a>
    </div>
</div>

</body>
</html>
7

Thanks, I’ll give this a try.

8

I like the list idea. How would that modify the code?

9

How would that modify the code?

Just change your divs to UL elements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test boxes</title>
 
<style type="text/css">
ul#box {
    margin:0;
    padding:0;
    list-style:none;
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}
#box li img {
    margin:0 0 20px;
    vertical-align:bottom;
}
#box li {
    width:30%;
    min-width: 220px;
    display: -moz-inline-box;/* for FF2 and K-Meleon */
    display:inline-block;/* for modern browsers */
    background: #EEF;
    text-align: center;
    margin: 5px;
    padding: 10px 0;
}
* html #box li {display:inline;}/* IE6 tripswitch */
*+html #box li {display:inline;}/* IE7 tripswitch */
</style>
 
</head>
<body>
 
<ul id="box">
    <li>
        <img src="http://yankeeinn.web2.hubspot.com/Portals/22044/images/istockphoto_12279862-family-having-fun-in-snowy-woodland_215w.jpg" alt="Family Vacation" />
        <br><a href="#">Be Family</a>
    </li>
    <li>
        <img src="http://yankeeinn.web2.hubspot.com/Portals/22044/images/istockphoto_11792121-dinner-couple-toasting_215w.jpg" alt="Romantic Getaway" />
        <br><a href="#">Get Romantic</a>
    </li>
    <li>
        <img src="http://yankeeinn.web2.hubspot.com/Portals/22044/images/istockphoto_14339102-group-of-adults-smiling-together-full-body-isolated-on-white_215w.jpg" alt="Groups" />
        <br><a href="#">Get Together</a>
    </li>
</ul>
 
</body>
</html>
10

This version works in IE 6&7, but not in FF 2, where the images do not display.
http://clickbasics.com/test_boxes_v2.html

That’s a real puzzlement to me.

11

It’s been a while since I messed around with all the FF2 inline-box quirks but this looks like one of those cases when -moz-box-orient: vertical; is needed along with it.

Additionally it looks like FF2 wants the inline-box children to be wrapped in a block. I used a <p> but a <div> should give the same results. When I did not nest the image in a block FF2 did place above the anchor, but it stretched the image.

This seems to be working in K-Meleon for me (it uses the FF2 gecko engine), I don’t have FF2 installed so that’s what I’m testing with.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test boxes</title>

<style type="text/css">
ul#box {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
}
#box li {
    width: 30%;
    min-width: 220px;
    [COLOR=Blue]display: -moz-inline-box;[/COLOR]/* for FF2 and K-Meleon */
    [COLOR=Blue]-moz-box-orient: vertical;[/COLOR]
    display: inline-block;/* for modern browsers */
    background: #EEF;
    text-align: center;
    margin: 5px;
    padding: 10px 0;
}
[COLOR=Blue]#box li p[/COLOR] {margin:0;}

#box li img {
    width:215px;
    height:141px;
    margin: 0 auto 20px;
    vertical-align:bottom;
}

* html #box li {display: inline;}/* IE6 tripswitch */
*+html #box li {display: inline;}/* IE7 tripswitch */
</style>

</head>
<body>

<ul id="box">
   <li>
       [COLOR=Blue][B]<p>[/B][/COLOR]<img src="sample.jpg" alt="Family Vacation">[COLOR=Blue][B]</p>[/B][/COLOR]
       [COLOR=Blue][B]<p>[/B][/COLOR]<a href="#">Be Family</a>[COLOR=Blue][B]</p>[/B][/COLOR]
   </li>
   <li>
       <p><img src="sample.jpg" alt="Romantic Getaway"></p>
       <p><a href="#">Get Romantic</a></p>
   </li>
   <li>
       <p><img src="sample.jpg" alt="Groups"></p>
       <p><a href="#">Get Together</a></p>
   </li>
</ul>
</body>
</html>
12

Thanks