[CSS] Main Box No Set Width
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:
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.
Re: [CSS] Main Box No Set Width
I am slightly confused as to exactly what you are looking for.
If you remove the
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
Code:
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?
Re: [CSS] Main Box No Set Width
Re: [CSS] Main Box No Set Width
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.
