Float variable width divs

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

PROBLEM PARTIALLY SOLVED LIKE THIS:

<div id="container" style="width:1024px;">
<div id="content" style="position:relative; background:#0F0; height:500px;float:left; width:100%;"></div>
<div id="sidebar" style="position:relative; width:200px; background:#C30; height:500px;float:right; margin-right:-200px;">LALALALALA</div>
</div>

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. :((

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

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.

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.

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).

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])

*(sry for double posting but I can’t edit the post above.)

LATER :

Problem SOLVED like this:

<div id="container" style="width:1024px;">
        <div id="content" style="background:#0F0; height:500px; width:100%;">

            <div id="sidebar" style=" background:#C30; width: 200px; height:500px;float:right;">
                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
            </div>

         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.
        </div>

    </div>

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:

<div id="container">
<div id="content">
Blah de blah
</div><!-- /#content -->
<div id="sidebar">
blah do blah
</div><!-- /#sidebar -->
</div><!-- /#container -->

Then, you could add a classname “withsidebar” to the <body> tag of your page, only when a sidebar is present. Searching around, I already found a writeup:
https://codex.www.ads-software.com/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