Title: Float variable width divs Last modified: August 20, 2016 --- # Float variable width divs * [dr06u](https://wordpress.org/support/users/dr06u/) * (@dr06u) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/) * Searched the forum and found nothing if there is any similar post please direct me to it. I have this code: * ``` Untitled Document
``` * How can I float those two divs side by side. The thing I want to achieve is: in WordPress I want the #left div to be the container and the #right div to be the sidebar (with widgets) when there are no widgets on the sidebar (the sidebar is inactive) I want the left div to expand all the width of the #container div( 1024px) but when the sidebar is active, with widgets on it, I want the sidebar to float left side by side with the content. The code above does not seem to work. No matter if the sidebar (#right div) is there or not the width of the # left div always stays the same (1024px the size of the #container) and doesn’t let the #right div to float beside it. Any help would be appreciated. Thank you in advance. Viewing 9 replies - 1 through 9 (of 9 total) * [Paul Kaiser](https://wordpress.org/support/users/freakingid/) * (@freakingid) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875376) * Howdy, * Fairly certain width:auto isn’t going to do what you want. (Don’t we all wish!) If you are going to float those puppies, they need to have a specific width set, in something like pixels, ems, whatever. * You could make two different templates, though. Each could then have a different width set on div#left as appropriate. * Paul * Thread Starter [dr06u](https://wordpress.org/support/users/dr06u/) * (@dr06u) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875379) * PROBLEM PARTIALLY SOLVED LIKE THIS: * ```
``` * Seems like the margin-right:- the size of the fixed div solved the problem , it floats the #sidebar div beside the #content but still the content div has a 1024px size. :(( * [Paul Kaiser](https://wordpress.org/support/users/freakingid/) * (@freakingid) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875389) * Hmm… What will activate / deactivate the sidebar? Is it going to be interactive, like using jQuery to hide / show the sidebar? If so, you can add a function that occurs when the sidebar is hidden / shown that alters the class on your div#content. The class can then specify the width (in your CSS.) Paul * [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/) * (@swansonphotos) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875393) * A good way to do this is: * on the div ‘container’ use: * ``` display: block; width: 100%; ``` * then for nested div(s) use * ``` display: inline; float: left; width: xx%; ``` * (xx will be 50% if 2 nested div’s, 33% if three, etc. or what works best – different styles can be applied to each nested div, i.e., 60% on one and 40% on another… note: left and right margin can affect this, so keep them tight and try dropping the widths a number or two if something drops below – use padding if it’s crowded) * another way for CSS3, is to use: * ``` position: absolute; top: (xx)em; left: (xx)px; (or right: (xx)px; z-index (a number higher than the z-index of what this will 'cover'); ``` * note: while em is good for vertical size, it is not for horizontal, but we can always use px for both. * Thread Starter [dr06u](https://wordpress.org/support/users/dr06u/) * (@dr06u) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875394) * > Hmm… > What will activate / deactivate the sidebar? Is it going to be interactive, > like using jQuery to hide / show the sidebar? If so, you can add a function > that occurs when the sidebar is hidden / shown that alters the class on your > div#content. The class can then specify the width (in your CSS.) Paul * If I take out all the widgets from the sidebar (if it’s empty) wordpress automatically makes the markup of the sidebar to dissapear (there is no div from sidebar) only the content div remains in the site source code. So what I want is that when I delete all the widgets from the sidebar (and the div is gone) the #content div to expand all the width of the #container (1024px). It already does this but when the sidebar has widgets on it, the container div still stays expanded to 1024px and does not let the sidebar to float besite it. * > A good way to do this is: > on the div ‘container’ use: > display: block; > width: 100%; then for nested div(s) use > display: inline; > float: left; width: xx%; (xx will be 50% if 2 nested div’s, > 33% if three, etc. or what works best – different styles can be applied to > each nested div, i.e., 60% on one and 40% on another…note: left and right margin > can affect this, so keep them tight and try dropping the widths a number of > two if something drops below – use padding if it’s crowded) * If I do that when I set container div to 50% width , when the sidebar is gone( when there are no widgets active and wordpress automatically deletes sidebar’s markup from site sourcecode) the content div will stay at 50% width and I don’t want that I want it to expand to the full size of the site (#container : 1024px). I don’t want a fixed width #content div! * > another way for CSS3, is to use: > position: absolute; > top: (xx)em; left: (xx)px; (or right: (xx)px; z-index ( > a number higher than the z-index of what this will ‘cover’); note: while em > is good for vertical size, it is not for horizontal, but we can always use > px for both. * I would rather not use absolute position because it’s not very goot for cross browser. * [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/) * (@swansonphotos) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875400) * Which is why I said: * > another way for **CSS3**, is to use: * Do you want to always have no sidebars? * Also, you should not use inline styles (or id’s of well established default styles). * Thread Starter [dr06u](https://wordpress.org/support/users/dr06u/) * (@dr06u) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875449) * How would absolute positioning help me? If I have a #container of 1024px width and nested inside it two divs, one (#content) with relative positioning and no fixed width and one (#sidebar) with absolute positioning and a fixed width. The# content div will expand the whole width of the #container (1024px) and the #sidebar will float next to it. The thing I want to achieve is to float the #sidebar next to the #content inside the width of the #container (1024px) without setting any width at all on the #content div. I don’t want the sidebar to be outside the # container div , I want the #sidebar to force the width of the #content to collapse and fill the remaining space (1024px – 200px[width of the sidebar]) * Thread Starter [dr06u](https://wordpress.org/support/users/dr06u/) * (@dr06u) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875511) * *(sry for double posting but I can’t edit the post above.) * LATER : * Problem SOLVED like this: * ```
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
``` * [Paul Kaiser](https://wordpress.org/support/users/freakingid/) * (@freakingid) * [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875512) * Hey dr06u, Nifty solution–glad you got it figured out. I’ve been thinking on this one and came up with another way that’s also simple. (Yours above is equally simple.) * If you have: * ```
Blah de blah
``` * Then, you could add a classname “withsidebar” to the tag of your page, only when a sidebar is present. Searching around, I already found a writeup: [http://codex.wordpress.org/Function_Reference/body_class#Add_Sidebar_Classes](http://codex.wordpress.org/Function_Reference/body_class#Add_Sidebar_Classes) * So following those instructions, you can have two different widths assigned to# content: * #content {width:1024px;} .withsidebar #content {width:824px;} * Take care, Paul Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Float variable width divs’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 9 replies * 3 participants * Last reply from: [Paul Kaiser](https://wordpress.org/support/users/freakingid/) * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/float-variable-width-divs/#post-2875512) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics