I see now. I applied float: left to *both* divs and got the desired result.
I did testing with simple divs and css without the jQuery UI framework and it seemed to work without having to float the 2nd div, but hey it works now so thanks a bunch guys. I will probably end up using one of they layout libraries/methods posted above in the end anyways. On Sep 17, 7:52 am, Fontzter <[email protected]> wrote: > Bryan, > > Richard's point is that you have no css declare (at least in your > example) to control the layout of the divs to which you applied the ui- > css styles. The overlap behavior is simply the way that the browser > renders your html. Even without the ui classes it would overlap. To > avoid that, use absolute positioning or just set a float value on your > divs. > > #inventoryArea{margin: .5em; padding: .2em; float: left;} > #shipmentArea{margin: .5em; padding: .2em; float: left;} > > See example:http://jsbin.com/ujudo/edit > > Hth, > > Dave > > On Sep 17, 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 -~----------~----~----~----~------~----~------~--~---
