Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    432
    Thanks
    6
    Thanked 3 Times in 3 Posts

    strange gap showing and can not find out why..

    I have a strange thing happening with this page... The black bordered area is not the correct size, it should only be as large as the text within in, like the <div> below it. If I remove the two left floats at the top then the page is ok, it seems to be the floats that is causing the problem. But I can not see why. Showing just the main content only in a page shows the page fine. But when I added it to this page it seems to grow to the same height as the leftside menu.

    I have gone through the code but can not figure out what is wrong.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen,projection" />
    </head>
    <body>
    <div id="container">
    <a id="top"></a><p class="hide">Skip to: <a href="#menu">site menu</a> | <a href="#sectionmenu">section menu</a> | <a href="#main">main content</a></p>
    <div id="sitename">
    <h1>andreas06: falling leaves</h1>
    <span>It is all about colors...</span>
    <a id="menu"></a>
    </div>
    <div id="nav">
    <ul>
    <li><a href="index.php">Home page</a></li>
    
    
    
    
    
    
    </ul>
    <p class="hide"><a href="#top">Back to top</a></p>
    </div>
    <div id="wrap1">
    <div id="wrap2">
    <div id="topbox">
    <strong><span class="hide">Currently viewing: </span><a href="index.html">andreas06: Falling leaves</a> &raquo; <a href="alternative.html">Alternative layout</a></strong>
    </div>
    <div id="leftside">
    <a id="sectionmenu"></a>
    <p class="soft"></p>
    <h1></h1>
    <p class="menublock">
    
    
    
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    
    
    </p>
    <div></div>
    </div>
    <div id="contentalt">
    <a id="main"></a>
     
    <div class="contentpaneopen000"><div class="contentheading000">MEMBERSHIP 2012/13</div></div>
    <br />
    <br />
    <div style="width: 100%;		border: 0.001em solid #000;">
     
    	<div style="float: left; width: 45%;">
    	<div style="padding-left: 20px; font-weight: bold;">Officers are:-</div>
    		<ul>
    		<li> Chair - .. ..</li>
            <li> Vice-Chairs - .. ..</li>
            <li> Secretary - .. ..</li>
            <li> Treasurer - .. ..</li>
    		</ul>
    	</div>
    
        <div style="float: left; width: 50%;">
        <div style="padding-left: 20px; font-weight: bold;">Executive Committee members are:-</div>
    		<ul>
    		<li>.. .. (Chair)</li>
    		<li>.. .. (Vice-Chair)</li>
    		<li>.. ..</li>
    		<li>.. ..</li>
    		<li>.. ..</li>
    		<li>.. ..</li>
    		</ul>
    	</div>
    	<div style="clear: both;">&nbsp;</div>
    	<br><br>
    
    </div>
    <div style="clear: both;"></div>
    <br><br>
    
    
    <div style="width: 100%; padding-left: 20px;">
     
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..<br>
          .. ..<br>
    	  .. ..<br>
    	  .. ..<br>
    	  .. ..
    	</div>
    	  <div style="clear: both;"></div>
    	  <br><br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..<br />
          .. ..</div>
    	  <div style="clear: both;"></div>
    	  <br><br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..</div>
    		<div style="clear: both;"></div>
    		<br><br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..</div>
    	<div style="clear: both;"></div>
    	<br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..</div>
    	<div style="clear: both;"></div>
    	<br>
    
        <div style="float: left; width: 100px;">Ex Officio</div>
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left;">.. ..</div>
    	<div style="clear: both;"></div>
    
        <div style="float: left; width: 250px; padding-left: 100px;">.. ..</div>
        <div style="float: left;">.. ..</div>
    	<div style="clear: both;"></div>
    	<br><br>
    
        <div style="padding-left: 250px;">.. ..</div>
    
        <div style="padding-left: 250px;">.. ..</div>
    
    </div><p class="hide"><a href="#top">Back to top</a></p>
    </div>
    </div>
    <div id="footer">&copy; 2005 Your Name | Design by <a href="http://andreasviklund.com">Andreas Viklund</a></div>
    </div>
    </div>
    </body>
    </html>
    css
    Code:
    /* andreas06 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.
    Version: 1.1, November 28, 2005 */
    body{background:#e0e0e0 url(img/bodybg.gif) repeat-x;color:#505050;font:76% Georgia,Verdana,Tahoma,Arial,sans-serif;margin:0;padding:0;text-align:center;}
    p{line-height:1.5em;margin:0 0 15px;}
    a{color:#fa9035;font-weight:700;text-decoration:none;}
    a:hover{color:#d04a10;}
    hr{height:1px;margin:10px 0;width:98%;}
    dt{font-weight:700;}
    dd{margin:1px 0 12px 15px;}
    #container{background:#c0c0c0 url(img/bodybg.gif) repeat-x;margin:0 auto;text-align:left;width:752px;}
    #sitename{background:url(img/leaves.jpg) top center no-repeat;color:#ffffff;font-weight:400;height:80px;margin:0 20px 10px 0;text-align:center;}
    #sitename h1{font-size:2.2em;margin:0;padding-top:20px;}
    #sitename span{font-size:1.6em;letter-spacing:-1px;margin:0;}
    #nav{background:url(img/greypx.gif) bottom left repeat-x;float:left;width:752px;}
    #nav ul{list-style:none;margin:0;padding:0;}
    #nav a{background:url(img/tabs.gif) no-repeat 100% 0;color:#808080;display:block;font-size:1.2em;letter-spacing:-1px;padding:7px 20px 4px 11px;text-decoration:none;}
    #nav a:hover{color:#505050;}
    #nav li{background:url(img/tabs.gif) no-repeat 0 0;float:left;margin:0 4px 0 0;padding:0 0 0 9px;}
    #nav #current{background:url(img/tabs.gif) no-repeat 0 -41px;}
    #nav #current a{background:url(img/tabs.gif) no-repeat 100% -41px;color:#303030;padding:7px 20px 5px 11px;}
    #wrap1{background:#ffffff url(img/innerbg.gif) repeat-y;border-bottom:1px solid #808080;border-left:1px solid #808080;border-right:1px solid #808080;clear:both;padding:0;width:750px;}
    #wrap2{background:url(img/header.jpg) top left no-repeat;padding:10px;width:730px;}
    #header{height:30px;position:relative;width:730px;}
    #header h1{float:left;font-size:1.4em;margin:0;width:180px;}
    #topbox{color:#808080;margin:0 0 4px;text-align:right;}
    #topbox a{color:#d04a10;}
    #topbox a:hover{text-decoration:underline;}
    #leftside{float:left;margin:-15px 0 0;width:145px;}
    #leftside h1{font-size:1.4em;font-weight:400;}
    #rightside{float:right;margin:40px 15px 20px 0;width:130px;}
    #rightside h1{font-size:1.4em;font-weight:400;margin:0 0 12px;}
    #rightside p{font-size:0.9em;margin:2px 0 12px 10px;}
    /*#rightside img{border:1px solid #fa9035;margin:10px 0 5px 5px;padding:2px;}*/
    #content{margin:45px 160px 0 180px;}
    #contentalt{margin:45px 15px 0 180px;}
    #content p,#contentalt p{margin:8px 0 0 10px;}
    #content h1,#contentalt h1{color:#505050;font-size:2em;font-weight:400;margin:15px 0 10px;padding:0;}
    #content h2,#contentalt h2{color:#505050;font-size:1.5em;font-weight:400;margin:20px 0 10px;padding:0;}
    /*#content img,#contentalt img{border:1px solid #fa9035;float:left;margin:5px 15px 6px;}*/
    #footer{clear:both;color:#a0a0a0;font-size:0.9em;height:26px;margin-top:20px;padding:1px;text-align:right;width:730px;}
    #footer a{color:#a0a0a0;font-weight:400;}
    #footer a:hover{color:#a0a0a0;text-decoration:underline;}
    .menublock{margin-bottom:10px;}
    .nav{color:#d04a10;display:block;font-size:1.1em;font-weight:700;margin-bottom:1px;padding:2px 2px 2px 2px;position:relative;text-decoration:none;width:140px;}
    .nav:hover{border:1px solid #fa9035;color:#505050;padding:1px 1px 1px 1px;}
    .sub{font-size:0.9em;margin-left:15px;padding:1px 1px 1px 3px;width:125px;}
    .sub:hover{border:1px solid #fa9035;color:#505050;padding:0 0 0 2px;}
    .intro{font-weight:700;}
    .active{border:1px solid #fa9035;padding:1px 1px 1px 9px;}
    .box{background:#f8f8f8 url(img/boxbg.gif) top left repeat-y;border:1px solid #d0d4d4;color:#505050;margin:15px auto;padding:10px 10px 10px 20px;width:75%;}
    .photo{margin:5px auto 15px;padding:5px;}
    .smallcaps{font-variant:small-caps;}
    .mini{color:#a0a0a0;font-size:0.75em;font-weight:400;line-height:1.2em;margin:20px 0 10px 8px;}
    .small{font-size:0.85em;}
    .large{font-size:1.4em;}
    .soft{color:#808080;}
    .normal{font-weight:400;}
    .sharp{color:#101010;}
    .center{text-align:center;}
    .hide{display:none;}
    
    
    
    
    /*
    .contentpaneopen, .contentpane { margin: 0; padding: 0; }
    .contentpane td{ text-align: left; }
    .contentpane td.contentdescription { width: 100%; }
    .contentpane  { text-align: left; float: left; width: 100%; margin: 8px; }
    .contentpane ul li a .category { color: #FF8800; }
    .contentpane ul li { color: #333; }
    .contentpaneopen { margin: 2px 10px; width: 97%; }
    .contentpaneopen li { margin-bottom: 5px; }
    .contentpaneopen fieldset { border: 0; border-top: 1px solid #669933; }
    .contentpaneopen h3 { margin-top: 25px; }
    */

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,102
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I don't see a black bordered area. We give things IDs and CLASSes so we can call them as things removed from the rest of the code. Use their names please.

    If it's the floats that are causing problems use clear:both; to remove their influence.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello needsomehelp,
    I can't see what's making the space but there are better ways to clear your floats as both your clear and your page breaks take up space. You should never use an added element in your markup to make space, that should be done with margin or padding from the CSS.

    Look what using in ID in place of that inline code and the alternative method of clearing your floats does for you:

    markup -
    Code:
    <div id="contentalt">
    <a id="main"></a>
     
    <div class="contentpaneopen000"><div class="contentheading000">MEMBERSHIP 2012/13</div></div>
    <br />
    <br />
    	<div id="container"> 
    		<div style="float: left; width: 45%;">
    			<div style="padding-left: 20px; font-weight: bold;">Officers are:-</div>
    				<ul>
    				<li> Chair - .. ..</li>
    				<li> Vice-Chairs - .. ..</li>
    				<li> Secretary - .. ..</li>
    				<li> Treasurer - .. ..</li>
    				</ul>
    			</div>
    		<div style="float: left; width: 50%;">
    			<div style="padding-left: 20px; font-weight: bold;">Executive Committee members are:-</div>
    				<ul>
    				<li>.. .. (Chair)</li>
    				<li>.. .. (Vice-Chair)</li>
    				<li>.. ..</li>
    				<li>.. ..</li>
    				<li>.. ..</li>
    				<li>.. ..</li>
    				</ul>
    			</div>
    		</div>
    	</div>
    and some new CSS -
    Code:
    #container {
    	width: 100%; 
    	padding: 0 0 20px; 
    	overflow: auto;
    	border: 0.001em solid #000;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    432
    Thanks
    6
    Thanked 3 Times in 3 Posts
    yes the code does have the clear: both; but it seems to break the left side menu and cause the section to clear to the underneath of the menu and not underneath the actual text area in the right side area.

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    432
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Excavator: yes i would be altering the code to use classes or id's but to get things moving quicker i use inline to get the code working first. Then I move it over to unique names in my css file. I use to work with css and html before and got all in a mess.

    Still playing around with the page and can not seem to figure out what part of the code is causing the float to break at the wrong part of the page.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    432
    Thanks
    6
    Thanked 3 Times in 3 Posts
    ok playing around a little more i now have this.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen,projection" />
    </head>
    <body>
    <div id="container">
    <a id="top"></a><p class="hide">Skip to: <a href="#menu">site menu</a> | <a href="#sectionmenu">section menu</a> | <a href="#main">main content</a></p>
    <div id="sitename">
    <h1>andreas06: falling leaves</h1>
    <span>It is all about colors...</span>
    <a id="menu"></a>
    </div>
    <div id="nav">
    <ul>
    <li><a href="index.php">Home page</a></li>
    
    
    
    
    
    
    </ul>
    <p class="hide"><a href="#top">Back to top</a></p>
    </div>
    <div id="wrap1">
    <div id="wrap2">
    <div id="topbox">
    <strong><span class="hide">Currently viewing: </span><a href="index.html">andreas06: Falling leaves</a> &raquo; <a href="alternative.html">Alternative layout</a></strong>
    </div>
    <div id="leftside">
    <a id="sectionmenu"></a>
    <p class="soft"></p>
    <h1></h1>
    <p class="menublock">
    
    
    
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    <a class="nav" href="http://www.realistichostings.com/tester/"><strong>Home</strong></a>
    
    
    </p>
    <div></div>
    </div>
    <div id="contentalt">
    <a id="main"></a>
    <div><div>MEMBERSHIP 2012/13</div></div>
    
    
    
    <div style="padding-left: 10px;">
    
    
    	<div style="float: left; width: 45%;">
    	<div style="padding-left: 20px; font-weight: bold;">Officers are:-</div>
    		<ul>
    		<li> Chair - .. ..</li>
            <li> Vice-Chairs - .. ..</li>
            <li> Secretary - .. ..</li>
            <li> Treasurer - .. ..</li>
    		</ul>
    	</div>
    
        <div style="float: left; width: 50%;">
        <div style="padding-left: 20px; font-weight: bold;">Executive Committee members are:-</div>
    		<ul>
    		<li>.. .. (Chair)</li>
    		<li>.. .. (Vice-Chair)</li>
    		<li>.. .. ()</li>
    		<li>.. .. ()</li>
    		<li>.. .. ()</li>
    		<li>.. .. ()</li>
    		</ul>
    	</div>
    	  <br>
    
    
    </div>
    <br>-<br>-<br>
    
    <div style="padding-left: 20px;">
     
        <div style="float: left; width: 45%;">.. ..</div>
        <div style="float: left; width: 45%;">.. ..<br>
          .. ..<br>
    	  .. ..<br>
    	  .. ..<br>
    	  .. ..
    	</div>
    	  <br><br><br><br>
    
        <div style="float: left; width: 45%;">.. ..</div>
        <div style="float: left; width: 45%;">.. ..<br />
          .. ..</div>
    	  <br><br><br><br>
    
        <div style="float: left; width: 45%;">.. ..</div>
        <div style="float: left; width: 45%;">.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..</div>
    		<br><br><br><br>
    
        <div style="float: left; width: 45%;">.. ..</div>
        <div style="float: left; width: 45%;">.. ..</div>
    	<br><br><br>
    
        <div style="float: left; width: 45%;">.. ..</div>
        <div style="float: left; width: 45%;">.. ..</div>
    	<br><br><br><br>
    
        <div style="float: left; width: 100px;">Ex Officio</div>
        <div style="float: left; width: 45%;">.. ..</div>
        <div style="float: left;">.. ..</div>
    	<br><br><br><br>
    
        <div style="float: left; width: 45%; padding-left: 100px;">.. ..</div>
        <div style="float: left;">.. ..</div>
    	<br><br><br><br>
    
        <div style="padding-left: 45%;">.. ..</div>
    
        <div style="padding-left: 45%;">.. ..</div>
    
    </div><p class="hide"><a href="#top">Back to top</a></p>
    </div>
    </div>
    <div id="footer">&copy; 2005 Your Name | Design by <a href="http://andreasviklund.com">Andreas Viklund</a></div>
    </div>
    </div>
    </body>
    </html>
    But i can not seem to put a gap between each section.. the gap is shown in the code by the
    Code:
    <br><br><br><br>

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,102
    Thanks
    23
    Thanked 594 Times in 593 Posts
    @needsomehelp
    There are a number of sites that give templates done in DIVs. Here's one http://www.w3schools.com/html/html_layout.asp

    You can also google one/two/three column web site code
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Posts
    432
    Thanks
    6
    Thanked 3 Times in 3 Posts
    the code that i have is from a template already. i have only removed the names of the people. The code shows fine if viewed on its own and the clear's are at the correct places. But when I insert this code in to my new layout it fails due to the left side menu.

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Posts
    432
    Thanks
    6
    Thanked 3 Times in 3 Posts
    this is my original code that i am inserting in to my new page.
    Code:
    <div class="contentpaneopen"><div class="contentheading">MEMBERSHIP 2012/13</div></div>
    <br />
    <br />
    <div style="width: 100%;">
     
    	<div style="float: left; width: 45%;">
    	<div style="padding-left: 20px; font-weight: bold;">Officers are:-</div>
    		<ul>
    		<li> Chair - .. ..</li>
            <li> Vice-Chairs - .. ..</li>
            <li> Secretary - .. ..</li>
            <li> Treasurer - .. ..</li>
    		</ul>
    	</div>
    
        <div style="float: left; width: 50%;">
        <div style="padding-left: 20px; font-weight: bold;">Executive Committee members are:-</div>
    		<ul>
    		<li>.. .. (Chair)</li>
    		<li>.. .. (Vice-Chair)</li>
    		<li>.. ..</li>
    		<li>.. ..</li>
    		<li>.. ..</li>
    		<li>.. ..</li>
    		</ul>
    	</div>
    	<div style="clear: both;">&nbsp;</div>
    	<br><br>
    
    </div>
    <div style="clear: both;"></div>
    <br><br>
    
    
    <div style="width: 100%; padding-left: 20px;">
     
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..<br>
          .. ..<br>
    	  .. ..<br>
    	  .. ..<br>
    	  .. ..
    	</div>
    	  <div style="clear: both;"></div>
    	  <br><br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..<br />
          .. ..</div>
    	  <div style="clear: both;"></div>
    	  <br><br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..<br>
    			.. ..</div>
    		<div style="clear: both;"></div>
    		<br><br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..</div>
    	<div style="clear: both;"></div>
    	<br>
    
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left; width: 250px;">.. ..</div>
    	<div style="clear: both;"></div>
    	<br>
    
        <div style="float: left; width: 100px;">Ex Officio</div>
        <div style="float: left; width: 250px;">.. ..</div>
        <div style="float: left;">.. ..</div>
    	<div style="clear: both;"></div>
    
        <div style="float: left; width: 250px; padding-left: 100px;">.. ..</div>
        <div style="float: left;">.. ..</div>
    	<div style="clear: both;"></div>
    	<br><br>
    
        <div style="padding-left: 250px;">.. ..</div>
    
        <div style="padding-left: 250px;">.. ..</div>
    
    </div>
    this works fine on its own, but when inserted in the rest of my code the first <div> section's float is clearing inline to the bottom of the left menu.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 725 Times in 719 Posts
    I'm not sure what css you are using now, but taking your original code, the black bordered box extends in line with the left hand menu because it includes a clear:both div, which has to clear the floated #leftside div.

    I think you are tripping over float context (or block formatting context) here -see here. There was a slightly better explanation somewhere, but it's now deleted....

    If you give the div with the border its own float context, by (for example) adding overflow:hidden, then the box will contract as I think you want it to.
    Last edited by SB65; 12-12-2013 at 01:16 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •