SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positing the div in between 2 divs

    ina web page layout using css i have a div for header & footer which extends the full width of the web browser
    in between this 2 i want a div which wuld also extend the full width of teh web page
    & footer wuld come below & shld start from excatly below of the header
    now when i palc ethe div footer comes on top of the centre div

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You'll need to post your html and css so that we can see where you are going wrong. To do what you want needs no special rules and would happen automatically.

    e.g.
    Code:
    <div id="header"><h1>Header</h1></div>
    <div id="content"><h2>Content</h2></div>
    <div id="footer"><p>Footer</p></div>
    No CSS needed so far and would do what you ask for.

    If you are using absolute positioning to place your elements then that is the wrong approach.

    Post an example of what you are doing.

  3. #3
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id="main1">
    <div id="header2">
    <div id="logo2">
    <p><h2>title</h2></p>
    </div>
    <div id="menu">
    <ul>
    <li><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Products</a></li>
    <li><a href="#" title=""> Our plan </a></li>
    <li><a href="#" title="">About</a></li>
    <li><a href="#" title="">Contact</a></li>
    </ul>
    </div>
    </div>


    ----------- here i need div for content=--------------------------



    <div id="footer">
    <p>Copyright &copy; 2011.<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
    </div>



    --- css

    #main1
    {

    background-repeat: no-repeat;
    background-image: url(images/headerimg.jpg);
    /*width: 997px;*/
    height: 150px;
    background-color: black;
    }


    #logo2 {
    padding-left: 200px;
    width: 635px;
    padding-top: 30px;
    height: 30px;
    }

    #header2
    {/*
    width: 778px;
    height: 284px;*/

    }


    #footer
    {
    clear: both;
    height: 36px;
    padding: 15px 0;
    background-color:Black;
    background-repeat: no-repeat;
    background-image: url(images/footer.jpg);
    border-top: 5px solid #5592C6;
    text-align: center;
    }

  4. #4
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd probably find things a bit easier if you stripped out some of those unnecessary divs. You don't need the logo2 and menu divs, as far as I can see.

    From your HTML, you've also failed to close one of the divs. (Count them...)

    I'm not totally sure what you're having a problem with. All you need to do, surely, is put a div in the place you've shown:

    <div id="content">
    [The actual content goes here]
    </div>

    (The id="content" isn't actually necessary, but I've put it there for reference.)

    It would help to see a mock-up of what you expect the page to look like, because the CSS is a bit inconsistent (you've commented out some declarations that conflict, but I don't know if you mean to delete those or include them).

    Show us a mock-up, and I suspect the CSS will be fairly easy.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You missed a closing div at the end, but otherwise, this should look fine. Because you have the color black on the #main div, that may be tricking you. If you want a black bg, better to put it on the body. Here is a slightly tidied version of your code. Save it in a .html file and open it in your browser.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style type="text/css" media="all">
    html, body, div,
    h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
    form, fieldset, legend, label, textarea, 
    span, em, strong, sub, sup, cite,
    table, tbody, td, tfoot, th, thead, tr, tt,
    dl, dt, dd, ol, ul, li {
        margin: 0;
        padding: 0;
    }
    
    img {
        border: 0;
        vertical-align: bottom;
    }
    
    #main1 {
    background-repeat: no-repeat;
    background-image: url(images/headerimg.jpg);
    background-color: black;
    }
    
    #logo2 {
    padding-left: 200px;
    width: 635px;
    padding-top: 30px;
    height: 30px;
    }
    
    #header2 {overflow: hidden;}
    
    #content {background: white;}
    
    #footer {
    clear: both;
    height: 36px;
    padding: 15px 0;
    background-color:Black;
    background-repeat: no-repeat;
    background-image: url(images/footer.jpg);
    border-top: 5px solid #5592C6;
    text-align: center;
    }
    </style>
    	
    </head>
    
    <body>
    <div id="main1">
      <div id="header2">
        <div id="logo2">
          <p><h2>title</h2></p>
        </div>
        <div id="menu">
          <ul>
          <li><a href="#" title="">Home</a></li>
          <li><a href="#" title="">Products</a></li>
          <li><a href="#" title=""> Our plan </a></li>
          <li><a href="#" title="">About</a></li>
          <li><a href="#" title="">Contact</a></li>
          </ul>
        </div>
      </div>
    
      <div id="content">
        <p>This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. </p>
    
        <p>This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. </p>
      </div>
    
      <div id="footer">
        <p>Copyright &copy; 2011.<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
      </div>
    </div>
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ralph missed this bit

    Code:
    <p><h2>title</h2></p>
    You can't put an h2 inside a paragraph. Headings and paragraphs can only contain inline elements.

    Get rid of the P element that's around the h2.

    Code:
    <h2>title</h2>

  7. #7
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    attached teh screenshot of how it appears. hope u can get a clear idea now
    Attached Images Attached Images

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by svibuk
    in between this 2 i want a div which wuld also extend the full width of teh web page
    Svibuk prolly wants a 100% high page with a sticky footer.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by svibuk View Post
    hi

    attached teh screenshot of how it appears. hope u can get a clear idea now
    The screenshot you posted is not the result of the code you have given us so far. Check out Ralph's code above and you will see there is no overlap with the footer. It looks to me as though you are absolutely placing the footer but the code you have given us doesn't show this to be true. Or you could have some missing divs in there corrupting the layout so validate your code first.

    If you are looking for a sticky footer as Stomme suggested then check her link out in the previous post.

    Do you have a live link that we can look at and then we can solve this in minutes for you

  10. #10
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    attached the html screenshot
    Attached Images Attached Images
    • File Type: png 1.png (40.0 KB, 6 views)

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Rather than post a picture of code, post the real code. Also, make sure first to remove anything like ASP code that will be removed from the page on the server. (Keep it to the HTML that the browser will see.) And you still haven't shown us the CSS you are using, which is critical to the question.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You've set a height for #main1 of 150px:
    Code:
    #main1 {
        background-repeat: no-repeat;
        background-image: url(images/headerimg.jpg);
        /*width: 997px;*/
    height: 150px;
        background-color: blue;
    }
    As #main1 holds your header and content then any content in excess of 150px will be ignored as though it doesn't exist.

    Remove the height from #main1.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •