SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The part that never got answered - bottomContainer

    I tried, and tried to fix this.. any ideas?


    ** Looks fine in IE ** FireFox the "bottomContainer" div is pushed to the right
    Link:
    http://www.jamiegerrard.com/carpentersUnion/

    CSS:
    Code:
    .contact {width:275px; height:60px; margin:0 0 6px 12px; padding:0;}
    .contact h3 {margin:0; padding:0; font:bold 12px Arial, Helvetica, sans-serif; color:#C62935;}
    .contact p {margin:0; padding:0; font:12px Arial, Helvetica, sans-serif;}
    .contact img {float:left; padding:0 6px;}
    .contactContent {float:left;}
    HTML
    Code:
    		<div class="contact">
    			<img src="_assets/images/common/contactPhoto.gif" alt="" width="60" height="60" />
    			<div class="contactContent">
    				<h3>Vince Hatt, Director of Organizing</h3>
    				<p>Phone: (902) 454-5100 ext. 32<br />
    				Cell: (902) 555-5555<br />
    				Email: <a href="mailto:vincenthatt@hfx.eastlink.ca">vincenthatt@hfx.eastlink.ca</a></p>
    			</div>
    		</div>
    	
    		<div class="top">[ <a href="#top" title="top of page">top of page</a> ]</div>
    	</div>
    	
    	<div id="containerBottom"></div>
    </div>

    I have a nested "cotact" div. Now when it's placed at the bottom a the page, the "bottomContainer" divs img wont clear the "contac" div - resulting in it being pushed over the the right.

    I though clearing the contact div was the solution..but no luck? any suggestions.

    Thanks, in advance, Jamie
    Last edited by jamie_g; Sep 25, 2004 at 13:41.
    ----
    Cheers, Jamie

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add clear: both to that bottom container.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried adding clear:both; on both the "bottomContainer" DIV and the "contact" DIV

    CSS
    Code:
    #containerBottom {width:701px; height:49px; margin:-40px 0 0 0; background:url(../images/common/bgBottom.gif) no-repeat left top; overflow:hidden; position:relative; z-index:0; clear:both;}
    no luck..

    -jamie
    ----
    Cheers, Jamie

  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)
    You need to clear it like this.
    CSS
    Code:
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    HTML
    Code:
    	<div class="top">[ <a href="#top" title="top of page">top of page</a> ]</div>
    </div>
    <br class="clearer" />
    <div id="containerBottom"></div>
    </div>
    <div id="copyright">
    Now it will clear

    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still didn't work. it did initially, but I took out the "top" div section.

    http://www.jamiegerrard.com/carpentersUnion/

    CSS
    Code:
    .brClear{height:1px; overflow:hidden; clear:both; margin-top:-1px;}
    HTML
    Code:
    <div class="contact">
    			<img src="_assets/images/common/contactPhoto.gif" alt="" width="60" height="60" />
    			<div class="contactContent">
    				<h3>Vince Hatt, Director of Organizing</h3>
    				<p>Phone: (902) 454-5100 ext. 32<br />
    				Cell: (902) 555-5555<br />
    				Email: <a href="mailto:vincenthatt@hfx.eastlink.ca" title="vincenthatt@hfx.eastlink.ca">vincenthatt@hfx.eastlink.ca</a></p>
    			</div>
    		</div>
    		
    	</div>
    	
    	<br class="brClear" />
    	<div id="containerBottom"></div>
    </div>
    ----
    Cheers, Jamie

  6. #6
    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,
    Still didn't work. it did initially
    What you meant to say was "it worked perfectly until I changed it and I broke the code"

    You need to add another clearer now in exactly the place shown. Don't say it doesn't work because it worked last time and it works this time

    Code:
    		  Email: <a href="mailto:vincenthatt@hfx.eastlink.ca" title="<A href="mailto:vincenthatt@hfx.eastlink.ca">vincenthatt@hfx.eastlink.ca</a></p">vincenthatt@hfx.eastlink.ca">vincenthatt@hfx.eastlink.ca</a></p>
    	  </div>
    	</div>
    	<br class="brClear" />
      </div>
      <br class="brClear" />
      <div id="containerBottom"></div>
    </div>
    <div id="copyright">

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    -jamie
    ----
    Cheers, Jamie


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
  •