|
CSS - Unwanted Column Div Clear Problem
www.asticafe.com
Can anyone tell me why the right column is clearing the left images? It only happens in IE, not modern browsers like Firefox or Safari. What's causing it and how can I fix it? I've tried playing around with "clear:none" and "float:right" properties for the right column, but it just makes the problem worse. Similar TutorialsI have a pretty typical three column layout with col1 floating left, col2 in the middle and col3 floating right. The HTML calls the divs in order of col1,col3,col2 and everything generally works fine with the exception of using a div in the middle column (col2) with a style that has clear:both in it. The clear:both clears all items in the sidebar columns and not just in the middle column (which is what I want). The problem can be seen at the below URLs. wwwDOTjessiekpowellDOTcom/2009/08/kristin-cavallari-filming-on-malibu-beach-for-the-hills/ and wwwDOTjessiekpowellDOTcom/2009/10/alessandra-ambrosio-bikini-photo-shoot/ As you will see the second set of images from the gallery is displayed after a huge gap of white space after it has cleared the last div in the right sidebar. What I want is to just clear the first row of images in the middle column. This does not just affect images but anything with a div style=clear:both Any suggestions will be appreciated as I've exhausted my skills on this one. I seem to be having a bit of a problem with a layout I am attempting...here is the problem... First of all, this is a 4 column layout with an absolutely positioned header. The 4 columns use floats for positioning as I am trying to keep a natural code flow. The 4 columns are intended to expand and contract with the page's width, and the heights should be 100%. The content of the page flows below the fold of the page on nearly every page. My problem is with the 100% height. In Firefox the footer that I am using to clear the floats is not clearing them, but rather resting below the floats. Does anyone have a good reference for using floats with 100% height that flow below the fold of the page? If someone wants to take a look at an example, you should message me as I can't post the development site publicly. I have some simple code that works in all recent browsers, including IE8+. But with some people out there still using IE7, for which it does something odd, and I've been asked to make it work with that as well. I've dumbed it down to it's basics, and it's just easiest to see with a visual. http://www.poweredpages.com/test.php I have four boxes, labeled 1 through 4. It's supposed to wrap at 3, with 4 to the right of that box. In IE7, It wraps at 3 (correctly, because of the clear), but then box 4, which has a float:left after the cleared 3 box, jumps back up to the 1 and 2 row. Any thoughts on how do get this working with the least amount of editing would be appreciated. In real life, I have the left boxes as a class "label" and the right boxes as another class "input", so if I could just add something to one of these classes and be done w/ it, that would be great. Of course, I could put another entire DIV around each row to fix this, but that would require altering a whole bunch of code. Thanks! Prof Here's the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="clear:both;width:50px;float:left;border:1px solid red">1st</div>
<div style="float:left;border:1px solid green">2nd</div>
<div style="clear:both;width:50px;float:left;border:1px solid blue">3rd</div>
<div style="float:left;border:1px solid orange">4th</div>
</body>
</html>
hello all, once again, IE is presenting problems where everything else is just fine. specifically, my footer isn't clearing. i've looked around and apparently this is nothing new, but none of the fixes seem to be working. so first, the offending page (one look in IE and all will be understood instantly): http://www.teamsnowvalley.com/news/headline.php?id=12 i've made the footer RED to indicate the snafu in IE. relevant CSS (i stripped out unnecessary crap): #content { float:left; display:block; margin:0 0 25px } #content .full { float:left; width:500px; padding-right:15px; border-right:solid 2px #CCC } #rightSideBar { float:left; padding-left:15px; width:207px } #footer { clear:both; padding:20px 0; background:red url(/images/footerBG.gif) repeat-x top } HAAAAALLLLLPPP thanks m Hi, Im not sure whats going wrong with this, but I have two DIV elements on the page: 1st div "googleMap" CSS for googleMap: #googleMap { height: 300px; width: 500px; float: left; } 2nd div "page_right" CSS for page_right: #page_right { width: 300px; clear: left; float: right; } Could someone please tell me why page_right DIV is not clearing the googleMap div? I've just about had enough so hope some kind person will no the answer!! Here is the live page (showing the flaw): belvoir-mortgages.co.uk/contact.php Thanks Lee Hi, I have a problem with the following page, basically the second album blocks (labelled "2006, Carnival") won't start until the navigation menu on the left has finished: http://www.realsteel.org.uk/photos/ The following page suffers a similar problem, with the address not starting until the navigation menu on the left has finished: http://www.realsteel.org.uk/contact/ in this case I thought I could fix it by removing the clear on .contact_system .area but then this broke the formatting of the address. Can I apologise in advance for the poor shape of my CSS and XHTML, I'm in the position of not having anything enough time to spend on this aspect of the project. I find that I only get to work on the CSS / XHTML side of things every few months or less, consequently each time I look at it I've forgotten what I learnt the last time and am back to square one. I also find that I don't know why I did what I did the last time! I hope someone can find it in their time to assist! All constructive criticism is very much welcome, whether to do with the above problem or not. Thanks, Geoff Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! Hi gyus! I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed. All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned) I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server) Code: <?xml version="1.0" encoding="UTF-8"?> <!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> <title>Testing</title> <link rel="stylesheet" type="text/css" href="test.css"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8;"/> </head> <body> <form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8"> <div> <label for="audio_level">Audio Level:</label> <input type="text" id="audio_level" value="0"/> <label for="audio_level1">Audio Level:</label> <input type="text" id="audio_level1" value="0"/> <label for="audio_level2">Audio Level:</label> <input type="text" id="audio_level2" value="0"/> <label for="audio_level3">Audio Level:</label> <input type="text" id="audio_level3" value="0"/> </div> </form> </body> </html> And the CSS: Code:
body {
width:800px;
}
label {
display:block;
float:left;
clear:left;
width:100px;
text-align:left;
}
input {
display:block;
float:left;
width:100px;
}
Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary? I can't figure out what I am missing to get the one label/input per "line" Hey guys...I'm having a problem with the clear property in firefox adding a large space between a float element and the element that is being cleared. The code is below: HTML Code: Code: <body>
<div id="header">
<div id="topAd">
Top ad - Premium Placement
</div>
<div id="logobox">
<div id="sitestats">
Stat 1: stat<br />
Stat 2: stat<br />
stat 3: stat
</div>
<img src="images/logo.gif" alt="Logo Image"/>
<div id="topnav">
this is the top navigation
</div>
</div>
</div>
</body>
and the CSS Code: Code: body,form,ul,li {
margin: 0px;
padding: 0px;
font-size: 9pt;
font-family: helvitica,arial;
color: #333;
}
#header {
display: block;
border: 1px solid orange;
}
#topAd {
display: block;
background-color: #333;
color: #FFF;
text-align: center;
}
#logobox {
display: block;
vertical-align: bottom;
border: 1px solid green;
height: auto;
}
#sitestats {
float: right;
font-size: 8.5pt;
border: 1px solid yellow;
height: auto;
}
#topnav {
clear: both;
background-color: #333;
color: #FFF;
text-align: right;
padding-right: 0.2em;
}
Now this code works fine in IE, but in Firefox, the cleared element seems to get a very large space between the float and the cleared element. Any help would be appreciated. ...I am having a problem with images, they display correctly in mozilla firefox (i.e above the text) but incorrectly in internet explorer. I think it may be due to the float and/or clear functions or maybe the z-index function. here is the htm file... http://www.ajc.kwmaher.com/teebs/...and here is the css file http://www.ajc.kwmaher.com/teebs/style.css . Help appreciated. Teeb(s) Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. Hello, I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div. I have tried a couple of things, here is the page I'm working on and this is the css file This hasn't been tested on Windows, so I have no idea how it looks. It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack. The current setup of the page is this: HTML: Code: <div id="content"> <div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div> <div class="image1"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="image2"> <img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p> </div> <div class="another3"> <img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150"> <p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla consectetuer.</p> </div> CSS: Code: img.left {
float: left;
border: solid 1px black;
padding: 10px;
margin-right:10px;
margin: bottom: 10px;
}
img.right {
float: right;
border: solid 1px black;
padding: 10px;
margin-left:10px;
}
.image1 {
border: red 1px solid;
padding : 0px;
}
.image2 {
border: orange 1px solid;
padding : 0px;
}
.image3 {
border: blue 1px solid;
padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.another {display: inline-table;}
/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */
/* .clearer {
clear: both;
} */
p.red {
color: red;
}
p.orange {
color: orange;
}
p.blue {
color: blue;
}
Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either. Is there a solution? i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;") in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc any thoughts or anything that could help would be apprciated... regards I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb I posted this query over at webdeveloper.com but nobody has offered any working suggestions for a solution, apologies to those who read it there as well. Basically I have a 2 column layout with a header div containing a floated tabbed navigation bar. The page. The css. As you can see the big red background on my right hand column goes all the way to the top of the page rather than staying below the tab bar. How can I get it to stay beneath the header and not start after the content ie. not clear it to the bottom? I have a css site which is structured as following: <head> <body> <div id="container"> <div id="header"></div> <div id="navigation"></div> <div id="leftmenu"></div> <div id="rightmenu"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html> #container{width:100%;height:100%;} #header{height:105px;width:100%;} #navigation {width:100%;} #LeftMenu { position: absolute; width: 150px; top: 145px; left: 2px; height: 553px;} #RightMenu{ position: absolute; width: 220px; top: 145px; right: 2px; height: 553px; } #content{ margin: 20px 225px 5px 155px; height: 550px; } My main problem is that when the left menu or right menu content increases it overflows the container and goes above footer. how can i make leftmenu, content and right menu when one is increasing all to increase together? Cheers I have this problem on 2 sites I'm working on. I can't seem to nest 2 divs in a content div to create a 2 column layout. In FF it seems to work fine but IE is pushing the left column content down below the right column content. I've tried many things and I'm stuck. Am I going about the whole concept the wrong way or is there some small hack I'm missing somewhere? Any help would be great. link Thanks, Brad I took the faux column idea, and from it created a left and right border image for my site. The following CSS from Dan Cederholm's faux column article on ALA is what I used, which is below.. Code:
/* image width is 760px, with one px on each end leaving 758px for the content area */
body {
background-image: url(images/bgborder.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
To test to make sure it worked well, I placed a content div on the site, which is centered and has a background color, to test to make sure the border image worked as it should. This is below... Code:
#allcontent {
width: 758px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
background-color: #ccc;
}
In FF this works great, but I found a bug in IE (as usual ) that I can't figure out. In IE 6.0, when the window is resized, the background from the content that should be inbetween the border image actually overlaps the image on the left hand side. I can't think of anything that would trigger this, has anyone ever run into it? If not, does anyone have any idea why it happens? -B Yep, there's another multiple column problem! I'v created this website to give an example of my problem. As you can see, the #left and #content seem to ignore the border of the #navigator and slip right over it. This problem appears only in IE, in Mozilla there's no problem at all! What is happening? Here's the CSS stylesheet I'm using: body { text-align: center; } a { font-size:12px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#FF0741;} a:visited {color:BDD131;} a:hover {color:white;} #container { margin-left: auto; margin-right: auto; text-align: left; width: 90%; margin: 10px auto; font-family:verdana; font-size:12px; background-color: #EEF3C9; color: #FF0741; line-height: 130%; } #Header { padding: 0; background-color: #EEF3C9; border-style:solid; border-color:#BDD131; border-width:1px 0px; } #navigation { border-style:solid; border-color:#FFFFFF; border-width:3px 0px; text-align:right; font-size:20px; background-color:#BDD131; margin:0; padding:0; } #navigation li { display:inline; padding:20px; margin:0; } #navigation li a:hover { color:white; } #Left { float: left; width: 200px; height: 400px; margin:0px; background-color:#BDD131; } #Content { width: 550px; background-color:#EEF3C9; margin-left: 210px; margin-top:10px; padding: 40px 0px 0px 40px; } #End { clear: left; margin: 0; padding: .5em; color: #FF0741; border-style:solid; border-color:#FFFFFF; border-width:3px 0px; background-color: #BDD131; } |
|||||||