html - Unable to handle Float:left property -
<!doctype html> <html> <body> <table style="float:left;margin-left:20px;width:120px"> <tr><td style="background-color:#ebebf5;">profile info >> </td></tr> <tr><td>entertainment</td></tr> <tr><td>sports & fun</td></tr> <tr><td>add more </td></tr> </table> <table style="width:200px"> <tr><td>info</td><td>education</td><td>work</td></tr> </table> </body> </html>
looks these when browser window maximized
profile info >> info education work entertainment sports & fun add more
then minimized browser window smaller , smaller peak,now looks these
profile info >> entertainment sports & fun add more info education work
the info,education , work going bottom of add more why? why width property not working when use float:left? how handle when use float:left property?
it's happening because you're floating whole table, , add more row part of main table. if there's not enough space them both fit, 2nd table wrap below see there. if don't want wrap need wrap in div
has min-width
set on it.
<div style="min-width: 400px;"> <!--insert tables here --> </div>
Comments
Post a Comment