basic float question CSS Question

Question basic float question ( SitePoint Forums CSS )
Updated: 2009-06-04 05:16:22 (6)

basic float question

What key concept am I missing here?
I am basically looking for a 2 column layout but as soon as I add the float to achieve the right column, the p elements no longer appear to be in the DIV

Thanks

Matt
btw- the content is dynamic so the height needs to be flexible

HTML Code:

<head>
<style type="text/css">
#box{
  border: 1px solid red;
  width:450px;
}
.col{
	border:1px solid black;
	width:49%;
}
</style>

</head
<body>
<div ID="box">
	<p class="col" style="float:left">Column 1</p>
	<p class="col" style="float:right">Column 2</p>
</div>
</body>

Answers: basic float question ( SitePoint Forums CSS )

basic float question

You're missing the basic concept that floated elements are taken out of the document flow and no longer affect block-level boxes; neither the parent box nor subsequent block-level boxes.

You need to insert a cleared element before the </div> tag, or use some more elegant CSS trickery to achieve the same thing. See the FAQ at the top of this forum.

AutisticCuckoo

basic float question

Hello

Clear the floats, PS P tags are not that suited for columns

all4nerds

basic float question

Ahh.. thanks for the faq. I did not realize floats take it out of the document flow.

I added 'clearer' and replaced the p's with divs and now it is great.

Thanks again.

Matt

HTML Code:

<head>
<style type="text/css">
#box{
  border: 1px solid red;
  width:450px;
}
.col{
	border:1px solid black;
	width:49%;
}

.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}
</style>

</head
<body>

<div ID="box">
	<div class="col" style="float:left">Column 1</div>
	<div class="col" style="float:right">Column 2</div>
	<div class="clearer"></div>
</div>
</body>

mkdrums

basic float question

Hello

without extra html code

#box{overflow;hidden;

#box{float:left;

head+body #box:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

all4nerds

basic float question

Thanks I will save that example for another use. It did not work for me this time.

The last code I posted worked 90% for me but I had one problem with my very first "clear:both" and finally tracked it down to a minimum height class that had a float in it.

I wrapped my current box div in one big other div and floated that and it finally worked out.

I suppose this gets intuitive someday...., right?

Thanks again

Matt

mkdrums

basic float question

Quote:

Originally Posted by mkdrums

I suppose this gets intuitive someday...., right?

I don't know about 'intuitive' but once you understand how 'boxes' work in CSS, it at least becomes possible to predict how they should work.

Unfortunately, those predictions only come true in modern browsers. IE will find amazingly unpredictable ways of interpreting the same standard.

AutisticCuckoo

- Source: basic float question SitePoint Forums CSS
- Previous Question: BF Game Night Acrobabble BlizzForums Sports And More Discussion
- Next Question: 2009 NHL Hockey Playoffs Pool BlizzForums Sports And More Discussion