njdubois Posted April 10, 2014 Share Posted April 10, 2014 if you go to http://musicwhynot.com/beacon/test.html You will see that the 3 squares do not line up vertically. I know that the extra longer length of text inside the 3rd div is the cause, I just don't know why. Below is the code, why doesn't the text take up the empty space correctly? <div id="Item_Output_Container" style="width:1670px;background-color:white;margin-top:25px;"> <div style="border-style:solid;border-width:5px;display:inline-block;width:150px;height:150px;max-width:150px;max-height:150px;padding:10px;font-size:10px;"> 4-20 X 1 PHILLIPS PAN HEAD 48-2 TRILOBE THREAD FORMING SCREW CASE HARDENED STEEL TRIVALENT ZINC, BAKE & WAX ROHS COMPLIANT </div> <div style="border-style:solid;border-width:5px;display:inline-block;width:150px;height:150px;max-width:150px;max-height:150px;padding:10px;font-size:10px;"> 6-19 X 1 PHILLIPS PAN HEAD 48-2 TRILOBE THREAD FORMING SCREW CASE HARDENED STEEL TRIVALENT ZINC, BAKE & WAX ROHS COMPLIANT </div> <div style="border-style:solid;border-width:5px;display:inline-block;width:150px;height:150px;max-width:150px;max-height:150px;padding:10px;font-size:10px;"> 6-19 X 1 UNSLOTTED INDENTED HEX WASHER HEAD 48-2 TRILOBE THREAD FORMING SCREW CASE HARDENED STEEL TRIVALENT ZINC, BAKE & WAX ROHS COMPLIANT </div> </div> I cannot figure this out, and it's driving me CRAZY!!! I can remove any section of the longer text in the third box and it lines up. First 4 words, middle 4 words, last 4 words, either way, that fixes the problem. Thanks a million, Nick Link to comment https://forums.phpfreaks.com/topic/287679-div-alignments-not-right-no-matter-what-i-do/ Share on other sites More sharing options...
njdubois Posted April 10, 2014 Author Share Posted April 10, 2014 Solved with vertical-align:top; Can someone explain why? It's really confusing! Thanks Nick Link to comment https://forums.phpfreaks.com/topic/287679-div-alignments-not-right-no-matter-what-i-do/#findComment-1475708 Share on other sites More sharing options...
possien Posted April 10, 2014 Share Posted April 10, 2014 By default display:inline-block aligns on the bottom border. It also looks different in different browsers. Just a suggestion, you could simplify your css and put it the head section or a css page. You have a fixed width so you don't need a max width. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #Item_Output_Container{width:1670px;background-color:white;margin-top:25px;} .item{border:solid 5px; display:inline-block;width:150px;height:150px; padding:10px;font-size:10px;vertical-align:top;} </style> </head> <body> <div id="Item_Output_Container"> <div class="item"> 4-20 X 1 PHILLIPS PAN HEAD 48-2 TRILOBE THREAD FORMING SCREW CASE HARDENED STEEL TRIVALENT ZINC, BAKE & WAX ROHS COMPLIANT </div> <div class="item"> 6-19 X 1 PHILLIPS PAN HEAD 48-2 TRILOBE THREAD FORMING SCREW CASE HARDENED STEEL TRIVALENT ZINC, BAKE & WAX ROHS COMPLIANT </div> <div class="item"> 6-19 X 1 UNSLOTTED INDENTED HEX WASHER HEAD 48-2 TRILOBE THREAD FORMING SCREW CASE HARDENED STEEL TRIVALENT ZINC, BAKE & WAX ROHS COMPLIANT </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/287679-div-alignments-not-right-no-matter-what-i-do/#findComment-1475718 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.