|
CSS - Properly Clearing A Div Without Using Css 'clear'
So i've got a dillema where I have a page that has a div floating to the left of multiple story divs. I'll start off by giving source code:
http://graffetto.com/chops/float.html HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Floating Divs</title> </head> <body> <div class="floatLeft"> this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left this content is to float left </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> <img src="story_image3.jpg" alt="" title="" /> this is a story block fds </div> <hr style="clear: both;" /> <div class="storyBlock"> this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa this is a story block fds afds af dsa fdsa </div> <hr /> <div class="storyBlock"> <img src="story_image2.jpg" alt="" title="" /> this is a story block fds afds af dsa fdsa </div> </body> </html> CSS: Code: body {margin: 10px;}
.floatLeft {
float: left;
width: 200px;
height: 600px;
margin: 0 10px 10px 0;
border: 1px solid red;
padding: 10px;
}
.storyBlock {
width: 400px;
margin: 0 0 5px 0;
}
.storyBlock img {
float: left;
margin: 0 5px 5px 0
}
The fifth 'storyBlock' div has an image that is taller than that of the text within that div. I need to clear that div around the floating image to the left, but I can't use clear:left because it will clear the entire 'floatLeft' div. This is what happens: http://graffetto.com/chops/float_cleared.html Idealy, it would look like this (note that these 'storyBlock' divs are generated dynamically): http://graffetto.com/chops/float_ideal.html Also - this issue is only apparent in FireFox - IE automatically clears the div. Similar TutorialsHi, Creating a Wordpress theme. I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing the 1st-column div that is floated:left. In other words, I want these two columns to work independently, just like <TD> in html. Here is my setup -- it is a 2-column layout, with the left column being a navigational sidebar (navigation content automatically generated by wordpress), and the Right Column is the "real content" div. Wordpress generates the content in the right column, also. And since Wordpress generates the content based upon what the reader selects, I cannot assign any HEIGHT attributes to the Divs, because I do not know whether the selections have a lot of content, or very little. ----------------- HEADER DIV------------------------------------------ -- Sidebar Div-- __________ --- RIGHT DIV (not floated) ----------------- FOOTER DIV ---------------------------------------- (property of footer is set to clear:both) SIDEBAR DIV is float:left; width 160px RIGHT DIV is not floated, and contains all the content. 600px; Problem I need to solve: In column #2 -- the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side of the thumbnail. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it). *** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page. So it looks like this: ___ HEADER ____ Sidebar __________________ Thumbnail #1: Text text text (clear:left clears everything....) __________________________ Thumbnail #2: Text ---- FOOTER --- Attempted solution: If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div. Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more "modern" solution. I have googled this all day, and have not seen a solution. Help is appreciated. Hey everyone, I am working on a design for a friend. and I got it almost done, but for some reason, the footer does not display below the page. In no browser. Here is my code: 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" xml:lang="en" lang="en">
<head>
<title>BlackNine</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style type="text/css">
body {
background-color: #4D4D4D;
color: #FFFFFF;
font-family: verdana,tahoma,san-serif,arial;
font-size: 13px;
margin: 0;
padding: 0;
}
a img {
border: 0;
}
a, a:link, a:visited, a:hover, a:active {
color: #ff9600;
text-decoration: underline;
}
a:hover {
color: #000000;
}
li {
background-image:url(li.jpg);
background-repeat:no-repeat;
background-position:left;
list-style-type: none;
padding-left: 18px;
}
#header {
width: 100%;
}
#header h1 {
color: #ff9600;
font-size: 25px;
padding-top: 5px;
}
#header h2 {
position: absolute;
top: 0;
padding-left: 55px;
color: #CCCCCC;
font-size: 13px;
}
#main {
border-top: 5px solid #0042ff;
border-bottom: 5px solid #0042ff;
position: absolute;
background-color: #FFFFFF;
height: auto;
margin: 0;
width: 98%;
color: #000000;
padding-right: 2%;
}
#main h1 {
color: #ff9600;
font-size: 19px;
}
#main p {
text-indent: 55px;
}
#rightCol {
float: right;
width: 20%;
position: absolute;
right: 0;
height: 100%;
border-left: 1px dotted #ff9600;
}
#leftCol {
float: left;
width: 75%;
padding: 2%;
}
#footer {
text-align: center;
clear: both;
}
</style>
</head>
<body>
<div id="header">
<h2>I am so fly</h2>
<h1>BlackNine</h1>
</div>
<div id="main">
<div id="rightCol">
<ul>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
<li><a href="">asdf</a></li>
</ul>
</div>
<div id="leftCol">
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
sdfgfgf fsadfsdfsdfjasdklfjsadfksdjf
</div>
</div>
<div id="footer">
asdfsafjsdkf sdafkljsdfk lsdlkfjsd afkljsdfsdklfjsdf asdfksdjf
</div>
</body>
</html>
Here is what it looks like. Any suggestions? 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 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 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. 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; } 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. 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 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. 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 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! 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. the site is versionfest.org, my problem is very simple but I have never really understood floating and clearing as you see in the side I have a sidebar, a little calendar on the left side, main content in the center, when I apply divs to the calendar so that the links will show up with the correct styles - it makes it so that the sidebar on the other side dips below to the level of the calendar, also happens to the div.box taged boxes. Thanks for helping div.calcon { float: left; width: 175px; clear: both; } <div id="calcon" style="float: left; clear:left; width:100;"> #sidebar { float: right; width: 175px; } <div id="sidebar" style="float:right;"> div.box { width:188px; padding:10px; float: left; border:1px solid gray; margin:4px; text-align:center; } <div class="box" style="float: left; width: 160px;"> Ok, I have been pulling my hair out trying to figure out a workaround. I then have been searching the web for answers, but can't get any of the solutions to work in this case. Here is a stripped down version of the code: CSS: Code: ul {
list-style: none;
}
li.leftform {
clear: left;
float: left;
text-align: right;
width: 121px;
padding-right: 10px;
font-size: 12px;
font-family: Tahoma;
color: #000000;
line-height: 40px;
}
li input {
width: 243px;
height: 18px;
line-height: 18px;
margin: 0;
margin-right: 3px;
}
li.middleform {
float: left;
width: 243px;
padding:8px 0;
padding-right: 10px;
line-height: 18px;
min-height: 24px;
}
li.rightform {
float: right;
width: 168px;
padding-top: 10px;
padding-right: 25px;
line-height: 11px;
}
HTML: 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>IE Test</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <fieldset> <legend>Personal Information</legend> <ul> <li class="leftform"> <label for="FirstName">* First Name</label> </li> <li class="middleform"> <input name="FirstName" type="text" maxlength="20" id="FirstName" /> </li> <li class="leftform"> <label for="LastName">* Last Name</label> </li> <li class="middleform"> <input name="LastName" type="text" maxlength="30" id="LastName" /> </li> <li class="leftform"> <label for="Phone">Phone Number</label> </li> <li class="middleform"> <input name="Phone" type="text" maxlength="30" id="Phone" /> </li> <li class="rightform"> Saving a phone number helps us contact you if there's a problem. </li> <li class="leftform"> </li> <li class="middleform"> <a href="">Add a phone number</a> </li> <li class="rightform"> <a href="">Cancel</a> | <a href="">Save</a> </li> </ul> </fieldset> </body> </html> It displays fine in IE8, Firefox 2+, Safari, Google Chrome, Opera... the problem, as usual is IE6 and IE7. For some reason the clear: left works on the first element, but an element after goes as if there was never a clear before it. The HTML is like this for a reason, I know you can't see it now because I stripped everything out of it. Any help on a quick fix (don't mind if it's dirty ) 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 I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would. Here is the basic code I have so far: Code: <html>
<head>
<style type="text/css">
div.box1 {
border: 1px solid red;
background: #afafaf;
padding: 2px;
float: left;
}
div.box1 table {
float: left;
border: 1px solid blue;
margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
<table>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
<tr>
<td>Field1:</td>
<td>Value</td>
</tr>
</table>
<table>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
<tr>
<td>Field2:</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
<h1>Next Text</h1>
</body>
</html>
I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code: div.box1:after {
content: 'clear me';
clear: both;
display: block;
height: 0px;
visibility: hidden;
}
However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables? 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? Hey all, Here is my page: tri-m.com/ENGINEERINGSITE/test.html The page looks what I want it to look like in IE... but if you open it up in FF you will see what I mean. If I add my clear float <div class="clear"></div> after .Iimage and .Ifeatures, a large space is placed between .imageFeatures and .IfeatureTEXT. If I do not add the clear (as in my example... than the floats are not cleared in FF obviously). I'm not quite sure what to do with this case. I'm not really able to find a similar problem. If someone could help me out that would be AMAZING! Thanks everyone. - Jacenta |
|||||||