SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Watertown
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIVs intersecting

    Hey all, I'm building a rather simple site, however I've been out of the biz for a while and have forgotten a lot of the workarounds.

    The site has a large header spanning the entire width of the top, a navigation bar in the middle left, a content box spanning the remaining middle space and a footer spanning the width of the bottom. Both the header and footer divs have two nested divs in them, a logo and a quote/address (header has quote, footer has address).

    Using position: relative; I bumped the content box into the spot I'd like for it to be. However, whenever I add text into the box, it pushes the address portion of the footer down, vice versa for less text. In order to fix it, I need to make the address relative and apply a bottom value to it. Then, when the content box gets bigger than the space available it intersects with the footer.

    I'd like to have it simply push the entire footer down when there is too much, and keep it in the same place when there is too little.

    Here is my relevant code
    Code:
    div#footer{
    	height: 70px;
    }
    div#footer_address{
    	text-align: center;
    	width: 80%;
    	float: right;
    	margin-top: -290px;
    	position: relative;
    	bottom: 40px;
    }
    
    div#main_box{
    	width: 79%;
    	float: right;
    	position: relative;
    	bottom: 355px;
    }
    Code:
    		<div id="main_box">
    			...snip...
    		</div>
    
    		<div id="footer">
    
    			<h1>company</h1>
    			<div id="footer_address">
    				Company Corp.
    				<br />
    				237 Obscure Road, Techtown, AK 99999
    				<br />
    				Tel: 111-999-1234 - Fax: 123-411-1999
    			</div>
    		
    		</div>
    Here are pictures of what is happening (with the Firefox Web Developer toolbar outlining all bock level elements)

    With not enough text, it draws the address portion up

    With too much text, it pushes the address portion down

    Thanks, Mike

  2. #2
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, not sure if I can help... but have you tried putting a clearing div between your #main_box and #footer?

    HTML Code:
    /* Clearing div (oldschool): */
    div.clearer {
    	float: none !important;		/* Remove any inherited floats */
    	display: block !important;		/* Make sure our element is a block-level element */
    	clear: both !important;		/* Make sure it clears on both sides */
    	margin: 0 !important;			/* Remove all margins that would make it visible */
    	border: 0 !important;			/* Remove all borders that would make it visible */
    	padding: 0 !important;			/* Remove all padding that would make it visible */
    	height: 0.1px !important;		/* Mozilla/Firefox require the clearer height to not be 0, but rounding makes it 0 */
    	line-height: 0 !important;		/* Set the line-height to 0 so it isn't visible */
    	font-size: 0 !important;		/* Set the font-size to 0 so it isn't visible */
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could declare margin: 0 and padding: 0 by doing this:

    * { margin: 0; padding: 0; }

    This will put everything to zero by default so you dont have to declare it every time.

    I would also add the following rules to the footer:

    #footer {
    clear: both;
    width: 100%;
    }

    There is no need to declare a height in the footer--you could use padding and margin to give the text some breathing room. Also, make sure the footer isn't nested in the content div.

    In your HTML, I would use the address tag in the footer like so:

    Code:
    <address><strong>Company Name</strong><br />555 Address here<br />
    City, State ZIP</address>

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Watertown
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I was able to fix it by searching through the source of http://www.pmob.co.uk/temp/2columnce...equalising.htm


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
  •