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

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -