Better explained with a markup:

HTML:

<div><!--both sidebar and content share width-->
  <div id="content"><!--width 70%-->
  </div>
  <div id="sidebar"><!--width 30%-->
  </div>
</div>

CSS:

#sidebar{float:left;} /* no idea what width*/
#content{float:right;} /* no idea what width*/

What I want to do is that if the sidebar is not present in the markup, the content div expands to take the place of the sidebar:

<div>
 <div id="content"><!--width now at 100%-->
 </div>
</div>

2 answers

0
points

HTML:

Two Column:

<div class="twocolumn">
    <div id="content">
    </div>
    <div id="sidebar">
    </div>
</div>

One Column:

<div class="onecolumn">
    <div id="content">
    </div>
</div>

CSS:

#sidebar{
float:left;
width:30%;
} 
.twocolumn #content{
width:70%;
} 
.onecolumn #content{
width:100%;
} 
#content{
float:right;
}
Answered almost 7 years ago by David Leininger
o.k.w 2355
0
points

A pure CSS method will be using CSS table-layout:

CSS:

#wrapper{
  display: table;
  width: 100%;
}
#content { 
  display: table-cell; 
  width: auto; 
}
#sidebar { 
  display: table-cell;
  width: 30%; 
}

HTML:

<div id="wrapper"><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->content
  </div>
  <div id="sidebar"><!--may be at 70%-->sidebar
  </div>
</div>

The above however will not work for older browsers like IE6/7 etc.

I noticed you posted a similar question at stackoverflow.com, some of the answers offer javascript solution. My recommendation is to use JS as a fallback. The best solution (if possible) however will be to use server-side codes to generate the markups dynamically.

Answered almost 7 years ago by o.k.w