Home/ Questions/Q 585561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T15:00:56+00:00

Better explained with a markup: HTML: <div><!–both sidebar and content share width–> <div id=content><!–maybe

  • 0

Better explained with a markup:

HTML:

<div><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->
  </div>
  <div id="sidebar"><!--may be at 70%-->
  </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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can acheive this if you flip your divs around like so:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Columns</title>
<style type="text/css">
<!--
div{height:100px; margin-bottom: 50px; color: #fff;}
#sidebar{float:left;background: red;} /* no idea what width*/
#content{background: blue;} /* no idea what width*/
-->
</style>
</head>


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

<div>
 <div id="content"><!--width now at 100%-->
 Whole Width
 </div>
</div>
</body>
</html>

    The only drawback with this approach is that you will need to know how wide your sidebar is if you want to add any padding to your content div. That’s fixable, but as that wasn’t really your question, I won’t tell you how to suck eggs, I’m sure you can work it out 😉

    • 0