Jump to content

[SOLVED] Idea that I failed to grasp

wsantos

By wsantos
in CSS Help

 Share

Recommended Posts

wsantos Member

wsantos

Posted
Posted

I know there have been numerous threads for this.  However I failed to grasp the idea.

 

I have this layout

 

EGReports.css

      BODY
      {
        MARGIN: 0px 0px 0px 0px;
        PADDING: 0px 0px 0px 0px;
        BACKGROUND: #FFFFFF;
        COLOR: #000000;
        FONT-FAMILY: Trebuchet MS;
      }
      H3
      {
        FONT-SIZE: 30px;
        FONT-WEIGHT: BOLD;
      }
      TABLE
      {
        PADDING: 0px 0px 0pX 0px;
      }
      A
      {
        TEXT-DECORATION: NONE;
      }
      .right
      {
        TEXT-ALIGN: RIGHT;
      }
      .CenterHolder
      {
        TEXT-ALIGN:CENTER;
      }
      .PageMain
      {
        WIDTH: 100%;
        HEIGHT: AUTO;
        COLOR: #000000;
        BACKGROUND: #FFFFFF;
        OVERFLOW: HIDDEN;
        HEIGHT: AUTO;
      }
      .PageHeader
      {
        WIDTH: 100%;
        HEIGHT: 70px;
        BACKGROUND: #0079C1;
        BORDER-TOP: 1px solid #000000;
        BORDER-BOTTOM: 1px solid #000000;
        OVERFLOW: HIDDEN;
        COLOR: #000000;
      }
      .PageMainLeft
      {
        WIDTH: 160px;
        HEIGHT: 100%;
        FLOAT: LEFT;
        BORDER-RIGHT: 2px solid #FF0000;
        BACKGROUND: #AAAAAA;
        OVERFLOW: HIDDEN;
      }
      .PageContent
      {
        DISPLAY: BLOCK;
        MARGIN: 20px 20px 0px 180px;
        TEXT-ALIGN: LEFT;
      }
      #NAV LI,UL#NAV LI A
      {
        LINE-HEIGHT: 32px;
        TEXT-ALIGN: LEFT;
        DISPLAY: BLOCK;
      }
      UL#NAV LI A
      {
        BORDER-BOTTOM: 1px solid #000000;
        TEXT-DECORATION: NONE;
        TEXT-INDENT: 4px;
        FONT-WEIGHT: BOLD;
        COLOR: #000000;
      }
      UL#NAV LI A SPAN
      {
        FLOAT: LEFT;
        HEIGHT: 24px;
        WIDTH: 10px;
        MARGIN: 4px;
        BACKGROUND: #CCCCCC;
      }
      UL#NAV LI A:HOVER
      {
        BACKGROUND: #999999;
        COLOR: #FFFFFF;
      }
      UL#NAV LI A:HOVER SPAN
      {
        BACKGROUND: #0079C1;
      }

 

CBReset.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {padding:0; border:0; margin:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100.01%;
font-family:inherit; vertical-align:baseline;}
      ol, ul {list-style:none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}

 

  <HTML>
    <HEAD>
      <TITLE>
        Untitled
      </TITLE>
      <LINK REL="stylesheet" TYPE="text/css" href="/stylesheets/CBReset.css" />
      <LINK REL="stylesheet" TYPE="text/css" href="/stylesheets/EGReport.css" />
    </HEAD>

    <BODY>
      <DIV CLASS=CenterHolder>
        <DIV CLASS=PageHeader>
          <H3>Elephant Group</H3>
        </DIV>
        <DIV CLASS=PageMain>
          <DIV CLASS=PageMainLeft>
            <UL ID=NAV>
              <LI><A HREF=""><SPAN></SPAN>Home</A></LI>
              <LI><A HREF=""><SPAN></SPAN>Reports</A></LI>
              <LI><A HREF=""><SPAN></SPAN>Admin</A></LI>
            </UL>
          </DIV>
          <DIV CLASS=PageContent>
             Info
            <TABLE>
              <TR>
                <TD>
                  TERMINATION SUMMARY
                </TD>
              </TR>
              <TR>
                <TD>
                  APP
                </TD>
                <TD>
                  COUNT
                </TD>
              </TR>
            </TABLE>
            <FORM NAME=DATE ACTION="<?php echo $_SERVER['PHP_SELF']; ?>" METHOD=POST>
              <TABLE ALIGN=CENTER>
              <TR>
                <TD>
                  Start Date
                </TD>
                <TD>
                  <INPUT ID='calStart_container' NAME='StartDate'>
                </TD>
              </TR>
              <TR>
                <TD>
                  End Date
                </TD>
                <TD>
                  <INPUT ID='calEnd_container' NAME='EndDate'>
                </TD>
              </TR>
              <TR>
                <TD COLSPAN=2 ALIGN=CENTER>
                  <INPUT TYPE=SUBMIT VALUE=QUERY>
                </TD>
              </TR>
            </TABLE>
          </FORM>
        </DIV>
      </DIV>
    </BODY>
  </HTML>

 

What I want to do is

 

1. Have the PageMain adjust so it would fill out the rest of the page when info in there is not sufficient enough to occupy the whole page

2. Have the Left and right adjust to the height of which is bigger.

 

Thank you for pointing me in the right direction

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.