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 Quote 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 Quote 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> Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.