I have a query that remains unanswered in my research on various CSS layout options. Hence, I decided to share it here.
My ongoing project involves a fluid/fixed two-column design. The main content is placed on the left side while the sidebar resides on the right. The sidebar has a fixed width of approximately 200 pixels, allowing the content to expand and fill up the rest of the available space within the parent container.
The following code illustrates the structure:
<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
<div style="margin-right: 200px;">Content goes here.</div>
<div style="float: right; width: 200px;">Menus goes here.</div>
<div style="clear: both;"></div> <!-- float-clearer div -->
</div>
This method generally works well, but there's a specific requirement for the sidebar to appear only under certain conditions dictated by the design. As all HTML is dynamically generated using PHP, there's uncertainty about whether the "get-sidebar()" function will be executed alongside "get-content()".
When the sidebar is present, I aim to have the content adjust itself to accommodate the sidebar without overflowing. In absence of the sidebar, the content should occupy the full width in the parent container.
Is it feasible to achieve this solely through CSS, such as utilizing 'auto' for the content margins, without resorting to PHP or JavaScript?