none
Help with float/clear

    Question

  • I am learning some HTML and I am fascinated with what you can do with float. However, I have a simple document with accompanying css file and I just cant figure out why my div element floats with the previous div element despite the inclusion of the clear property. Code below:

    CSS file:

    body
    {
    	color: 			blue;
    	font-size: 		12pt;
    	font-family: 		Arial,Verdana, Courier;
    }
    h1
    {
    	background-color: 	pink;
    	color: 			red;
    	text-align:		center;
    }
    div
    {
    	padding:		6pt;
    }
    div.MainHolder 
    {
    	width:			1000px; 
    	height:			600px; 
    	border:			4px solid blue;
    }
    div.Menu
    {
    	background-color:	black; 
    	color:			yellow; 
    	float:			left;
    	width:			130px; 
    	height:			300px;
    }
    div.Content
    {
    	background-color:	white; 
    	color:			blue; 
    	float:			left;
    	width:			650px; 
    	height:			300px;
    }
    div.Credits
    {
    	text-align:		center;
    	clear:			both;
    }


    HTML document:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!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" xml:lang="en">
    	<head>
    		<title>HTML WORKSHOP</title>
    		<link rel="stylesheet" type="text/css" href="Look.css" />
    	</head>
    	<body>
    		<div id="MainBox" class="MainHolder">
    			<div class="BGPink">
    				<h1>HTML WORKSHOP 2</h1>
    			</div>
    			<div class="Menu">
    				<p>Pastries</p>
    				<p>Appetizers</p>
    				<p>Entrees</p>
    				<p>Desserts</p>
    			</div>
    			<div class="Content">
    				<p>Other info goes here</p>
    			</div>
    			<div class="Credits">
    				<button type="button" onclick="alert('Thank you for browsing')">
    					Show Credits
    				</button>
    			</div>
    		</div>
    	</body>
    </html>

    The button appears to the right of the Content div instead of below as intended.

    Thanks for any input


    50% of programming is coding. The other 90% is debugging


    • Edited by JonWayn Wednesday, October 30, 2013 3:05 PM missing data
    Wednesday, October 30, 2013 3:00 PM

All replies

  • Hi,

    use the Trace Styles tab of the Developer tool to (well) trace styles.

    You are using the <?xml namespace directive.... use the Developer tool's networking tool to confirm that your server is sending it back with the correct mime-type (*.html=application/xml-xhtml) or just remove the directive.

    see http://quirksmode.org/css/clearing.html or a discussion about the use of the clear rule.

    ref: http://www.w3.org/wiki/CSS/Properties/clear

    Regards.


    Rob^_^

    Wednesday, October 30, 2013 11:51 PM
  • I ran a validation of the css and the html document and they both passed. I take it that that validates the setting of the directive you are referring to.

    After the original post, tweaked the code a little bit and got the desired result, but not by the desired approach. What I did was, remove the class attribute and instead used an in-line style rule. In other words, replace

    <div class="Content">
    with

    <div style = "clear: both;">

    This is not serious coding. I am just trying to learn HTML. There is no server involved. The files all reside on my local computer. However, I am still stumped as to why 'clear' failed when specified in an external css, but works as an in-line rule.


    50% of programming is coding. The other 90% is debugging

    Thursday, October 31, 2013 1:17 AM
  • When I load it on my computer, the button is not even where your illustration shows it. It's parent div floats along with the 2 previous sibling divs so the top of the button is even with the top of the menu div. I deliberately left enough room next to the floated divs just to test the use of clear, but it threw me under the nearest bus

    50% of programming is coding. The other 90% is debugging

    Thursday, October 31, 2013 1:22 AM