Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
clearing floating divs using <hr />
Hi,
I have recently posted the following in the WSG mailist:
——————————-
Is there any information about (or advice against) using <hr /> to clear floating divs?
Something like this:
HTML:
<code><div id=“floating”><!— a floating div —>
…content…
</div>
<div id=“main”>
… content…
</div>
<hr /></code>
CSS:
hr {clear:both; visibility: hidden;}
I found it very useful to clear divs of the main layout (like clearing the footer) or even to clear articles/post that have floated divs with images.
Also, when CSS disable, the <hr /> helps to visually divide the page in sections (navigation, main, footer).
So, any advice against this method? or any URL where I can read more info about this?
I’m not asking esentially about the correct use of <hr /> but about this clearing method, new for me at least.
—————————
I add here:
I found it cleanest than using <br /> or empty divs. Also, it’s easy than the method that implies using content: "." an other “complicated” CSS.
Last edited by maniqui (2006-03-27 22:13:17)
Offline
#2 2006-03-27 22:20:57
- stdmedia
- Member
- From: Canada
- Registered: 2006-01-05
- Posts: 51
Re: clearing floating divs using <hr />
In IE you tend to see a big space beneath the items you’re clearing. I’ve begun to use the “display: table;” property. To use it all you need is a container to house the items you’re going to float.
<code> <div id=“container”> <div id=“float_one”>Floating</div> <div id=“float_two”>Floating</div> </div> </code>Then the styles <code> #container { display: table; } #float_one, #float_two { float: left; } </code>
Offline
#3 2006-03-28 00:52:24
- marios
- Archived Plugin Author
- Registered: 2005-03-12
- Posts: 1,253
Offline
Pages: 1