SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div's not hooking into the container..

    I am wondering how I am able to ensure that my divs hook into the master "container" div. Below are the renderings I recieve currently:

    I want to achieve what Internet Explorer is putting out across all browsers, but I am not sure why it is not doing that.




    Here is my XHTML Code with the div structure:
    (Content taken out to save space)
    Code HTML4Strict:
    <!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=utf-8" />
    <title>Identity Software Systems - $html_title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
     
    <body>
    <div id="container">
        <div id="top1">
        </div><!-- Ending of #top1 -->
        <div id="top2">
        </div><!-- Ending of #top2 -->
     
      <div id="topmenu">
        <div id="topmenucap-left"></div>
            <div id="topmenucap-right"></div>
     
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Free Quote</a></li>
            <li><a href="#">Companies</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    	</div><!-- Ending of #topmenu -->
     
    	<div id="content-area">
        <div id="news-module">
     
        <h2>Latest News</h2>
        <h3>- August 23 -</h3>
        <div class="news-text">content</div><!-- Ending of .news-text -->
     
        <h4>- July 17 -</h4>
        <div class="news-text">content</div><!-- Ending of .news-text -->
     
        <h4>- July 04 -</h4>
        <div class="news-text">content</div><!-- Ending of .news-text -->
     
        </div><!-- Ending of #news-module -->
     
        <div id="welcome-block">
        <h2>Welcome</h2>
        <div class="regular-text">content</div><!-- Ending of .regular-text -->
     
        </div><!-- Ending of #welcome-block -->
     
        <div id="quote-module">
        <h2>Get your free quote within 24 hours</h2>
        <div class="regular-text">content</div><!-- Ending of .regular-text -->
        </div><!-- Ending of #quote-module -->
     
        </div><!-- Ending of #content-area -->
     
        <div id="copyright">
        Copyright 2007 site. All Rights Reserved.
        </div><!-- Ending of #copyright -->
    </div><!-- Ending of #container -->

    And here is the CSS:
    (For easier reading, each CSS attribute is ordered in which it is placed in the XHTML file)
    Code CSS:
    body {
    	margin:0;
    	padding:0;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	text-align:center;
    }
     
    #container {
    	text-align:left;
    	width:775px;
    	margin:0 auto;
    }
     
    h2 {
    	background:url(../images/headingbullet.gif) center left no-repeat;
    	padding-left:10px;
    	font-weight:bold;
    	font-size:12px;
    	text-transform:uppercase;
    	padding:0 12px 0 12px;
    	margin:0;
    	color:#393d3c;
    }
     
    h3 {
    	font-weight:bold;
    	font-size:10px;
    	font-style:italic;
    	color:#2b3d17;
    	padding:0 0 3px 0;
    	margin:0;
    }
     
    h4 {
    	font-weight:bold;
    	font-size:10px;
    	font-style:italic;
    	color:#c4ceb6;
    	padding:0 12px 0 0;
    	margin:10px 0 0 0;
    }
     
    /* Adjust top1 and top2 height between them both with their respective heights once images have been sliced (waiting for logo) */
    #top1 {
    height:309px;
    width:auto;
    background:#CCCCCC;
    }
     
    #top2 {
     
    }
    /* ### ENDING OF CORE ### */
     
    /* ### BEGINNING OF MENU DIV AND RESPECTIVE SETTINGS ### */
    #topmenucap-left {
    	background:url(../images/navcap_left.gif) no-repeat;
    	height:28px;
    	width:13px;
    	float:left;
    }
     
    #topmenu {
    	background:url(../images/navbg.gif) repeat-x;
    	height:28px;
    	width:auto;
    }
     
    #topmenu ul {
    	float:right;
    	margin:7px 0px -2px 7px;
    	padding:0;
    	font-weight:bold;
    	font-size:12px;
    	display:block;
    }
    #topmenu li{
    	list-style:none;
    	display:inline;
    	background:url(../images/listdivider.gif);
    	padding:0px 12px 0px 9px;
    	_padding:0px 7px 0px 9px;
    }
     
    #topmenu a {
    	color:#FFFFFF;
    	text-decoration:none;
    }
     
    #topmenu a:hover {
    	color:#FFFFFF;
    	text-decoration:underline;
    }
     
    #topmenucap-right {
    	background:url(../images/navcap_right.gif) no-repeat;
    	height:28px;
    	width:13px;
    	float:right;
    }
    /* ### ENDING OF MENU DIV ### */
     
    /* ### BEGINNING OF CONTENT DIV AND RESPECTIVE SETTINGS ### */
    #content-area {
    width:auto;
    padding:20px;
    height:100%;
    background:#656b61 url(../images/contentareabg.png) top repeat-x;
    }
     
    #news-module {
    width:276px;
    height:auto;
    background:#FF0000;
    border-right:#949a90 2px solid;
    float:left;
    padding:5px;
    }
     
    #welcome-block {
    height:auto;
    width:430px;
    background:#0066FF;
    float:right;
    padding:5px;
    }
     
    #quote-module {
    height:auto;
    width:430px;
    background:#FF0000;
    float:right;
    padding:5px;
    }
     
    .news-text {
    }
     
    .regular-text {
    margin:5px 0 0 0;
    }
     
    #copyright {
    background:url(../images/copyrightbg.gif) repeat-x;
    height:27px;
    width:auto;
    color:#FFFFFF;
    text-align:center;
    line-height:27px;
    }

    Anyone have any idea as to how to fix this?

    Thanks so much!

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure which one you want to have extending so here's two suggestions and hopefully one of them will solve your problem

    1 - Add float: left; to your content-area style.

    Code:
    #content-area {
    float: left;
    width:auto;
    padding:20px;
    height:100&#37;;
    background:#656b61 url(../images/contentareabg.png) top repeat-x;
    }
    2 - Alternatively, if you want your #container to extend for all it's contents, you'll need to float that one, however that'll mess up your centering so apply the centering styles to the body and then you can float the #container within this

    Code:
    body {
        margin:0;
        padding:0;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        text-align:center;
        width: 775px;
        margin: 0px auto;
    }
    #container {
        float: left;
        width:775px;
    }
    Also, don't use px for your fonts as some browsers won't be able to resize the text. Use % or em's for this.

    Hope that helps solve you're problem?

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there, thanks for the information. All the work files are at work, but I just wanted to say thanks beforehand I'll post tomorrow to let known if it worked or not.

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there, works well. Thanks!

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good stuff, I presume it was the second option that you used?

    I tend to set up most of my pages (that aren't liquid) by centering them using the body tag as you don't have to worry about mixing inline and block level elements inside that when setting up your containers.

    As a general rule most of my containers are floated to get the framework in place and then the actual content will sit inside these sections.

    Glad you've sorted your problem

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aye the second option is what I used , I'll always do the centering in the body settings; bah! it makes so much more common sense I am suprised that never hit me before.


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
  •