[CSS] Main Box No Set Width

[RastaLulz]

Hello,

I'm trying to code a template where there is no set width for the main box, however, when the side box is displayed on the page, it'd have a width of 100px. Therefore, I'd want the main box to move over to fit with the side box on that specific page.

Demo:
http://g2n.us/Dev/test.php

Code:

<div style="margin: auto; width: 500px; background: #F3F3F3; padding: 10px; border-radius: 5px; font-family: Verdana; font-size: 10px;">

  <!-- 
  /* I want to have this removed on certain pages. */
  /* Side box. */
  --!>
  
  <div style="float: right; width: 100px;">
    <div style="background: red; padding: 5px; color: white; border-radius: 5px; margin-left: 10px;">
      Test
    </div>
  </div>
  
  <!-- 
  /* I want this to adjust based on if the side box above is on the page or not. */
  /* Main box. */
  --!>
  
  <div style="background: black; padding: 5px; color: white; border-radius: 5px;">Test
  </div>
    
  <div style="clear: both;">
  </div>
  
</div> 

Hopefully that make sense.

[MentaL]

[TimeBomb]

I am slightly confused as to exactly what you are looking for.
If you remove the

width: 500px;

in the CSS of the first div, than you should get the result you want. Remove the sidebar will make the main box expand to encompass the sidebar's used space.

If need be, modify the CSS of the body/html. I usually set it, at the very least, as

padding: 0;
margin: 0;
width: 100%;

You can change the width if need be, and add height: 100%; if need be.

If this is not what you want, then can you please elaborate?

[RastaLulz]

When the side box code is removed:


When the side box code is there:

[TimeBomb]

Remove the width: 500px; and that is how it will work, RastaLulz. If you want a spacing between the sidebar and the main box, just add a bit of a margin.