Hah!, I didn't see that inline style. Good catch.
On Sep 17, 10:52 am, "Richard D. Worth" <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
