SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div and footer issues

    i've seen threads on here before that address matching up two parralel divs to equal height. I can't seem to fix the problem i'm having though. I want the divs to extend to whichever div has the most content. I then Want a footer at the bottom stretching across these two divs... that's all really it seems simple but it's not working. forgive my newbness It's only my first tableless layout.

    the url:

    http://www.antoniomassa.com/sportcenter/

    in case you don't know what i'm talking about a screenshot:
    http://www.antoniomassa.com/images/screen.jpg

    forgive my stylesheet I know it's real messy and unorganized, but that is just the way it will be untill I am done.

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the maincontent and sidebar inside another div. Give that div a white background. Then, clear the floats.

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's still not doing what I want it to do... isnt there a way to make the maincontent div stretch down borders and all? and not leave the borders hanging in the middle of the container div. And what if later on there is a page that has more content in the maincontent div (which seems most likely to happen) than the sidebar? a white background is left and the same situation with the border. Now I don't want any of you guys getting to mad at me for saying this, but Isn't there a way to get a div to act like a table in this situation?

  4. #4
    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,

    This is explained in the three column demo and there are many examples of how to equalise columns in a 2 col layout.

    The simplest method is to use a background image that repeats on the parent of the column thus maintaining consistent columns.

    http://www.pmob.co.uk/temp/2colblog.htm

    There is new method out at PIE that lets you have equalising columns also.

    http://www.positioniseverything.net/...ut/equalheight

  5. #5
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried the equalheight method on position is everything but I can't see to get the overflow value in my container to work? anyone try this one firsthand or know enough about it... I updated the url in my first post.

  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)
    HI,

    You need to get rid of the height:100% from the columns otherwise there can be no overflow to hide. You have also over-written the negative margin by following it with a margin:0.

    You also need to clear the floats.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* CSS Document */
    body {
     font: 78%/1.5 arial, helvetica, serif;
     background: #FFFFFF url(http://www.antoniomassa.com/sportcen...background.jpg) repeat-x fixed bottom;
     text-align: center;
     padding: 0;
     }
     
    a {
     color: #3c7cff;
     text-decoration: none;
     }
     
    a:hover {
     color: #FF6600;
     font-weight: bold;
     }
     
    img {
     padding: 10px 5px 5px 5px;
     } 
     
    form {
     padding: 0px 10px 20px 30px;
     } 
    /* Specific Divs */
    #wrapper{
     overflow: hidden;
     }
     
    #container {
     width: 750px;
     background: #FFFFFF;
     text-align: left;
     overflow: hidden;
     border: dotted #ff8a00;
     border-width: 1px 0px 0px 0px; 
     margin: 0 auto;
    } 
    #logo {
     width: 750px;
     background: #FFFFFF;
     text-align: right;
     border: 0;
     margin: 0 auto;
    }
    #maincontent h1 {
     color: #ff8a00;
     padding: 10px;
     }
     
    #maincontent P {
     padding: 20px;
     color:#333333
     }
    #maincontent {
     width: 499px;
     background: #FFFFFF url(http://www.antoniomassa.com/sportcen...background.jpg)  top no-repeat;
     float: left;
     text-align: left;
     border: solid #3c7cff;
     padding-bottom: 10000px;
     margin-bottom: -10000px;
     border-width: 0px 0px 1px 1px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    /* Navigation */  
    #nav, #nav ul {
     float: left;
     width: 748px;
     list-style: none;
     line-height: 1;
     font-weight: bold;
     padding: 0;
     border: solid #e3a000;
     border-width: 1px 1px;
     margin: 0 0 0 0;
    }
    #nav {
     background: #ffffff url(http://www.antoniomassa.com/sportcen...es/navback.jpg);
     }
     
    #nav ul {
     background:url(http://www.antoniomassa.com/sportcen...s/dropback.jpg);
     }
    #nav a {
     display: block;
     width: 10em;
     w\idth: 6em;
     color: #3c7cff;
     text-decoration: none;
     padding: 0.25em 1.9em;
    }
    #nav a:hover {
     color: #e3a000;
     }
    #nav a.daddy {
     background: url(http://www.antoniomassa.com/sportcen...ages/arrow.gif) center right no-repeat;
    }
    #nav li {
     float: left;
     padding: 0;
     width: 8.5em;
     color: #ffffff;
    }
    #nav li li {
     padding-right: 1em;
     width: 13em;
     color: #ffffff;
    }
    
    #nav li ul {
     position: absolute;
     left: -999em;
     height: auto;
     font-weight: normal;
     width: 14.4em;
     w\idth: 13.9em;
     border-width: 0.25em;
     margin: 0;
    }
    #nav li ul a {
     width: 13em;
     w\idth: 9em;
    }
    #nav li ul ul {
     margin: -1.75em 0 0 14em;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
     left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
     left: auto;
    }
    #nav li:hover, #nav li.sfhover {
     background: #2c4y4f;
    }
    /* ------ fin -------- */
    /* MySam Begin */
    #mysam {
     vertical-align:middle;
     }
     
    #mysam a {
     font-size:12px;
     font:Verdana, Arial, Helvetica, sans-serif;
     float:right;
     color: #3c7cff;
     text-decoration: none;
     }
    #mysam a:hover {
     font-size:12px;
     text-align:right;
     color: #FF6600;
     font-weight: bold;
     }
    /* ------ fin -------- */
    /* SideBar Begin */ 
    #sidebar {
     width: 249px;
     text-align: left;
     background: #8cff94 url(http://www.antoniomassa.com/sportcen...background.jpg) top no-repeat; 
     float: right;
     border: solid #3c7cff;
     padding-bottom: 10000px;
     margin-bottom: -10000px;
     border-width: 0px 1px 1px 0px; 
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color:#000fcf;
     }
     
    #sidebar h1{
     padding: 10px;
     }
     
    #sidebar img {
     padding: 10px 0px 2px 10px
     }
     
    #sidebar p{
     padding: 20px;
     } 
    /* ------ fin -------- */
    #footer {
     width: 748px;
     border: solid #0099FF;
     border-width: 0px 1px 1px 1px;
     } 
     
    /* Specific Style */
    .clear {
     clear:both;
     margin-top:-1px;
     height:1px;
     overflow:hidden;
     }  
     
    </style>
    <title>Dropdown Navigation Test</title>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    </head>
    <body>
    <div id="container">
      <p id="mysam"><img src="http://www.antoniomassa.com/sportcenter/images/logo.png" alt="Sport Center 481" /><a href="#">MySam Login</a></p>
      <ul id="nav">
    	<li><a href="#">Home</a>
    	<li><a href="#">Sports</a>
    	  <ul>
    		<li><a href="#" class="daddy">Aeroball</a>
    		  <ul>
    			<li><a href="#">Leagues</a></li>
    			<li><a href="#">Tournaments</a></li>
    			<li><a href="#">Rules</a></li>
    		  </ul>
    		</li>
    		<li><a href="#" class="daddy">Baseball</a>
    		  <ul>
    			<li><a href="#">Sports Zone</a></li>
    		  </ul>
    		</li>
    		<li><a href="#" class="daddy">Dodgeball</a>
    		  <ul>
    			<li><a href="#">Leagues</a></li>
    			<li><a href="#">Tournaments</a></li>
    			<li><a href="#">Rules</a></li>
    		  </ul>
    		</li>
    		<li><a href="#" class="daddy">Football</a>
    		  <ul>
    			<li><a href="#">Leagues</a></li>
    			<li><a href="#">Instruction</a></li>
    			<li><a href="#">Camps and Clinics</a></li>
    			<li><a href="#">Rules</a></li>
    		  </ul>
    		</li>
    		<li><a href="#" class="daddy">Lacrosse</a>
    		  <ul>
    			<li><a href="#">Leagues</a></li>
    			<li><a href="#">Tournaments</a></li>
    			<li><a href="#">Classes</a></li>
    			<li><a href="#">Instruction</a></li>
    			<li><a href="#">Tournaments</a></li>
    			<li><a href="#">Field Rentals</a></li>
    			<li><a href="#">Camps and Clinics</a></li>
    			<li><a href="#">Rules</a></li>
    			<li><a href="#">Lacrosse Resources</a></li>
    		  </ul>
    		</li>
    		<li><a href="#" class="daddy">Soccer</a>
    		  <ul>
    			<li><a href="#">Leagues</a></li>
    			<li><a href="#">Tournaments</a></li>
    			<li><a href="#">Classes</a></li>
    			<li><a href="#">Lil' Kickers</a></li>
    			<li><a href="#">Instruction</a></li>
    			<li><a href="#">Field Rentals</a></li>
    			<li><a href="#">Camps and Clinics</a></li>
    			<li><a href="#">Rules</a></li>
    			<li><a href="#">Soccer Resources</a></li>
    		  </ul>
    		</li>
    	  </ul>
    	<li><a href="#">Events</a>
    	  <ul>
    		<li><a href="#">Parties</a></li>
    		<li><a href="#">Conventions</a></li>
    		<li><a href="#">Trade&ndash;Shows</a></li>
    		<li><a href="#">Team Building</a></li>
    		<li><a href="#">Conferences</a></li>
    		<li><a href="#">School Events</a></li>
    	  </ul>
    	</li>
    	<li><a href="#">Facilities</a></li>
    	<li><a href="#">Staff</a></li>
    	<li><a href="#">Contact</a></li>
    	</li>
    	</li>
      </ul>
      <div id="maincontent">
    	<h1>Home</h1>
    	<p>Proin semper ornare augue. Nullam sem diam, vulputate nec, luctus sed, adipiscing in, nunc. Pellentesque egestas, elit egestas euismod dictum, neque erat auctor lectus, eget dignissim erat neque eu massa. Cras diam. Integer ullamcorper, dolor nec luctus sagittis, magna dolor ultrices nibh, <a href="#">quis
    		gravida justo est nec dolor</a>. Ut et nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer orci. Morbi nibh. Vestibulum id mauris. Etiam mollis, libero in cursus auctor, ligula magna vestibulum nisi, vel nonummy justo justo nec nunc. Phasellus
    		erat neque, pretium non, semper a, ornare aliquet, sem.</p>
    	<p>Proin semper ornare augue. Nullam sem diam, vulputate nec, luctus sed, adipiscing in, nunc. Pellentesque egestas, elit egestas euismod dictum, neque erat auctor lectus, eget dignissim erat neque eu <a href="#">massa</a>. Cras diam. Integer ullamcorper, dolor nec luctus sagittis, magna dolor ultrices
    	  nibh, quis gravida justo est nec dolor. Ut et nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer orci. Morbi nibh. Vestibulum id mauris. Etiam mollis, libero in cursus auctor, ligula magna vestibulum nisi, vel nonummy justo justo nec nunc.
    	  Phasellus erat neque, pretium non, semper a, ornare aliquet, sem.</p>
    	<p>Proin semper ornare augue. Nullam sem diam, vulputate nec, luctus sed, adipiscing in, nunc. Pellentesque egestas, elit egestas euismod dictum, neque erat auctor lectus, eget dignissim erat neque eu <a href="#">massa</a>. Cras diam. Integer ullamcorper, dolor nec luctus sagittis, magna dolor ultrices
    	  nibh, quis gravida justo est nec dolor. Ut et nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer orci. Morbi nibh. Vestibulum id mauris. Etiam mollis, libero in cursus auctor, ligula magna vestibulum nisi, vel nonummy justo justo nec nunc.
    	  Phasellus erat neque, pretium non, semper a, ornare aliquet, sem.</p>
      </div>
      <div id="sidebar">
    	<h1>mySAM</h1>
    	<form id="form1" name="form1" method="post" action="">
    	  <label><br />
    	  <br />
    	  Username:
    	  <input type="text" name="textfield2" />
    	  <br />
    	  Password:
    	  <input type="text" name="textfield" />
    	  </label>
    	  <label><br />
    	  <br />
    	  <input type="submit" name="Login" value="Login" />
    	  </label>
    	</form>
    	<h1>News</h1>
    	<p><strong>November 30th</strong> - Vestibulum id mauris. Etiam mollis, libero in cursus auctor, ligula magna vestibulum nisi, vel nonummy justo justo nec nunc. Phasellus erat neque, pretium non, semper a, ornare aliquet, sem.</p>
    	<p><strong>December 2nd</strong> - Vestibulum id mauris. Etiam mollis, libero in cursus auctor, ligula magna vestibulum nisi, vel nonummy justo justo nec nunc. Phasellus erat neque, pretium non, semper a, ornare aliquet, sem.</p>
      </div>
      <div class="clear"></div>
    </div>
    </body>
    </html>
    Hope that helps.

  7. #7
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks boss that did the trick! now I hate to get greedy but, one lasssst thing. There is a 1 pixel seperation going on in Firefox between the navigation and the content...uhhhhhhhhhhhhhhhhhhhhh? clueless.

  8. #8
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tonymas13
    thanks boss that did the trick! now I hate to get greedy but, one lasssst thing. There is a 1 pixel seperation going on in Firefox between the navigation and the content...uhhhhhhhhhhhhhhhhhhhhh? clueless.
    Looks fine to me. Did you fix it?

  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)
    Looks fine to me as well

  10. #10
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes I fixed it, thanks a lot guys.


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
  •