The classes you're using (ui-widget, ui-widget-header, ui-widget-content) are part of the jQuery UI CSS Framework<http://jqueryui.com/docs/Theming/API>, which is a widget framework, not a css layout framework. For your question, you can see demonstrations of the css required here: http://blog.html.it/layoutgala/LayoutGala25.html
http://blog.html.it/layoutgala/LayoutGala28.html ( These are just two of 40 css layouts, by Alessandro Fulciniti, 2-3 columns, liquid and fixed, all based on the same html markup. http://blog.html.it/layoutgala/ ) Another option would be to make use of a css grid framework<http://www.google.com/#q=css+grid+framework> - Richard On Wed, Sep 16, 2009 at 5:44 PM, Bryan <[email protected]> wrote: > > I want two divs next to each other. I gave these 2 divs a class of > "ui-widget" and the background of the "ui-widget-header" and "ui- > widget-content" sections of the right div stretch all the way across > the page overlapping the left div underneath. How can I have to "ui- > widget" next to each other with each one taking up half the screen? > > <!DOCTYPE html> > <html> > <head> > <meta http-equiv="Content-Type" content="text/html; > charset=iso-8859-1" /> > <title>Test</title> > <link type="text/css" href="css/ui-lightness/jquery- > ui-1.7.2.custom.css" rel="stylesheet" /> > <style> > table { > border: 1px solid; > border-collapse: collapse; > } > tr {border: 1px solid;} > th {border: 1px solid; padding: .2em} > td {border: 1px solid; padding: .2em} > #inventoryArea{margin: .5em; padding: .2em;} > #shipmentArea{margin: .5em; padding: .2em;} > > </style> > <script type="text/javascript" > src="js/jquery-1.3.2.min.js"></ > script> > <script type="text/javascript" src="js/jquery- > ui-1.7.2.custom.min.js"></script> > <script type="text/javascript"> > $(function(){}); > </script> > </head> > <body> > > <div> > <div id="inventoryArea" style="float: left;" > class="ui-widget"> > <div > class="ui-widget-header">Inventory</div> > <div class="ui-widget-content" > style="padding: .3em;"> > <input type="text" id="searchBox" /> > <button > id="searchButton">Search</button> > > <table id='searchResults'> > <thead> > > <tr><th>Name</th><th>Qty</th> > </thead> > <tbody> > </tbody> > </table> > </div> > </div> > > <div id="shipmentArea" class="ui-widget"> > <div class="ui-widget-header">Shipment</div> > <div class="ui-widget-content" > style="padding: .3em;"> > <table id='shipment'> > <thead> > > <tr><th>Name</th><th>Qty</th> > </thead> > <tbody> > </tbody> > </table> > </div> > </div> > </div> > > </body> > </html> > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
