/    Sign up×
Community /Pin to ProfileBookmark

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!

[code=html]
<!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][email protected][/email]</p></div>
</div>
</div>
</body>
</html>
[/code]

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;
}
[/code]

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@cbVisionAug 22.2014 — What isn't floating correctly?

I put your code here so we can see and modify it:

http://codepen.io/anon/pen/bilhd
Copy linkTweet thisAlerts:
@MeiauthorAug 26.2014 — 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.
Copy linkTweet thisAlerts:
@cbVisionAug 26.2014 — 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
Copy linkTweet thisAlerts:
@MeiauthorAug 26.2014 — great! thank you!
Copy linkTweet thisAlerts:
@happycodingsSep 04.2014 — 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>

[/CODE]
×

Success!

Help @Mei spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...