[RESOLVED] CSS left / right float - content not aligned
I have a page that displays a 100px column on the left and right hand side, with the content inbetween. The problem I face is that, if the content exceeds the height of the column on the left / right, then the content is not aligned properly. (See below screenshot)
Is there any way to have this displaying correctly? From what I can tell, if I set the content DIV's height property the same to the height property of the LEFT / RIGHT DIV's, then it displays properly. Obviously this isn't an option, seeing as the window will be a different size for every person browsing the site.
The page:
Code:<html> <head> <title>Test Page</title> <style type='text/css'> body { font-family:Arial; font-size:8pt; } div.content { margin-left:100px; margin-right:100px; } div.left { width:90px; float:left; border-right:1px solid #000; } div.right { width:90px; float:right; border-left:1px solid #000; } </style> </head> <body> <div class='left'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div> <div class='right'>a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div> <div class='content'>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </div> </body> </html>
Reply With Quote