It's quite simple, the div with id="container" needs to centered on the page. By god, I've tried display: block, float: left, just to name a few. None have worked. I've done tons of this stuff before, but I'm not sure if it's because it's late, but this thing ain't working for me... for the past hour and a half that is.
Everything else is fine and dandy in FF and IE for the moment. I'm just missing the centering part.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Center dammit!</title>
<style type="text/css">
body{background-color: #cceecc; margin: 0; padding: 0;}
#page{width: 100%;}
#container{float: left; padding: 0; margin: 0 auto 0 auto; border: 1px solid red;}
#container div.row{clear: both;}
#container span.cell{float: left; width: 120px; height: 120px; padding: 2px; margin: 2px; border: 1px solid #000;}
#container span.cell img{display: block; margin: auto; border: 0;}
</style>
</head>
<body>
<div id="page">
<div id="container">
<div class="row">
<span class="cell">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"slides/DCP_1488.html" title="$comment">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumbs/DCP_14848.jpg" width="80" height="120" alt="$comment" />
</a>
</span>
<span class="cell">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"slides/DCP_1488.html" title="$comment">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumbs/DCP_14884.jpg" width="80" height="120" alt="$comment" />
</a>
</span>
<span class="cell">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"slides/DCP_1488.html" title="$comment">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumbs/DCP_14884.jpg" width="80" height="120" alt="$comment" />
</a>
</span>
</div>
</div>
</div>
</body>
</html>Remove the float property from #container.
How to Center Elements with CSS (in IE5+/Win and other browsers) (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_element/">http://www.dynamicsitesolutions.com/css/center_element/</a><!-- m -->)Thanks Kravvitz.
I did as you suggested and it unfortunately didn't center. I noticed that I had a small red bar at the top now though, instead of having a border around the three cells like I had before.
Maybe I should have stuck with tables in order to this gallery type display?You need to specify a width on #container. Block level elements, like <div>s, are 100% width by default, so the auto margins are 0 since the element takes up the total width of the parent.
You need to clear the last float.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.brunildo.org/test/#flo">http://www.brunildo.org/test/#flo</a><!-- m -->
<!-- m --><a class="postlink" href="http://garyblue.port5.com/webdev/floatdemo.html">http://garyblue.port5.com/webdev/floatdemo.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpace">http://css-discuss.incutio.com/?page=ClearingSpace</a><!-- m -->
Curing Float Drops and Wraps (<!-- m --><a class="postlink" href="http://nemesis1.f2o.org/aarchive?id=11">http://nemesis1.f2o.org/aarchive?id=11</a><!-- m -->)I'm pretty close in both cases. I'd prefer using csstable2, because it's easier to calculate the width of the whole container.
However, in both cases, there's a slight problem.
In csstable1, the img at the center of the div, is only centered horizontally. I've tried using the vertical-align attribute to no avail.
In csstable2, i'm using the height attribute on body and img which in IE (6), works fine, but in FF it doesn't. The .thumbnail boxes get stretched out.
I've got a third file where I use known IE hacks:
<!-- m --><a class="postlink" href="http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html">http://www.info.com.ph/~etan/w3pantheon ... dsbmh.html</a><!-- m -->
Again, close at that level. I don't understand the difference of 5px that I have to add in the hack. Plus, the left and right margins are twice the size I've set them as.Perhaps you don't understand how vertical-align works. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">http://www.w3.org/TR/REC-CSS2/visudet.h ... ical-align</a><!-- m -->)
You could set the line-height to the <div>'s height and use vertical-align:middle, but IE6 doesn't handle it correctly.
Center Page Content Horizontally and Vertically (without <table>s) (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/">http://www.dynamicsitesolutions.com/css ... ertically/</a><!-- m -->)Fixed to a high degree of satisfaction. See attachement.
Everything else is fine and dandy in FF and IE for the moment. I'm just missing the centering part.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Center dammit!</title>
<style type="text/css">
body{background-color: #cceecc; margin: 0; padding: 0;}
#page{width: 100%;}
#container{float: left; padding: 0; margin: 0 auto 0 auto; border: 1px solid red;}
#container div.row{clear: both;}
#container span.cell{float: left; width: 120px; height: 120px; padding: 2px; margin: 2px; border: 1px solid #000;}
#container span.cell img{display: block; margin: auto; border: 0;}
</style>
</head>
<body>
<div id="page">
<div id="container">
<div class="row">
<span class="cell">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"slides/DCP_1488.html" title="$comment">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumbs/DCP_14848.jpg" width="80" height="120" alt="$comment" />
</a>
</span>
<span class="cell">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"slides/DCP_1488.html" title="$comment">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumbs/DCP_14884.jpg" width="80" height="120" alt="$comment" />
</a>
</span>
<span class="cell">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"slides/DCP_1488.html" title="$comment">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"thumbs/DCP_14884.jpg" width="80" height="120" alt="$comment" />
</a>
</span>
</div>
</div>
</div>
</body>
</html>Remove the float property from #container.
How to Center Elements with CSS (in IE5+/Win and other browsers) (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_element/">http://www.dynamicsitesolutions.com/css/center_element/</a><!-- m -->)Thanks Kravvitz.
I did as you suggested and it unfortunately didn't center. I noticed that I had a small red bar at the top now though, instead of having a border around the three cells like I had before.
Maybe I should have stuck with tables in order to this gallery type display?You need to specify a width on #container. Block level elements, like <div>s, are 100% width by default, so the auto margins are 0 since the element takes up the total width of the parent.
You need to clear the last float.
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.brunildo.org/test/#flo">http://www.brunildo.org/test/#flo</a><!-- m -->
<!-- m --><a class="postlink" href="http://garyblue.port5.com/webdev/floatdemo.html">http://garyblue.port5.com/webdev/floatdemo.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpace">http://css-discuss.incutio.com/?page=ClearingSpace</a><!-- m -->
Curing Float Drops and Wraps (<!-- m --><a class="postlink" href="http://nemesis1.f2o.org/aarchive?id=11">http://nemesis1.f2o.org/aarchive?id=11</a><!-- m -->)I'm pretty close in both cases. I'd prefer using csstable2, because it's easier to calculate the width of the whole container.
However, in both cases, there's a slight problem.
In csstable1, the img at the center of the div, is only centered horizontally. I've tried using the vertical-align attribute to no avail.
In csstable2, i'm using the height attribute on body and img which in IE (6), works fine, but in FF it doesn't. The .thumbnail boxes get stretched out.
I've got a third file where I use known IE hacks:
<!-- m --><a class="postlink" href="http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html">http://www.info.com.ph/~etan/w3pantheon ... dsbmh.html</a><!-- m -->
Again, close at that level. I don't understand the difference of 5px that I have to add in the hack. Plus, the left and right margins are twice the size I've set them as.Perhaps you don't understand how vertical-align works. (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align">http://www.w3.org/TR/REC-CSS2/visudet.h ... ical-align</a><!-- m -->)
You could set the line-height to the <div>'s height and use vertical-align:middle, but IE6 doesn't handle it correctly.
Center Page Content Horizontally and Vertically (without <table>s) (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/">http://www.dynamicsitesolutions.com/css ... ertically/</a><!-- m -->)Fixed to a high degree of satisfaction. See attachement.