SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small Positioning Problem

    I'm working on http://www.bluevolume.com/e61st/, and the first page works fine. Everything is relatively positioned except for the storefront picture. The problem with this is that on http://www.bluevolume.com/e61st/press.htm I turned it into a text box, and because it is not relatively positioned, the footer won't follow the height of the text box. Any ideas on how to fix this minor problem? I tried floating the text box right, but it just goes under the footer. I want the footer to be relative to the text box, not the featured items image.

    Thanks in advance!
    Last edited by tempus; Jan 2, 2004 at 16:10.

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Position the footer relative to the main div (text or image), rather than to the menu
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i know, my question is how?

    it's already right above the footer in the HTML.

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

    Because you have absolutely placed your text (#text) then you will be unable to use it as a point of reference because it is removed from the flow.

    To all intents and purposes the footer will think that the text doesn't exist.

    You could simply change the text to float:right:
    Code:
    #text {
    float:right;
    width: 466px; min-height: 358px;
    border: 1px solid #000;
    font: 0.9em Tahoma;
    letter-spacing: 1px;}
    Then move the text up in the html so that is under the top nav.
    e.g.
    Code:
    <div id="navbar">
    <a href="index.htm">About Us</a>
    <a href="events.htm">Events</a>
    <a href="newsletter.htm">Newsletter</a>
    <a href="press.htm" class="onpage">Press</a>
    <a href="contact.htm" id="right">Contact Us</a>
    </div>
    <div id="text"><h1>E.61st Press Releases</h1>
    etc....
    This position is important otherwise it won't float.

    Next add a clear:both style to your #footer (#footer {clear:both}.

    This should achieve the layout you want and the footer will stay underneath the text. (You may want to set a margin-top on the footer to move it away from the text a bit.)

    Hope that helps.
    Paul


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
  •