/    Sign up×
Community /Pin to ProfileBookmark

clearing floats

Copy linkTweet thisAlerts:
Jul 25.2010

Somehow inexplicably, the default behavior for css is to clear every float on the page regardless of whether the float is within the immediate parent or not.

[CODE]
<div style=”float: left”>
<h2>Themes</h2>

a long list
</div>
<div style=”margin-left: 200px”>
<div >
<div style=”float: left”>
something
</div>
<div style=”clear: both”>This will be below a long list AND something</div>
</div>
</div>
[/CODE]

Can this possibly be? I found a hack:

[CODE]
<div style=”float: left”>
<h2>Themes</h2>
a long list
</div>
<div style=”margin-left: 200px”>
<div style=”overflow: hidden”>
<div style=”float: left”>
something
</div>
<div style=”clear: both”>This should be right under something</div>
</div>
</div>
[/CODE]

But honestly, how are we supposed to do this, surely it can’t be this ridiculous hack.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJul 25.2010 — When you use css float or css positioning you are essentially taking those elements out of the normal browser flow and putting them where you specify.

I would do something like this:

[code=php]
<!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>
<style type="text/css">
<!--

#container {
width: 500px}

#leftCol {
float: left}

#rightCol {
float: right}
-->
</style>
</head>
<body>

<div id="container">
<div id="leftCol">
<h2>Themes</h2>
a long list
</div>
<div id="rightCol">
<div>
something
</div>
<div>This should be right under something</div>
</div>
</div>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@martingalehauthorJul 26.2010 — Yes, the div will clear "something" because the something div and the div after something are both block level divs. The tricky thing to do is to clear the something div if the div is floating.

[CODE]
<div style="float: left">long list</div>
<div style="float: right">
<div style="float: left">something</div>
<div >Now wiht no clear, this will be right next to something</div>
</div>
[/CODE]
Copy linkTweet thisAlerts:
@tirnaJul 26.2010 — ok, it wasn't clear to me in your 1st post exactly what you wanted to do.

In this code I have floated left the "something" div and then added 'clear: left' to the div below it and the page appears ok in my IE8 and FF3.6

[code=php]
<!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>
<style type="text/css">
<!--

#container {
width: 500px}

#leftCol {
float: left}

#rightCol {
border: 1px solid blue;
float: right}

#something {
border: 1px solid red;
float: left}

#myDiv {
clear: left}

-->
</style>
</head>
<body>

<div id="container">
<div id="leftCol">
<h2>Themes</h2>
a long list
</div>
<div id="rightCol">
<div id="something">
something
</div>
<div id="myDiv">This should be right under something</div>
</div>
</div>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@martingalehauthorJul 26.2010 — Yes. Your solution worked because you floated the right column and floats within floats are cleared relative to the parent. I can't float everything because I'm trying to keep the content liquid in the middle.

[CODE]
<div style="float: left; width: 200px;">left</div>
<div style="float: right; width: 200px;">right</div>
<div style="margin: 0px 200px;">content</div>
[/CODE]

If you try to float sometin gin the content div and then clear on the next div, it will clear everything.
×

Success!

Help @martingaleh 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.18,
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,
)...