•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,768 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,169 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 2167 | Replies: 9
![]() |
•
•
Join Date: Nov 2007
Posts: 86
Reputation:
Rep Power: 1
Solved Threads: 6
Hey all,
I have a div tag in which is a basic place holder, calling CSS to clear some floats of previous div tags. They are currently being used like
Does my code validate better, or is it better practice to use
instead?
Will any browsers have trouble if I do it the second way?
Thanks
Sage
I have a div tag in which is a basic place holder, calling CSS to clear some floats of previous div tags. They are currently being used like
<div id="clear"></div>
Does my code validate better, or is it better practice to use
<div id="clear" />
Will any browsers have trouble if I do it the second way?
Thanks
Sage
Last edited by sagedavis : Nov 28th, 2007 at 2:09 pm.
I'm not sure what would happen in your case, but you can try it here and see what it does
http://www.w3schools.com/xml/tryit.a...ttprequest_js1
I suggest leaving it as you originally have it, it's not doing any harm that way and it is sure to work with all browsers.
http://www.w3schools.com/xml/tryit.a...ttprequest_js1
I suggest leaving it as you originally have it, it's not doing any harm that way and it is sure to work with all browsers.
--
Robert Williams
CEO, Founder
CertGuard
Robert Williams
CEO, Founder
CertGuard
Do not use id to identify the div you're using to clear the floats, because you might be using it several times in your document and your mark-up won't be validated. In fact, you do not even need to use the div to clear them. Use a <span class="clr"></span>
<style>
.clr
{
clear:both;
display:block;
line-height:1px;
font-size:1px;
}
</style>
and that should do the work. I thought of doing it myself, but i'm not getting time to update my website, still using divs to clear float ;-)
<style>
.clr
{
clear:both;
display:block;
line-height:1px;
font-size:1px;
}
</style>
and that should do the work. I thought of doing it myself, but i'm not getting time to update my website, still using divs to clear float ;-)
vish :-)
http://www.vishwebdesign.com/
http://www.vishwebdesign.com/
•
•
Join Date: Jun 2008
Posts: 1
Reputation:
Rep Power: 0
Solved Threads: 0
Now I am completely confused about the empty div tag. I do know that the div creates a line break before and after its rendering but have read where a <br /> element is styled inline with clear:both.
I've seen recommendations to clear floats, using the empty div tag:
And not closing the div tag.
While within another implementation of the same template, used elsewhere, I see the technique applied below:
Which is correct, although I just read in this topic that the first code example herein will not validate? Or is there an easier way?
I've seen recommendations to clear floats, using the empty div tag:
<div style="clear:both" />
While within another implementation of the same template, used elsewhere, I see the technique applied below:
<div style="clear:both; line-height:1px;"> </div>
•
•
Join Date: May 2008
Location: Hyderabad, India
Posts: 245
Reputation:
Rep Power: 1
Solved Threads: 27
<div style="clear:both; line-height:1px;"> </div><div style="clear:both; line-height:1px;"> </div>
this one wrong means your styles write in div ID properties and write div tag like this
<div id="clear"></div>
Thanx,
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
Sreekanth
www.saap.in
if you problem solved add me as a reputation and mark it mark as solved
•
•
Join Date: Jun 2008
Posts: 50
Reputation:
Rep Power: 1
Solved Threads: 0
You can run into some issues with IE7 making a break in your page if you are not turning off the overflow. This is a common method to clear floated elements.
Place the class "clearfix" inside the container div that has floated elements. This way, you don't have any breaks in your layout.
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */Place the class "clearfix" inside the container div that has floated elements. This way, you don't have any breaks in your layout.
<div class="clearfix"> <div class="floatedDiv"> This is a floated div </div> </div>
•
•
Join Date: Jun 2008
Posts: 16
Reputation:
Rep Power: 0
Solved Threads: 2
It might depend on the content-type. Application/xhtml+xml would probably render it correctly either way, but IE would not display such a file (at all...it would ask you to open or save it).
If you were using text/html, then it would probably recognize the empty tag as a div tag that's not closed. Or this might just be an IE thing, IDK.
Back to the first tag: not having anything in between the opening and closing tags might also cause some problems.
If you were using text/html, then it would probably recognize the empty tag as a div tag that's not closed. Or this might just be an IE thing, IDK.
Back to the first tag: not having anything in between the opening and closing tags might also cause some problems.
![]() |
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
- Open In New Window Php (PHP)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS template overlapping
- Next Thread: Navigation misaligned in mozilla



Linear Mode