Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorlittle3skimo
- CommentTimeOct 21st 2008
I'm trying to create a grid of boxes that sit side by side and flow onto the next row when there are more than 3. I need the boxes to sit flush to either side of the container so the left edge of the left box is touching the left edge of the container, and the right edge of the right box touching the right edge of the container. I've tried this by creating two boxes that are floated left and 1 box that is floated right. It works in firefox and chrome but in IE6 it is a complete mess. Does anyone have a basic example of what I'm trying to achieve that works accross browsers?
Thanks. -
-
CommentAuthorkari.patila
- CommentTimeOct 21st 2008
How did you do the floats and in what order? Did you use display:inline; for each float? Try adding the display property and check IE6 again. If that doesn't work it would be easier if you posted at least some of the code involved. -
-
Yes, in order to help we would need some more info.
-
-
CommentAuthormsalokangas
- CommentTimeOct 26th 2008 edited
little3skimo,
I believe what you are trying to accomplish can be achieved through an unordered list. By setting a width on the unordered list and floating each list item you can control how many list items are displayed per row. See my example below, works in IE, FF and Chrome.
Example:
<html>
<head>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0;
background-color: #FFF;
font: 72%/1.6 "Lucida Grande", Verdana, sans-serif;
color: #333;
}
ul { list-style-type: none; width: 610px; padding: 0; margin: 0; }
ul li { float: left; width: 200px; height: 200px; background: #369; color: #FFF; line-height: 200px; vertical-align: middle; text-align: center; border: 1px solid #036; }
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
</html>
Hope that helps...
.matti -
-
- CommentAuthorlittle3skimo
- CommentTimeOct 27th 2008 edited
Hi again,
Thanks for the help, I'm sorry, should have posted the link first time:
http://www.gold-crest.com/
The boxes i'm refering to are the ones towards the bottom of the page that list all pages within each catergory of the site. In firefox and safari these boxes sit nicely and line up with the content above but in IE6 it's all over the place. What would I need to fix or change so that it works the same way in IE6.
Many thanks. -
Just convert the display property of the class ".eOffers" into inline as
.eOffers {
display:inline;
}
I hope you can understand me and that'll help you. -
- CommentAuthorlittle3skimo
- CommentTimeOct 27th 2008
Thank you that worked like a charm! -
-
CommentAuthorkari.patila
- CommentTimeOct 29th 2008
It might also be helpful to explain that the margins of a floated element will double in IE6 unless you use the display:inline property. This is one of the most frequent problems I've encountered here over the years. I should probably have explained this a week ago when I first replied to this thread. -
-
- CommentAuthorlittle3skimo
- CommentTimeNov 3rd 2008
Thanks Kari, I had no idea about that but it's very very handy to know for future reference. Thanks for all the help everyone.
1 to 9 of 9