|
CSS - Why Are My Floats Not Clearing In Firefox
Hi
Could someone explain to me why my floats are not clearing at http://www.sussexfind.co.uk/test/ I added a div class at the end of the header div called <div class="clr"> but this does not seem to clear the div in FF. I tried Pauls technique of adding overflow:auto; to the header div but when viewed in IE5 the grey bar at the top does not butt up with the right hand side of the page, http://www.sussexfind.co.uk/test/index-IE5.htm I would prefer to use this technique but need assistance in fixing the IE5 problem.! Thanks for any help! Similar TutorialsI have floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns. How can I clear floats in the middle column? Do you have any better ideas to make my layout work? I have attached in image of how the layout should work. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
</style>
</head>
<body>
<div id="content">
<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">
<div class="content100">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis.
</div>
<div class="content50">
<h2>Row 1, Column 1</h2>
In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque.
</div>
<div class="content50">
<h2>Row 1, Column 2</h2>
This column is not very high.
</div>
<div class="content100">
Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 1</h2>
Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 2</h2>
This column is not as high as the previous one.
</div>
<div class="content33">
<h2>Row 2 Column 3</h2>
</div>
<div class="content100">
Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante.
</div>
</div>
</div>
</body>
</html>
I'm working on a site that has a lot of floated elements, and I'm running into a situation I've run into before with Firefox, where Firefox insists on clearing the floated elements. I figure it's about time to learn the fix, if there is an easy one. Here's a very simple test case: Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.sidebar {float: right; width: 100px; height: 500px; background: green}
.box {background: orange; float: left}
.box_right {float: right; background: blue}
</style>
</head>
<body>
<div class="sidebar"></div>
<div class="box">
<div class="box_right">test</div>
</div>
</body>
</html>
So you've got a tall right side floated element. Then in the content area you've got a float: left that contains a float: right. I could fix it by removing the float: left, but then the box won't expand with it's floats. I could fix it by removing float: left and switching to overflow: auto. That would make it expand with it's floats, but I have some absolute positioned layer popups within that box that get cut off if I use overflow: auto. So that's a no go. I could fix it by setting a width on the float: left, but this is a liquid width site and I want the float: left box to expand the full width (but not touch the sidebar). Is there a fix for Firefox that would work with the above requirements? Is there a way to only clear floats within an element without affecting any floats defined about and outside the element? example: <div style="float:left;">A</div> <div style="float:right;"> <div style="float:left;">C</div> <div style="clear:both;"></div> </div> I would want the clear to only clear C and not A I am working on a new page and have got things working in firefox, but the footer and a couple of other things are not working very well in IE7, can anyone point me in the right direction on where I need to look for the problem, thanks: the page is at: tinybrandsrock [dot] com thank you. Hello, I'm new to this, hopefully someone can help me out. I recently created a few pages on wordpress for my business. Once I finished (using firefox) I checked to see if my site was compatible with other browser and unfortunately there were several issues. Text, pictures and videos are not aligned properly in Safari, Chrome and IE. Does anyone know what could possibly cause this and how to fix it?? I am also looking for someone to help me in the future for website design, recommendations appreciated. signature sound .com under "training" and "workshops" If there is anymore information needed to help me I will provide. extra info: I cleared floats within HTML and not within CSS. Here is some CSS for the training page: #song-logo { margin:35px 0px 0px 44px; } #discover-songlist1 { margin:0px 40px 0 50px; float:left; } #discover-info { float:left; width:500px; margin:-36px 0px 0px 130px; } #song-pictures { margin:-65px 48px 0px 0px; } #more-info { margin: -30px 0px 0px 45px } #record-logo { margin:55px 0px 0px 44px; } #discover-recordlist2 { margin:0 143px 0 50px; float:left; } #discover-every { width:500px; float:left; margin:-36px 0px 0px 62px; } #record-pictures { margin:-65px 55px 0px 0px; } #more-info2 { margin: -30px 0px 0px 45px } #discover-list3 { width:460px; float:left; margin:50px 0 0 50px; } I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen. URL is: http://www.readaloudproject.org/about/ Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working. Help! Thanks! So... I've got a page I'm working on where I can't seem to get to floats to clear without compromising the layout of the divs that are floating. http://www1.romenews-tribune.com/multimedia2/ http://www1.romenews-tribune.com/multimedia2/style.css If I try the clear:after class fix, it doesn't work. If I try the overflow: hidden fix, it looks fine until the page is resized - and the overflowing content is hidden. What I want is for the right and left div is to stretch to the bottom of the page regardless of the page height, and clear to the div they are floating in. Any suggestions? Let me know if I need to provide better examples or more info, as I'm stumped on this one and feel like I've been doing this for far too long. i know ie sux but, i nearly fixed the columns height problem but there is still a problem ,, site : http://www.bekirhoca.com/index2.asp >> it looks nearly fine (instead of the image over the menu) when i add some content to the columns, height expands normally . But in firefox it doesn't seem normal because of the -- #wrapper {float:left} -- tag. When i remove it firefox acts normally but ie dont , when i add it reverse. So is there an hack to make firefox not to see that float? or i dont know where i did the mistake !!???!! and there is another problem ,, at 1280x1024 screen resolution the inner content expands, i want to fit it inside where it is between the right and the left cols. and and and why the right column isnt fit in ff as in ie?? you can check the site's top image 's right corner and see what i mean > http://www.bekirhoca.com/index2.asp ,, its a little bit longer than as seen in ie http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. Hi all, I have a problem with clearing my CSS in IE and opera. My website is b-artdesign. I know no links are allowed but couldnt explain it different. its a com Seems to work fine in firefox... worked just perfect in IE.. but when adding some CSS code it all went wrong.. dono what happened... cant figure it out. thanks in advance.. Bart I need some help with aligning a top of a div with another div. My web site is just a screw around hobby thing but here is the web address for it www.penguin.lhup.edu/~ewhite2 the two divs that I am focusing on are .link and #content here is the css code for them css Code: Original - css Code .link{ float: left; width: 115px; background-color: #000000; text-align: center; margin: 10px 0 0px 13px; clear: both; } #content{ margin: 10px 17px 4px 0; width: 625px; float: right; }
any help would be awesome and a head of time thank for all who take the time to read this post and for responding to it if you do. I'm pretty sure there isn't a way to do this, but i am curious.. I know that i could answer the first question if i had a printer that wasn't out of ink .. but here goes. First: Are CSS attributes that are assigned to the media Screen inherently assigned to Print even if you point the Print media a different stylesheet? Second: Is there a way to clear a stylesheet values? basically making the stylesheet null or empty? I have been working on a website design for some days now. I thought I had it pretty much done until I checked some of my longer pages out in IE9 and the clear:both is not working in one position causing the footer to sit over some of the content. It is fine in FF. I have spent hours going over the code and I just cannot understand why. Can anyone give me any pointers? http://nationwideinnovations.co.uk/garage-doors.html Thanks in advance hi, i have some divs within my container div. I cant get the container to wrap around the content in #contentMain (which is inside of #content. in IE, the container wraps after the #leftNav (inside the #conent) but FF wraps after the #nav div does anyone know how I cant sort it? thanks html PHP Code: <div id="container"> <div id="header"></div> <div id="nav"> //topNav </div> <div id="content"> <div id="leftNav"> //leftNav </div> <div id="contentMain"> //content, links, images and stuff </div> </div> </div> css PHP Code: #container { margin:0px auto; padding: 0; width: 760px; /*border: 1px solid #666;*/ background: url(../images/bodyImg.gif) no-repeat top left; } #header { margin:0px auto; padding: 0; width: 760px; height: 100px; background: url(../images/header.gif) no-repeat top left; } #nav { width:760px; height: 25px; padding: 0; margin:0; background-color: #eee; } #content { margin:0px auto; padding: 0; width: 760px; } #contentMain { padding: 0; margin: 0; float: right; width: 630px; } #leftNav { color: #000; float: left; margin: 0; padding: 0; width: 128px; } .imgMap1 { width: 220px; position: relative; top: 200px; left: 30px; } Hi, The attached file has the div's using float. But at the end the footer dosen't extend beyond the content or the the content dosen't push the footer. I tried using {clear:both} but dosen't seem to work. I would appreciate if someone had a look at the code and suggest a workaround. thanks, Curio I have a list item like this: <li><img src="" /><a href="#">NAME</a><br class="clearleft" /></li> quick css: li { border-top: 1px solid #ccc; } li img { float: left; } .clearleft { clear: left; } the problem: The image that is floating is of taller than the text next to it. On FF and Safari, the border lines up below the image, on IE, the border is under the single line text. http://abodycars.homelinux.net/forums/login.php - HTML http://abodycars.homelinux.net/themes/default.css.php - CSS It's a site I'm starting to build. For whatever reason, in firefox, the navigation menu is on the left side of the screen and the form is on the right side. In IE, the desired behavior I want (nav bar on top, form underneath) is there. Although I know how IE is and there might be something wrong with my code. Everything validates... The navigation menu is wrapped in a div, so I would expect the div to auto-clear since it should be expanding to 100% width. But that doesn't seem to be happening for some reason...can anyone tell me what I did wrong? Thanks. Is this a display glitch or is it meant to be like this... for example, let's say you have a picture in a div that had text floating to one side. If the text beside the picture doesn't fill the space the heading will be displayed inline beside the floating picture, even if it's in it's own containing div... EDIT: I've found a general fix for this using <div style="clear:both;"> but it's a PITA, and I think I'm doing something improperly. Maybe I'm misunderstanding the use of a floating frame... but, I can't help but think it's a possible display error with the different browsers |
|||||||