SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where did I mess up? DIV won't show all of the content

    I have a page where I want a specific DIV (its either #body or #content) to act as a table does and expand to accommodate all of the text/images within the DIV. It currently looks like the DIV, which has a background image of lines on the right and left, stops short and is not holding or containing all of the code within the DIV.


    Here is a link to what I am talking about:
    http://www.allergyasc.com/062308/und...nd-asthma.html


    And here is the CSS:
    Code:
    @charset "ISO-8859-1";
    
    html {
    	height: 100%; 
    	margin-bottom: 1px; 
    }
    body {
    	margin: 0px;
    	padding: 0px;
    }
    h1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #339900;
    	margin: 0px;
    	line-height: normal;
    	height: 12px;
    	padding: 0px;
    }
    #wrapper {
    	width: 760px;
    	margin-left: -380px;
    	padding-left: 50%;
    	margin-top: 5px;
    }
    #masthead {
    	width: 760px;
    	height: 120px;
    }
    #logo {
    	width: 569px;
    	float: left;
    }
    #subnav {
    	margin-left: 569px;
    	margin-right: 0px;
    }
    #nav {
    	height: 45px;
    	width: 760px;
    }
    #body {
    	width: 760px;
    	height: 516px;
    	background-image: url(../i/gfx_content_mid.jpg);
    	background-repeat: repeat;
    }
    #content a, #content a:visited {
    	color: #6699CC;
    	font-weight: bold;
    }
    #column1 {
    	width: 366px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	background-image: url(../i/gfx_home_video.jpg);
    	background-repeat: no-repeat;
    	height: 333px;
    }
    #column2 {
    	float: left;
    	width: 202px;
    	background-image: url(../i/gfx_home_locations.jpg);
    	background-repeat: no-repeat;
    	height: 313px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #6699CC;
    	font-size: 11px;
    	line-height: 16px;
    	padding-top: 20px;
    }
    #column2 p {
    	padding-top: 20px;
    	padding-left: 39px;
    	margin: 0;
    }
    #column2 a, #column2 a:visited {
    	text-decoration: none;
    	color: #6699CC;
    	font-weight: bold;
    }
    #column2 a:hover {
    	text-decoration: underline;
    	color: #6699CC;
    	font-weight: bold;
    }
    #video {
    	padding-left: 21px;
    	margin: 0;
    }
    #column3 {
    	width: 192px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	background-image: url(../i/gfx_home_sidebar.jpg);
    	background-repeat: no-repeat;
    	height: 333px;
    }
    #column3a {
    	width: 192px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	height: 138px;
    }
    #column3a p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333333;
    	line-height: normal;
    	padding: 40px 25px 0 43px;
    	margin: 0;
    }
    #column3b {
    	width: 192px;
    	float: left;
    	margin: 0px;
    	padding: 0px;
    	height: 186px;
    }
    #column3b p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333333;
    	line-height: normal;
    	padding: 49px 25px 0 43px;
    	margin: 0;
    }
    #content {
    	height: 149px;
    	width: 760px;
    	background-image: url(../i/gfx_content_mid.jpg);
    	clear: both;
    }
    #content #header {
    	margin: 20px 0 10px 50px;
    }
    #content #header img {
    	padding-top: 15px;
    }
    #contentLeft {
    	margin-left: 50px;
    	margin-top: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #666666;
    	font-size: 12px;
    	width: 327px;
    	vertical-align: top;
    	float: left;
    }
    #contentRight {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #666666;
    	font-size: 12px;
    	width: 295px;
    	vertical-align: top;
    	float: left;
    	margin-bottom: 0px;
    	margin-left: 25px;
    }
    #footer {
    	width: 680px;
    	margin-left: 33px;
    	margin-top: 0px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #B9D548;
    	float: left;
    	margin-bottom: 30px;
    }
    hr {
    	height: 1px;
    	width: 680px;
    	color: #999999;
    	text-align: center;
    }
    .copyright {
    	color: #999999;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	text-align: right;
    	width: 679px;
    	margin: 0px;
    	padding: 0px;
    }
    .copyright a, .copyright a:visited {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #789DC9;
    	text-decoration: underline;
    	padding-right: 4px;
    	padding-left: 4px;
    }
    .footer, .footer p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #789DC9;
    	text-decoration: none;
    	text-align: center;
    }
    .footer a, .footer a:visited {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #789DC9;
    	text-decoration: underline;
    }
    #avoidance {
    	clear: both;
    	float: left;
    	margin-left: 50px;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #666666;
    	font-size: 12px;
    	width: 620px;
    }
    #column3 a, #column3 a:visited {
    	text-decoration: none;
    	color: #333333;
    }
    #content p {
    	margin: 0px;
    	padding: 0px;
    }
    #column3 a:hover {
    	text-decoration: none;
    	color: #789DC9;
    }
    Todd Temple > T2 Design

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For a non floated container to expand and enclose floats inside, it's edges needs to go clear from them. In IE it is automaticly cleared by haslayout, in good browsers by e.g. overflow:

    #body {
    width: 760px;
    /*height: 516px;*/ /* or min-height */
    background-image: url(../i/gfx_content_mid.jpg);
    background-repeat: repeat;
    }
    #content {
    /*height: 149px;*/ /* or min-height */
    width: 760px;
    background-image: url(../i/gfx_content_mid.jpg);
    clear: both;
    overflow: hidden;
    }
    More about clearing floats.
    Block formatting contexts
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again, you have helped me out. I have already gave a quick read of both articles that you linked to and I, for whatever reason, did not retain that information nor did I think that overflow hidden would have been the solution.

    I am now wondering why the #footer DIV is not showing a margin on the bottom. Can you take a peek?


    LINK-
    http://www.allergyasc.com/062308/treatment.html



    Also... just curious, do you have a full-time job doing CSS? Do you ever consider freelance work?

    Todd Temple
    Todd Temple > T2 Design

  4. #4
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    Once again, you have helped me out. I have already gave a quick read of both articles that you linked to and I, for whatever reason, did not retain that information nor did I think that overflow hidden would have been the solution.

    I am now wondering why the #footer DIV is not showing a margin on the bottom. Can you take a peek?


    LINK-
    http://www.allergyasc.com/062308/treatment.html



    Also... just curious, do you have a full-time job doing CSS? Do you ever consider freelance work?

    Todd Temple
    Todd,

    You must specify 'px' or some other option such as 'em' in order for margin to be functional in shorthand, or any other format.


    Change:
    HTML Code:
    #footer {
        width: 680px;
        margin: 0 0 30px 33px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #B9D548;
        float: left;
    }
    To:
    HTML Code:
    #footer {
        width: 680px;
        margin: 0px 0px 30px 33px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #B9D548;
        float: left;
    }
    Kind regards,
    Alex Stanford
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, you can test the same solution.
    Code:
    #wrapper {
    	width: 760px;
    	margin: 5px auto 0; /* auto-center */
    	overflow: hidden;
    }
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Alex View Post

    Change:
    HTML Code:
    #footer {
        width: 680px;
        margin: 0 0 30px 33px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #B9D548;
        float: left;
    }
    To:
    HTML Code:
    #footer {
        width: 680px;
        margin: 0px 0px 30px 33px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #B9D548;
        float: left;
    }
    I have made this change and the page linked below is still showing the #footer div resting on the bottom of the viewport.


    PAGE WITH FOOTER DIV THAT DOESNT LOOK CORRECT-
    http://www.allergyasc.com/062308/treatment.html


    PAGE WITH FOOTER DIV THAT DOES LOOK CORRECT-
    http://www.allergyasc.com/062308/app...d-services.php
    Todd Temple > T2 Design


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
  •