<!-- m --><a class="postlink" href="http://www.brookgroup.com/test/logo_repository/logos.html">http://www.brookgroup.com/test/logo_rep ... logos.html</a><!-- m -->
If you take the rule out, the logo groupings float as they should when the window expands. The deal is that I'm trying to find a way to always have a rule under a row, no matter how many groupings happen to be in that row.
Also, if you take the rule out you can see that the fourth grouping gets "stuck" because the groupings are not all the same height - i won't be able to control that.
Any ideas? I am assuming I'll have to even the heights somehow but not sure, plus I may not have time to go through all the hoops that I think are required to even heights of each one to 100% within their row. End product needs to be pleasant on MacIE5, Safari, IE6PC.You have to have the clearing DIV between the rows if you want the rows to line up properly. If you want the groupings to be equal heights, you'll have to set their heights.
If you want more than two groupings per row, just place more groupings before the clearing DIV (the "rule"). Be aware that floats do just that: They float. If there isn't enough width on one line to accomodate all the floats, it will bump the remaining floats down one line. If you can't be absolutely sure about the width alotted for the groupings to float in, design for a 640 X 480 screen.
Some other suggestiongs:
1) Fix your site with the correct doctype (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) to force newer browsers into standards compliance mode. This makes CSS support more uniform across the different browsers (IE mainly).
2) Place the font size in either the BODY tag or the DIV tag. Using a percentage font size on all the tags creates increasingly smaller text. All tags are (supposed) to inheret their font size from their parent element, and then apply the font size given to them in CSS.
<body> <!-- 85% of default size -->
<div> <!-- 85% of BODY tag size -->
<p> <!-- 85% of DIV tag size, 72.25% of BODY tag size -->
</p>
</div>
</body>
3) Use interCap format for class names and IDs. The dash, or minus sign ( - ) could be used as a CSS selector in the future. It isn't now, but just to avoid possible compatibility problems in the future, only use alphanumeric characters in interCap format for class and ID names. Also, classes and IDs can't start with numbers for the CSS to validate.Originally posted by toicontien
If you want more than two groupings per row, just place more groupings before the clearing DIV (the "rule"). Be aware that floats do just that: They float. If there isn't enough width on one line to accomodate all the floats, it will bump the remaining floats down one line. If you can't be absolutely sure about the width alotted for the groupings to float in, design for a 640 X 480 screen.
Thanks. This particular non-public project spec browser width is 1024 minimum. I can assume that people will see at least 2 groupings but was hoping to find a way to generate some divider automatically since I will never know if someone is seeing more than 2 groupings.
I was tossing about ways of doing that. If I could be very precise about grouping size I could put them all in another DIV and make that bakground grey, then put a margin of 1 px on all groupings so it might create a 1px "divider" under each row automaticallly. i just didn't want to mess with forcing a height because I will never know the height. The user will be able to put whatever text they want in there.You can't generate HTML with CSS. You could using JavaScript, though I wouldn't know how, but it's a bad idea to have the layout of your page reliant on JavaScript.
The best way is to define a width in pixels, then see how many groupings would fit in a row and use a server-side language to dynamically write the dividers.
That's the most sure-fire way.Originally posted by toicontien
You can't generate HTML with CSS. You could using JavaScript, though I wouldn't know how, but it's a bad idea to have the layout of your page reliant on JavaScript.
I understand this, but I could fake a divider that is generated with every grouping, like a border on top of each grouping, and then it would automatically have a "divider" across the top of each row when really it's just a border with a margin under it. My only issue stopping that is never being able to know the height an end-user may make a grouping - that causes the floats to possibly get "stuck" on one another and not float all the way left.
The best way is to define a width in pixels, then see how many groupings would fit in a row and use a server-side language to dynamically write the dividers.
Was trying to find a way to allow a user to open the browser however far he wants and have the groupings fill in if they can, push to next line if they can't fill row. I'll never know how tall or how many groupings there will be.
Thanks for your thoughts on this!
If you take the rule out, the logo groupings float as they should when the window expands. The deal is that I'm trying to find a way to always have a rule under a row, no matter how many groupings happen to be in that row.
Also, if you take the rule out you can see that the fourth grouping gets "stuck" because the groupings are not all the same height - i won't be able to control that.
Any ideas? I am assuming I'll have to even the heights somehow but not sure, plus I may not have time to go through all the hoops that I think are required to even heights of each one to 100% within their row. End product needs to be pleasant on MacIE5, Safari, IE6PC.You have to have the clearing DIV between the rows if you want the rows to line up properly. If you want the groupings to be equal heights, you'll have to set their heights.
If you want more than two groupings per row, just place more groupings before the clearing DIV (the "rule"). Be aware that floats do just that: They float. If there isn't enough width on one line to accomodate all the floats, it will bump the remaining floats down one line. If you can't be absolutely sure about the width alotted for the groupings to float in, design for a 640 X 480 screen.
Some other suggestiongs:
1) Fix your site with the correct doctype (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) to force newer browsers into standards compliance mode. This makes CSS support more uniform across the different browsers (IE mainly).
2) Place the font size in either the BODY tag or the DIV tag. Using a percentage font size on all the tags creates increasingly smaller text. All tags are (supposed) to inheret their font size from their parent element, and then apply the font size given to them in CSS.
<body> <!-- 85% of default size -->
<div> <!-- 85% of BODY tag size -->
<p> <!-- 85% of DIV tag size, 72.25% of BODY tag size -->
</p>
</div>
</body>
3) Use interCap format for class names and IDs. The dash, or minus sign ( - ) could be used as a CSS selector in the future. It isn't now, but just to avoid possible compatibility problems in the future, only use alphanumeric characters in interCap format for class and ID names. Also, classes and IDs can't start with numbers for the CSS to validate.Originally posted by toicontien
If you want more than two groupings per row, just place more groupings before the clearing DIV (the "rule"). Be aware that floats do just that: They float. If there isn't enough width on one line to accomodate all the floats, it will bump the remaining floats down one line. If you can't be absolutely sure about the width alotted for the groupings to float in, design for a 640 X 480 screen.
Thanks. This particular non-public project spec browser width is 1024 minimum. I can assume that people will see at least 2 groupings but was hoping to find a way to generate some divider automatically since I will never know if someone is seeing more than 2 groupings.
I was tossing about ways of doing that. If I could be very precise about grouping size I could put them all in another DIV and make that bakground grey, then put a margin of 1 px on all groupings so it might create a 1px "divider" under each row automaticallly. i just didn't want to mess with forcing a height because I will never know the height. The user will be able to put whatever text they want in there.You can't generate HTML with CSS. You could using JavaScript, though I wouldn't know how, but it's a bad idea to have the layout of your page reliant on JavaScript.
The best way is to define a width in pixels, then see how many groupings would fit in a row and use a server-side language to dynamically write the dividers.
That's the most sure-fire way.Originally posted by toicontien
You can't generate HTML with CSS. You could using JavaScript, though I wouldn't know how, but it's a bad idea to have the layout of your page reliant on JavaScript.
I understand this, but I could fake a divider that is generated with every grouping, like a border on top of each grouping, and then it would automatically have a "divider" across the top of each row when really it's just a border with a margin under it. My only issue stopping that is never being able to know the height an end-user may make a grouping - that causes the floats to possibly get "stuck" on one another and not float all the way left.
The best way is to define a width in pixels, then see how many groupings would fit in a row and use a server-side language to dynamically write the dividers.
Was trying to find a way to allow a user to open the browser however far he wants and have the groupings fill in if they can, push to next line if they can't fill row. I'll never know how tall or how many groupings there will be.
Thanks for your thoughts on this!