{"id":1090,"date":"2010-11-23T11:38:01","date_gmt":"2010-11-23T11:38:01","guid":{"rendered":"http:\/\/salientsoft.co.uk\/?p=1090"},"modified":"2012-01-18T11:20:36","modified_gmt":"2012-01-18T11:20:36","slug":"using-floats-to-place-a-border-around-a-control-grouptoolbar","status":"publish","type":"post","link":"https:\/\/salientsoft.co.uk\/?p=1090","title":{"rendered":"Using floats to place a border around a control group\/toolbar"},"content":{"rendered":"<p>I originally used <em>display:inline-block, line-height<\/em>\u00a0and <em>vertical-align:middle<\/em> to do this as detailed <a href=\"http:\/\/salientsoft.co.uk\/?p=1084\"><strong>here<\/strong><\/a>, but the results were inconsistent across browsers.<\/p>\n<p>Using floats is a much better solution for a number of reasons \u2013 details are as follows:-\u00a0<\/p>\n<ul>\n<li>The controls are floated left inside a div which is itself floated left. As the div is floating, it auto resizes to fit around the content, and so scales to fit unknown control sizes.<\/li>\n<li>The controls are all set to have fixed top and bottom margins (4px in the example), and the leftmost and rightmost also have similar left and right margins respectively.<\/li>\n<li>The floated div is set to have the desired border and background etc. \u2013 in my case, I use Primefaces\/jQuery UI theme style classes to apply theme look and feel.<\/li>\n<li>The floated div is then placed inside another outer div, which may be of fixed dimensions. This allows the control group to adjust in size, but to be located inside a fixed area on a page.<\/li>\n<li>If the outer div is of fixed size and non floating, the floating inside it is invisible to the rest of the document, so it is not necessary for example to clear the float.<\/li>\n<li>If desired, the outer div can be set to <em>overflow:auto<\/em> to allow scroll bars if the size of the inner floating div exceeds the space allocated for it on the page.<\/li>\n<li>If the area surrounding the control group is also floating, the outer div can also be set to float with no size specified, so the concept works well in both floating and fixed size situations.<\/li>\n<li><em>display:inline-block<\/em> and <em>vertical-align:middle<\/em> are not<strong>\u00a0<\/strong>used with this method.<\/li>\n<\/ul>\n<p>\u00a0This mechanism has the following characteristics:-<\/p>\n<ul>\n<li>The control group bordering works nicely and consistently with the Primefaces\/jQuery theme styling, as rather than trying to centre the controls in a fixed border, instead we vary the border size and keep the margin between the controls and the border constant.<\/li>\n<li>The approach makes use of the laws of <a href=\"http:\/\/en.wikipedia.org\/wiki\/Gestalt_psychology\"><strong>Gestalt Psychology<\/strong><\/a> \u2013 the eye notices even small imperfections in the alignment of the controls and their relationship to the border because they are close and obviously grouped\/related.<\/li>\n<li>Conversely the position of the entire bordered control group within its surroundings (the outer div) will typically not be so critical \u2013 it will likely be in a larger area of white space between it and adjacent items,\u00a0 and so its position and size within that space matters less than the control \/ border relationship.<\/li>\n<\/ul>\n<p>A caveat to all this is that it is still not perfect &#8211; the simple example below does not perform quite\u00a0as well in terms of cross browser alignment as the\u00a0Primefaces\/jQuery UI version, as the Primefaces themes apply their own styling as well which changes the situation. This could of course be improved by adjusting the margins individually for different controls in the group to get the best overall cross browser alignment. One very important goal I am trying to acheive is to avoid browser specific CSS. The Primefaces\/jQuery UI CSS does in general have browser specific tweaks which will help it in certain situations.<\/p>\n<p>Overall though this approach performs significantly better than the previous method using <em>vertical-align:middle<\/em> etc. and has the advantage of being fully floating\/dynamically sizing if required. An example of this approach follows :-<\/p>\n<p style=\"padding-left: 60px;\">&lt;!DOCTYPE html&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n\u00a0&lt;style type=&#8221;text\/css&#8221;&gt;<br \/>\n\u00a0\u00a0.ss-outerdiv {<br \/>\n\u00a0\u00a0\u00a0height: 40px;<br \/>\n\u00a0\u00a0\u00a0width: 200px;<br \/>\n\u00a0\u00a0\u00a0background-color: orange;<br \/>\n\u00a0\u00a0}\u00a0<br \/>\n\u00a0\u00a0.ss-controlgroup {<br \/>\n\u00a0\u00a0\u00a0float: left;<br \/>\n\u00a0\u00a0\u00a0background-color: green;<br \/>\n\u00a0\u00a0\u00a0border: 1px solid black;<br \/>\n\u00a0\u00a0}<br \/>\n\u00a0\u00a0.ss-select, .ss-leftbutton, .ss-rightbutton {<br \/>\n\u00a0\u00a0\u00a0margin-top: 4px;<br \/>\n\u00a0\u00a0\u00a0margin-bottom: 4px;<br \/>\n\u00a0\u00a0\u00a0float: left;<br \/>\n\u00a0\u00a0}<br \/>\n\u00a0\u00a0.ss-select {<br \/>\n\u00a0\u00a0\u00a0width: 120px;<br \/>\n\u00a0\u00a0\u00a0\u00a0 font-family: Arial,Verdana,sans-serif;<br \/>\n\u00a0\u00a0\u00a0\u00a0 font-size: 11px; \u00a0\u00a0\u00a0<br \/>\n\u00a0\u00a0\u00a0margin-left: 4px;<br \/>\n\u00a0\u00a0\u00a0margin-right: 4px;<br \/>\n\u00a0\u00a0}<br \/>\n\u00a0\u00a0.ss-leftbutton, .ss-rightbutton {<br \/>\n\u00a0\u00a0\u00a0height: 20px;<br \/>\n\u00a0\u00a0\u00a0width: 30px;<br \/>\n\u00a0\u00a0}<br \/>\n\u00a0\u00a0.ss-leftbutton\u00a0 {margin-right: 2px;}<br \/>\n\u00a0\u00a0.ss-rightbutton {margin-right: 4px;}<br \/>\n\u00a0&lt;\/style&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;div class=&#8221;ss-outerdiv&#8221;&gt;<br \/>\n\u00a0&lt;div class=&#8221;ss-controlgroup&#8221;&gt;<br \/>\n\u00a0\u00a0&lt;select class=&#8221;ss-select&#8221;&gt;<br \/>\n\u00a0\u00a0&lt;option value=&#8221;Test&#8221;&gt;Test Value&lt;\/option&gt;<br \/>\n\u00a0\u00a0&lt;\/select&gt;<br \/>\n\u00a0\u00a0&lt;button class=&#8221;ss-leftbutton ss-button&#8221;&gt;&lt;\/button&gt;<br \/>\n\u00a0\u00a0&lt;button class=&#8221;ss-rightbutton ss-button&#8221;&gt;&lt;\/button&gt;<br \/>\n\u00a0&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I originally used display:inline-block, line-height\u00a0and vertical-align:middle to do this as detailed here, but the results were inconsistent across browsers. Using floats is a much better solution for a number of reasons \u2013 details are as follows:-\u00a0 The controls are floated left inside a div which is itself floated left. As the div is floating, it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79],"tags":[189,121,78,171,112,16,15,122],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1090"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1090"}],"version-history":[{"count":8,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1090\/revisions"}],"predecessor-version":[{"id":1092,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1090\/revisions\/1092"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}