I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Code (markup):
It's hard to understand what you're trying to achieve without seeing how you want it to look but from what I can guess you've got two Div's each with two column divs inside and want them to be next to eac other. Well turn your 'float: right' into float: left. Image them all pushing to the left side of the screen, they'll sit next to each other both trying to be on the left. I don't know why you're using space gifs in CSS though, are you slowly moving from table based designs? Provide an image explaining how you want the layout to look and we'll be able to help you better.
how bout try this! the best way to align a block element: .vert-align { height:xxxpx; line-height:xxxpx; } Code (markup): where you're height is equal to your line-height... be careful though... this code has it's pro's and con. cheers!