Fluid layout with additional side panels

Question

I need a layout with three drawers (two optional):

[side box 1] [main content

[side box 2]. main content]

or

[main content covers 100% if side windows are not provided]

I want the main content box to cover the entire height and width available in #load (minus margins), except when the side windows are there, then I want it to cover only those fields (and their right margin).

My CSS:

 #load { margin: 10px; height: 100%; min-width: 1080px; } #primary,#secondaryOne,#secondaryTwo { border-radius: 8px; background: #f5f5f5; border: 1px solid #ccc; } #primary { float: right; height: inherit; width: 75%; height:500px; background:red; } #secondaryOne,#secondaryTwo { min-width: 250px; max-width: 300px; height: 220px; margin-right: 10px; width: 20%; clear:left; float:left; } #secondaryTwo { margin-top: 10px; } 

Plain html

 <div id='load'> <div id='primary'></div> <div id='secondaryOne'></div> <div id='secondaryTwo'></div> </div> 

Jsfiddle

Problems

• * SOLVED * Apply #primary width to full width if side panels are missing.

• * SOLVED * Is there a way to link the two side boxes (# secondaryOne, # secondaryTwo) on the left side of #primary without inserting them in a separate div? If I use float: left on them, they are built next to each other, if I do not swim, #primary is generated under them, and not next to them.

Decision

• Problem # 1 was resolved by joeytje50 using secondary + primary tags and placing secondary side boxes in front of the primary in HTML.
• Problem number 2 was resolved in more than one way. The way I chose so that the secondary tags were placed together, and before the primary - NoobEditor, using clear: left and a negative margin-top .

The solution can be found at: http://jsfiddle.net/v4cvv/67/

The main part of the solution:

 #primary { width: 100%; } #secondaryOne + #primary, #secondaryTwo + #primary { margin-top: -221px; width: 75%; } 

Alternative solution

One problem that I found using the above solution requires that the two drawers and they be the same height. The solution around this is to group the boxes in their own div. This solution:

HTML

 <div id='load'> <div id="sideboxes"> <div id="boxOne" class="box"></div> <div id="boxTwo" class="box"></div> <div id="boxThree" class="box"></div> </div> <div id="primary" class="box"></div> </div> 

CSS

 .box { border-radius: 8px; background: #f5f5f5; border: 1px solid #fff; } #primary { float: right; display:block; height: 97%; width: 100%; } #sideboxes + #primary { width: 75%; } #sideboxes { float: left; height: 97%; width: 23%; margin-right: 10px; } #sideboxes .box { float: left; height: 220px; margin-bottom: 10px; width: 100%; } 

An alternative solution no longer requires a clear and can be expanded for other purposes. Now you can also have 1, 2, 3 or any number of boxes in the side boxes.

Thank you all for your help.

Answer 1

To answer your question that the primary box is 100% wide when there are no secondary boxes, you can do the following:

 #primary {width:100%;} .secondary + #primary {width:75%;} 

If you put this CSS code at the bottom of the stylesheet and then place the primary div tag after the first secondary div tag, then it will be 100% wider by default if there is no element with class="secondary" , This will not change anything regarding the position the div creates, but that will fix your problem.

Alternatively, if your secondary divs may be hidden instead of not being there, you can do this:

 #primary, .secondary.hidden + #primary {width:100%;} .secondary + #primary {width:75%;} 

That is, if you hide secondary tabs through a class, for example .hidden .

Here is the working version, which becomes 100% width when deleting secondary objects, but still makes 75% width when there is a .secondary element in front of it.

Answer 2

Problem number 1

To adjust the #primary div to its width, you can use jquery to check for the existence of a .secondary div and set a different width in the #primary div.

With .secondary demo

without .secondary demo

Jquery:

 if ($('.secondary').length){ $('#primary').css('width', '75%'); } 

Problem number 2

You can use clear:left; , and by changing the order of the divs in your html layout, you will have two shelves on the left and your content div on the right.

Fiddle

HTML:

 <div id='load'> <div id='primary'></div> <div id='secondaryOne' class="secondary"></div> <div id='secondaryTwo' class="secondary"></div> </div> 

CSS:

 .secondary{ clear:left; float:left; } 

Answer 3

Keeping your HTML smae markup here is the solution to your problem: demo

CSS

 html.body { height:100%; } #load { margin: 10px; height: 100%; width:100%; } #primary, #secondaryOne, #secondaryTwo { border-radius: 8px; background: #f5f5f5; border: 1px solid #ccc; } #primary { float: right; display:block; height: 100%; max-width:100%;; width: 68%; margin-top:-70%; /* this is the key */ } #secondaryOne, #secondaryTwo { width:30%; height: 220px; margin-right: 10px; } #secondaryTwo { margin-top: 10px; } 

Answer 4

Try

 #primary { min-width:75%; max-width:100%; } 

http://jsfiddle.net/Paramasivan/v4cvv/65/