www.webdeveloper.com
Results 1 to 6 of 6

Thread: CSS Float problem

  1. #1
    Join Date
    Aug 2014
    Posts
    5

    CSS Float problem

    Hello!
    I'm a designer learning CSS on my own so I can go to the university with some base knowledge. I put apart a newsletter comp trying to put it back together. If you copy the code and open it in browser, you will see that it doesnt float properly. I'm stuck and frustrated. Please fix this basic code for me and point out my mistakes. Thank you for all the help!

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="newsletter.css" />
    	</head>
    	<body>
    		<div id="wrapper">
    						<div id="header"><img src="comp/header.png" /></div>
    							<div id="content3"></div>
    							<div id="content2">
    									 <p class="text">;</p>
    								</div>
    						</div>
    						</div>
    				<div id="footer"> <p class="copyright">Copyright &copy;2014 [email]meixdesign@gmail.com[/email]</p></div>
    			</div>
    		</div>
    	</body>
    </html>


    CSS:
    Code:
    html, body, h1, h2, h3, p, ul, li, img, a{
    	margin:0;
    	padding:0;
    	border:0;
    	text-decoration:none;
    	list-style:none;
    	font-family: arial;
    }
    #wrapper {
    	width:600px;
    	height:1000px;
    	margin:auto;
    }
    
    #header {
    	color:#FFF;
    	float:left;
    	width:600px;
    	height:218px;
        background-image:url("comp/header.png");
        background-position: top left;
    	background-repeat: no-repeat;
    }
    #content3{
    	font-size:11px;
    	color:#00008b;
    	float:right;
    	background:#b8c4ce;
    	width:202px;
    	height:686px;
    	background-image:url("comp/more to read.png");
    	background-position: top left;
    	background-repeat: no-repeat;
    	text-align:left;
    	list-style-type:none;
    	letter-spacing:3px;
    }
    #content2{
    	font-size:12px;
    	color:#000;
    	float:left;
    	clear:left;
    	width:398px;
    	height:686px;
    	background:#FFF;
    	background-repeat:no-repeat;
    	text-align:left;
    }
    
    #footer{
    	float:left;
    	clear:right;
    	background:#f9eb9a;
    	width:600px;
    	height:142px;
    	background-image: url("comp/footer.png");
    	background-repeat:no-repeat;
    	text-align:center;
    	text-shadow:1px 1px white;
    }
    .text{
    	padding:8px;
    	width:390px;
    }
    .copyright{
    	margin-top:25px;
    }

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    What isn't floating correctly?

    I put your code here so we can see and modify it:
    http://codepen.io/anon/pen/bilhd

  3. #3
    Join Date
    Aug 2014
    Posts
    5
    thank you for trying to help me!

    As you can see the footer is detached and all the way to the left while the other elements are centered and next to each other.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Well you wouldn't want to float your footer to the left. I've changed the float to "margin: 0 auto;" which centers it. You can see the revised version here:
    http://codepen.io/anon/pen/bilhd

  5. #5
    Join Date
    Aug 2014
    Posts
    5
    great! thank you!

  6. #6
    Join Date
    Dec 2013
    Posts
    10

    Cool Clearing floated content

    Clearing floated content
    Code:
    Clearing floated content
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Clearing floated content</title>
    <style type="text/css" media="screen">
    
    #wrapper {
        width: 800px;
        margin: 0 auto;
        background: pink;
        }
        
    #divOne, #divTwo {
        float: left;
        width: 400px;
        }
        
    #divOne {
        margin-right: 24px;
        }
        
    .clearFix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }    
    </style>
    </head>
    <body>
      <div id="wrapper" class="clearFix">
        <h1>Love Sayings</h1>
        <div id="divOne">
          <h2>Div one</h2>
          <p>How we treasure (and admire) the people who acknowledge us! Julie Morgenstern</p>
          <p>Love means not ever having to say you're sorry. Erich Segal</p>
          <p>Whatever our souls are made of, his and mine are the same. Emily Bronte</p>
        </div>
        <div id="divTwo">
          <h2>Div two</h2>
          <p>Love reminds you that nothing else matters. Amy Bushell</p>
          <p>The important thing was to love rather than to be loved. W. Somerset Maugham, 'Of Human Bondage'</p>
          <p>Love is smiling on the inside and out. Jennifer Williams</p>
        </div>
      </div>
      <p>Love is life. And if you miss love, you miss life. Leo Buscaglia</p>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles