SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My wrapper is not expanding help

    Here are the css i am using for my sie since this my first attempt to design in css I am really confused on why my wrapper is not expanding. Could you help me on this? This is my layout.

    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <div id="logo"><img src="../Images/az_sikh_logo.gif" alt="Arizona Sikh Logo" width="165" height="34" /></div>
    <div id="navigation">
    <ul>
    <li>Contact</li>
    <li>Downloads</li>
    <li>Keertan</li>
    <li>Gurbani</li>
    <li>Sikhism</li>
    <li>Home</li>
    </ul>
    </div>
    </div>
    <div id="headingwrapper">
    <div id="rightheading">Welcome to Arizona Sikhs Website</div>
    <div id="leftheading">Hukam Nama </div>
    </div>
    <div id ="imagewrapper">
    <div id="rightimage"></div>
    <div id="leftimage">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    <div id="titlewrapper">
    <div id="lefttitle">Home</div>
    <div id="righttitle">Quick Links</div>
    </div>
    <div id="contentwrapper">
    <div id="rightcontent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut in tortor sit amet nisl dignissim consectetuer. Donec ac ipsum. Aliquam risus sapien, elementum nec, molestie ac, pharetra sed, libero. Aliquam nulla sem, lobortis id, aliquam id, placerat quis, velit. Sed gravida varius urna. Fusce diam. Sed neque. Duis bibendum justo vitae augue. Vivamus porta tellus iaculis tellus. Vestibulum laoreet ornare purus.<br />
    Fusce auctor, arcu in interdum semper, tortor mi posuere sapien, sit amet laoreet quam ipsum quis nisl. Suspendisse potenti. Nam nunc diam, laoreet in, laoreet at, fermentum cursus, sem. Integer id tortor at nisl vulputate volutpat. Phasellus ultrices leo sit amet lorem. Donec commodo odio vitae dolor. Sed vel nulla. Maecenas nisl quam, sagittis quis, egestas sit amet, tristique eu, enim. Nullam ligula sapien, nonummy et, ultricies quis, laoreet ac, arcu. Maecenas lacinia sollicitudin orci. Nullam semper sodales augue. In ac dui. Integer sed lacus. Sed quis diam.</div>
    <div id="leftcontent">left content goes here</div>
    </div>
    <div id="footer">Privacy Policy</div>
    </div>
    </body>
    </html>
    @charset "UTF-8";
    body {
    font-family: "Georgia";
    background-color: #FFFFFF;
    background-image: url(../Images/khanda_pattren2.gif);
    background-repeat: repeat;
    }
    #wrapper {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }
    #header {
    width: 800px;
    float: left;
    margin-top: 35px;
    margin-bottom: 35px;
    background-color: #FFFFFF;
    }
    #logo {
    width: 170px;
    padding-left: 0px;
    float: left;
    }
    #navigation {
    float: right;
    width: 590px;
    padding-right: 0px;
    text-align: left;
    color: #666666;
    }
    #titlewrapper {
    clear: both;
    float: left;
    margin-top: 10px;
    width: 760px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #FFFFFF;
    }
    #lefttitle {
    font-size: 18px;
    color: #990000;
    width: 300px;
    float: left;
    }
    #righttitle {
    font-size: 18px;
    color: #990000;
    float: right;
    width: 268px;
    }
    #navigation ul {
    list-style-type: none;
    margin-top: 0px;
    }
    #navigation li {
    display: inline;
    float: right;
    padding-top: 10px;
    padding-left: 15px;
    }
    #headingwrapper {
    clear: both;
    float: left;
    width: 800px;
    margin-top: 0px;
    font-family: Georgia;
    color: #990000;
    font-size: 15px;
    font-style: normal;
    line-height: normal;
    font-weight: lighter;
    font-variant: normal;
    background-color: #FFFFFF;
    }
    #rightheading {
    float: left;
    width: 467px;
    border: 1px solid #CCCCCC;
    padding-left: 20px;
    padding-top: 8px;
    font-family: Georgia;
    padding-bottom: 8px;
    }
    #leftheading {
    width: 286px;
    float: right;
    border: 1px solid #CCCCCC;
    padding-left: 20px;
    padding-top: 8px;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding-bottom: 8px;
    }
    #imagewrapper {
    clear: both;
    float: left;
    width: 800px;
    margin-top: 5px;
    padding-top: 10px;
    }
    #leftimage {
    width: 286px;
    float: right;
    border: 1px solid #CCCCCC;
    padding-left: 20px;
    background-color: #990000;
    color: #FFFFFF;
    height: 150px;
    }
    #rightimage {
    float: left;
    width: 487px;
    border: 1px solid #CCCCCC;
    height: 150px;
    background-color: #E3E3E3;
    background-image: url(../Images/Guru_Nanak_Dev_Ji.jpg);
    background-repeat: no-repeat;
    }
    #contentwrapper {
    clear: both;
    float: left;
    width: 800px;
    margin-top: 10px;
    background-color: #FFFFFF;
    }
    #rightcontent {
    width: 446px;
    border: 1px solid #CCCCCC;
    float: left;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    }
    #leftcontent {
    width: 266px;
    float: right;
    padding-left: 20px;
    height: 200px;
    border: 1px solid #CCCCCC;
    padding-top: 20px;
    padding-right: 20px;
    color: #666666;
    font-size: 14px;
    line-height: 25px;
    }
    #footer {
    clear: both;
    float: left;
    width: 800px;
    margin-top: 10px;
    font-size: 14px;
    color: #990000;
    background-color: #FFFFFF;
    }

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it works in IE, then that's because hasLayout was triggered via the width declaration. Try setting overflow to hidden on #wrapper. This will make modern browsers (excluding IE6 and pre) contain floated elements

    #wrapper { overflow:hidden; }

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I tried

    I have tried it in opera, safari it does not work
    any more ideas

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the float:left from the footer css

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank You it worked

    I should find out why it behaved like it did with footer being floated left?

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Suggest you have a look at Paul's sticky thread, CSS FAQ, at the top of this forum, and read the section on floats - when the footer is floated, everything within the wrapper is then floated and the wrapper height will collapse due to the floats being out of the document flow. When the footer is not floated, due to the clear statement which places it below all other content, it becomes the "clearing element" to drag the wrapper down.


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
  •