treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Wrapper will not extend - floats, clears - my head hurts!

  • jchap59
    Permalink to comment #
    Hi,

    Now be gentle with me as I'm new to this.

    Building a web site and cannot get the 'wrapper' element to extend to accomodate expansion of floated elements within it - hope that makes sense - have read it may be to do with inserting a 'clear statement' after the floated elements and before the wrapper closes but, can't get it to work - hense the headache! CSS and HTLM below

    CSS
    /* CSS Document */
    /* Myer reset v1.0 | 20080212 */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }

    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }

    /* remember to highlight inserts somehow! */
    ins {
    	text-decoration: none;
    }
    del {
    	text-decoration: line-through;
    }

    /* tables still need 'cellspacing=\"0\"' in the markup */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    	
    /* reset end

    /* Headings & fonts */

    h1 {
    	font-family: Verdana;
    	font-size: 16px;
    	color: #FFFFFF;
    	text-align: center;
    	font-weight: normal;
    }

    h2 {
    	font-family: Verdana;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-align: justify;
    	font-weight: normal;
    	text-indent: 290px;
    }


    /* Main Body Charateristics  */

    #wrapper {
    	background-color: #000000;
    	width: 900px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #000000;
    	margin-top: 100px;
    	margin-bottom: 10px;
    	height: 500px;
    	font-family: Verdana;
    	font-size: 9px;

    }



    #topleftbox {
    	height: 150px;
    	width: 200px;
    	background-color: #7E7E7E;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #000000;
    	border-left-width: 1.5px;
    	border-left-style: solid;
    	border-left-color: #000000;
    	background-image: url(images/2q.gif);
    	background-position: center;
    }

    #header {
    	height: 150px;
    	width: 700px;
    	background-color: #000000;
    	left: 200px;
    	top: -150px;
    	position: relative;
    }

    #leftsidebox {
    	height: 350px;
    	width: 200px;
    	position: relative;
    	top: -150px;
    	background-color: #333333;
    	float: left;
    }

    #content1 {
    	height: 350px;
    	width: 685px;
    	position: relative;
    	border: thin none #00FF00;
    	float: left;
    	background-color: #000000;
    	top: -150px;
    }
    #imagebox1 {
    	height: 250px;
    	width: 200px;
    	position: absolute;
    	background-image: url(images/jel2_web.jpg);
    	border: thick solid #000000;
    	float: left;
    	left: 260px;
    }

    #footer {
    	font-family: Verdana;
    	font-size: 10px;
    	color: #FFFFFF;
    	height: 15px;
    	width: 680px;
    	position: relative;
    	background-position: center;
    	float: right;
    	border: thin none #FF0000;
    	top: 335px;

    }

    /* Navigation section */

    #left {
    	float:left;
    	width:201px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    #left ul { margin: 0; padding:0; }
    #left ul li {
    	list-style:none;
    	margin:0;
    	padding:0;
    	border-top-width: 0px;
    	border-right-width: 1px;
    	border-bottom-width: 1px;
    	border-left-width: 0px;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    }
    #left ul li a {
    	display:block;
    	width:152px;
    	margin:0;
    	padding:5px;
    	font-size:11px;
    	color: #FFFFFF;
    	font-family: Verdana;
    }
    #left ul li a:hover {
    	padding:5px 3px 5px 7px;
    }
    #left ul li ul { margin: 0; padding:0; }
    #left ul li ul li { list-style:none; margin:0; padding:0; border-left:none; border-right:none; }
    #left ul li.on {
    	padding:4px 0 4px 10px;
    	background-repeat: no-repeat;
    	background-position: 1px 1px;
    }
    #left ul li ul li a { padding:4px 5px; background:#EFEFEF;  }
    #left ul li ul li a:hover { padding:4px 0 4px 10px; } 

    /* Navigation section ends */



    HTML

    <!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\" />
    <link rel=\"stylesheet\" href=\"2Qstyle_test.css\" type=\"text/css\" media=\"all\" />
    <title>2Quirky Home Page</title>
    <style type=\"text/css\">
    <!--
    body {
    	background-color: #CCCCCC;
    	background-image: url(images/blackgrad1.gif);
    	background-repeat: repeat-x;
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    }
    a:active {
    	text-decoration: none;
    }
    .style1 {color: #000000}
    -->
    </style>

    </head>

    <body>
    <div id=\"wrapper\">
    		<div id=\"topleftbox\"></div>
        		<div id=\"header\">
              		<h1>&nbsp;</h1>
        	  		<p>&nbsp;</p>
        	  		<p>&nbsp;</p>
        	  		<h1 >2 Q u i r k y </h1>
      	  		</div>
        	<div id=\"leftsidebox\">
    			<div id=\"left\">
    				<ul>
              		<li><a href=\"\">what we do</a></li>
              		<li><a href=\"\">prices</a></li>                  
             		 <li><a href=\"\">gallery</a></li>
             		 <li><a href=\"\">guests</a></li>
    		  	<li><a href=\"\">video safe</a></li>
             		 <li><a href=\"\">contact us</a></li>
    		  		</ul>
              </div>	
      	  </div>
    	  	
      	<div id=\"content1\">
    			<div id=\"imagebox1\"></div>
    				<div id=\"footer\"> <h2> Copyright 2Quirky 2009</h2></div>
    	</div>
      
    </div>


    </body>
    </html>


    Any help, ideas, solutions gratefully accepted

    John C
  • ikthius
    Permalink to comment #
    I have not studied or played with your code.....

    but have this in your css
    .clear { clear:both;}

    and the rule for the wrapper is:

    <div slass=\"wrapper\">
        <div class=\"insideLeft\">
        ...
        </div>
        <div class=\"insideRight\">
        ...
        </div>
        <div class=\"clear\"><!-- I like to put empty space here just for IE --></div>
    </div>
  • eip56
    Permalink to comment #
    Do you have this somewhere we can physically look at it?
  • ikthius
    Permalink to comment #
    "eip56" said:
    Do you have this somewhere we can physically look at it?


    yes: http://www.woskf.co.uk/

    also, just for you: http://www.honeycomb-web.co.uk/test.html
  • jchap59
    Permalink to comment #
    All,

    Thanks for all of the help / ideas - think I have solved it - more luck than anything else! - rebuilt the main section and included a footer and by using the 'clear' option under the 'box entry - appears to force the 'wrapper' element to expand- hey-ho - off for a beer..
Add a Comment