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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

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

Post 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; ).
(#10850)
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply