george Posted December 21, 2011 Share Posted December 21, 2011 I have a very simple example of three boxes that I want to line up. Here is what I tried. <style media="all" type="text/css">* {margin:0; padding:0;}.algnbxs { display:inline-block; }#boxone, #boxtwo, #boxtre { width:100px; height:100px; border:#993399 1px solid; }</style></head><body><span id="boxone" class="algnbxs">The crazy brown fox chased the chicken up the farmer's leg. </span><span id="boxtwo" class="algnbxs">The crazy brown fox chased the chicken up the farmer's leg. </span><span id="boxtre" class="algnbxs">Sam d man</span></body> The result is the first two boxes aligned, and the third apparently aligned with the last text line of the first two boxes. I used DIV tags at first, then tried using the span tags. The results were the same. I also noticed that when I put a <br /> tag in the second box, this displaces the first box. I want to be able to align three boxes, and then be able to put anything into any box with out it causing the content of another another box to move. I am obviously missing something fundamental here. Please advise. George Link to comment Share on other sites More sharing options...
smiles Posted December 21, 2011 Share Posted December 21, 2011 try vertical-align:top ! [color=#880000][size=2]#boxone, #boxtwo, #boxtre { width:100px; height:100px; border:#993399 1px solid; vertical-align:top}[/size][/color] Link to comment Share on other sites More sharing options...
Ingolme Posted December 21, 2011 Share Posted December 21, 2011 Yes, that is correct. The vertical-align property will tell the inline-block where it should be placed relative to the text. All of your inline-blocks are aligned with the bottom of the text, so the boxes with more lines of text will be higher up than the ones with less lines. Link to comment Share on other sites More sharing options...
george Posted December 21, 2011 Author Share Posted December 21, 2011 Beautiful - thank you both Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.