HTML DIVs with DIVs

Discussion in 'Getting started' started by GeneNess, Jun 7, 2010.

Thread Status:
Threads that have been inactive for 5 years or longer are closed to further replies. Please start a new thread.
  1. GeneNess

    GeneNess

    Hello,

    I'm not sure if this is the right forum to handle my HTML question. I'm new to the Discount ASP.net environment... so here goes..

    I'm having a problem setting up DIVs with DIVs. Here's my problem.
    <body>
    <div id="masthead">
    <div id="logo">logo
    </div>
    <div id="header">header
    </div>
    </div>
    <div id="container">
    <div id="left_col" style="height: 156px">
    </div>
    <div id="page_content" style="height: 156px">
    <div id="right"></div>
    </div>
    </div>
    <div id="pre-footer">pre-footer</div>
    <div id="footer">footer
    </div>
    </body>

    Div ID "Right" will overflow the Pre-Footer Div. If I take it out the Left and Page-Content work fine. They do not overflow the Pre-Footer but push it down.

    What am I doing wrong?

    Thanks,
    Gene
     
    GeneNess, Jun 7, 2010
    #1
  2. mjp

    mjp

    Hard to say without seeing the CSS. div ID right might be doing something your other divs are not.
     
    mjp, Jun 7, 2010
    #2
  3. wisemx

    wisemx

    ...It probably is a CSS problem, path or the internal lines.
    Tip: Try and use this to clear sections between DIV's
    <br clear="all" />

    ...Most everyone has forgotten about that little trick but HTML5 is bringing ti back. ;-)
    All the best,
    Mark
     
    wisemx, Jun 7, 2010
    #3
  4. GeneNess

    GeneNess

    Thank you

    Here's my CSS file..
    /* CSS layout */
    body {
    margin: 0;
    padding: 0;
    }

    #masthead {
    min-width: 600px;
    }

    #logo {
    float: left;
    width: 200px;
    }

    #header {
    margin-left: 200px;
    }

    #container {
    clear: both;
    min-width: 600px;
    }

    #left_col {
    float: left;
    width: 200px;
    }

    #page_content {
    margin-left: 200px;
    }
    #pre-pre-footer {
    clear: both;
    }


    #pre-footer {
    clear: both;
    }
     
    GeneNess, Jun 7, 2010
    #4
  5. GeneNess

    GeneNess

    DIV Overflow

    This did not work....<br clear="all" />

    Thanks for the effort...

    Gene
     
    GeneNess, Jun 7, 2010
    #5
  6. GeneNess

    GeneNess

    Sorry - Not the Right CSS

    Sorry... Here's the right HTML & CSS file
    *****************
    <body>

    <div id="masthead">
    <div id="logo">logo
    </div>
    <div id="header">header
    </div>
    </div>
    <div id="container">
    <div id="left_col" style="height: 156px">lift
    </div>
    <div id="page_content" style="height: 156px">
    <div id="right_col" style="height: 113px"> right</div>
    </div>
    </div>
    <div id="pre-footer">pre-footer</div>
    <div id="footer">footer
    </div>

    </body>
    ***********************
    /* CSS layout */
    body {
    margin: 0;
    padding: 0;
    }

    #masthead {
    min-width: 600px;
    }

    #logo {
    float: left;
    width: 200px;
    }

    #header {
    margin-left: 200px;
    }

    #container {
    clear: both;
    min-width: 600px;
    }

    #left_col {
    float: left;
    width: 200px;
    }

    #page_content {
    margin-left: 200px;
    }

    #right_col {
    margin-left: 200px;
    }

    #pre-pre-footer {
    clear: both;
    }


    #pre-footer {
    clear: both;
    }


    #footer {
    clear: both;
    }
    ************************

    Thanks for any help...

    Gene
     
    GeneNess, Jun 7, 2010
    #6
  7. wisemx

    wisemx

    ...Gimme a sec to create a test page (Be right back)

    ...OK, created a test page and found a few problems.
    1) You didn't declare any CSS for the right column.
    2) You have a pre-pre-footer that isn't used.

    I'd like to recommend that you take a look at these two 3 column tutorials and consider going with a fluid css layout rather than fixed.
    Reason being, with specified widths like that your right column gets bumped even if I create a CSS section for it.
    This one is a nice layout and easy to follow: http://www.maxdesign.com.au/articles/css-layouts/three-liquid/
    This one is like yours but works a bit better: http://matthewjamestaylor.com/blog/perfect-3-column.htm
    All the best,
    Mark
     
    wisemx, Jun 7, 2010
    #7
  8. GeneNess

    GeneNess

    Thanks

    Mark,

    Thank you for your time and effort. I will do as you say.

    Thanks again,
    Gene
     
    GeneNess, Jun 7, 2010
    #8
  9. wisemx

    wisemx

    ..Always glad to help ;-)
     
    wisemx, Jun 7, 2010
    #9
Thread Status:
Threads that have been inactive for 5 years or longer are closed to further replies. Please start a new thread.

Share This Page