Page 1 of 1

How do I main One div fill part of screen? Next to another.

Posted: Tue Mar 08, 2016 8:58 am
by simonmlewis
This is a difficult question to put in one line.

I'm building a custom page. On some pages the owner can enable a side menu to appear on the left. So I need a div on the left for "sidemenu", and there will be a 'body' div on the right with the main content.

But on other pages they might disable that side menu, so the "body" div goes full width.

I don't want to mess around with multiple DIVs. So while I can set the sidemenu div to be 200px wide for example, how do I do a "float" or "inline-block", so that body div goes next to it, but at the same time, the body can go full width if no sidemenu there?

Re: How do I main One div fill part of screen? Next to anoth

Posted: Tue Mar 08, 2016 10:54 am
by Christopher
If the page can be customized then you should add CSS from the configuration to override the default in the stylesheet. If the content is 75% and the sidebar is 25%, then have the configuration override with CSS for 100% and 0% (or even display:none; ).

Re: How do I main One div fill part of screen? Next to anoth

Posted: Tue Mar 08, 2016 11:06 am
by simonmlewis
No I only want the sidemenu DIV to occur when it's being told to by the page in the database.
Plan B is to have two Mainbody div classes. One for fill width and one for part width. Just wondered if there was a nice way to make it float right, or display inline, and to adjust it's width... to fit in.

The other issue I have got, is if the side menu is not as tall as the page, the DIV's background color won't go full height of the surrounding DIV.

How do I set the DIV to be 100% tall, the height of the DIV in which is resides?