|
CSS - Clearing Problem (i Think?)
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; } Similar TutorialsI 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? 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 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. Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! 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 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, 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 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 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. issues: Code: 108 .main_pic_transparent Parse Error - opacity=50) 109 .main_pic_transparent Property -moz-opacity doesn't exist : 0.5 110 .main_pic_transparent Property opacity doesn't exist : 0.5 111 .main_pic_transparent Property -khtml-opacity doesn't exist : 0.5 164 .menu Parse Error - opacity=50) 165 .menu Property opacity doesn't exist : 0.5 166 .menu Property -khtml-opacity doesn't exist : 0.5 how are you supposed to set the opacity? how is 0.5 wrong? and the property -khtml-opacity.. i was told from this forum that it doest exist 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. 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. 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;"> 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 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! |
|||||||