See your code: <div id="inventoryArea" style="float: left;" class="ui-widget">
It's not the ui-widget class that was causing that. - Richard On Thu, Sep 17, 2009 at 10:28 AM, Bryan <[email protected]> wrote: > > Thanks a bunch, that looks like it will help. > > I didn't mean to suggest that I am using the widget classes for > layout. I am using them for aesthetic consistency, and I love the > framework for making my life easier in that regard. However, I think > that it is reasonable in the code posted earlier, to expect the 2 divs > to be side by side, and not to have their backgrounds spilling into > each other. The rule of least surprise is being broken here, as that > is how divs behave outside of this framework. > > I understand that the framework is complex, and that there are > probably very good reasons this behavior exists, but my 2 cents is > that if we could magically have everything we wanted, we would want > the behavior in this instance to mimic the behavior as it is when > using plain css and divs. > > > > On Sep 17, 2:44 am, "Richard D. Worth" <[email protected]> wrote: > > 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 -~----------~----~----~----~------~----~------~--~---
