Forum Moderators: open
Any ideas?
Need to see the code geezer! But have you tried puting a clearing div under the floats?
<div style="clear: both;"></div>
Nick
Here is some of the CSS:
body {
background-color:#fff;
margin: 0;
font:900 14px arial;
color:#000;
height:100%;
}
#main{
border:1px solid #048;
margin: 0 5px 0 154px;
height:100%;
}
#menu{
border-right:1px dashed #048;
border-bottom:1px dashed #048;
float:left;
width:190px;
padding:3px;
text-align:right;
}
#text{
float:right;
padding:30px;
height:80%;
}
.important
{
font:italic 900 20px arial;
text-align:center;
}
The HTML looks like this:
<!--
****************************************
*********DIV FOR MAIN CONTENT***********
****************************************
-->
<div id="main">
<!--
****************************************
*************DIV FOR MENU***************
****************************************
-->
<div id="menu">
<p><a href="index.html">Home : :</a></p>
<p><a href="consulting.html">Business Consulting : :</a></p>
<p><a href="seminars.html">Professional Seminars : :</a></p>
<p><a href="contact.html">Contact us : :</a></p>
</div>
<!--
****************************************
***************MAIN TEXT****************
****************************************
-->
<div class="important">C.E. Wilson takes an energetic approach to helping people and organizations develop their vision through professional consulting and business process design.</div>
<div id="text">
<h1>About Us</h1>
<h2>Our Purpose</h2>
<p>Our challenge is to provide people and organizations the direction to create their vision.</p>
<h2>Our Mission</h2>
<p>Through networking, life planning, mental and spiritual inspiration, women will envision and mold their own life. Women will engage with other successful women who are on the road to success; learn from them, teach one another, and remain a successful woman. Through our <a href="seminars.html">professional seminars</a> and workshops, we bring a vibrant, energetic, and reliable arena to bring about change in each person’s life.</p>
<p>Through authentic solution offerings, business research and design our business clients will be able to set challenging yet crucial milestones for their organizations. These milestones will be mapped and, designed with our client’s unique vision in mind. Through <a href="consulting.html">business consulting</a>, we will define and accelerate change necessary for competitive advantage throughout the entire enterprise in the capacity of Project Management, Human Performance, and Business Process Development.</p></div>
</div>
OK I left a lot of text in so you could see the effect. I didn't include all my styles for the headings, paragraphs, links, etc. but this should give you the lay of the land.
Thanks
PS If it would be easier I could sticky anyone the URL.
Nick
Have fun!
Nick
I quickly glanced through the code and I couldn't readily see what you changed. IE looks the same as before and NN looks much better.
Thanks
I don't understand the logic behind that, is it just a work around for bad CSS handling of the browser or did I code it wrong?
The float property is a real PITA sometimes, and I'm sure your problem is one that other people may have and be interested in learning about...
Incidentally, have you decided to drop NN4 support for the site, or do you have an alternate stylesheet for NN4? Float doesn't work for anything in NN4 in my experience.
NN6 the floats are larger than the main div and are outside the div.
With the rules on posting urls sometimes that can be a little hard Mivox. In fact, I've seen people told to post in their profile many times so that's waht we did?
Nick
[edited by: Nick_W at 7:47 pm (utc) on Aug. 15, 2002]
The empty div thing just clears all the floating elements before you close the container. Which has the effect of restoring flow and making the div appear to close after the elements...
Nick
[edited by: Nick_W at 7:49 pm (utc) on Aug. 15, 2002]
The right and left floats work in both browsers. The problem is the div that contains the float divs doesn't display correctly in NN6.
This main div that contains the floats is supposed to draw a border that encompassed all the content. It only draws around the text in NN6 and the floats overflow the border. Check out the link in my profile in IE and NN and you will see.
I added the <div style="clear: both;"></div> in the same location you did and the left float is looking good but the right float is still overflowing the main div. Did you change anything else in the html or css?
The main point to my post is that a thread consisting of "check the link in my profile" "OK, now check the link in my profile" "OK, thanks... I think that works" really isn't helpful to the rest of the forum members at all.
Adding an in-thread explanation of what coding caused the problem, what the solution was, and why it worked makes for a better discussion all around.
:) Cross browser support is a very important and complex issue, and good on-board coverage of the odd little details involved is a help to everyone on the board.
I'm a bit of a hack I guess, I kinda know what should work and why but I very often have to delete lines and add bits on pure "hunches" to get it working....
Nick
Apparently the right float (the #text in the code above) wasn't necessary and was removed.
Now the floats work but I still need to get the divs to line up (the #main and the #leftbar divs)horizontally across the bottom
Thanks for all your help
[edited by: pcguru333 at 8:15 pm (utc) on Aug. 15, 2002]
The only reason why I keep saying to check the profile is because I have explained the issue twice and I wanted to give you a visual if my explanation wasn't explicite enough.
I had a devil of a time getting a float:right div containing a photo to line up with page text over the weekend. What I ended up doing was taking the entire floated div, and moving it up a couple lines in the html.
For some reason, when the floated photo div was actually inserted in the html two lines above where I wanted the top edge of the photo to be, it actually appeared in the right place... when I had the div inserted in the code exatly where I wanted it to appear on the page, it showed up too low in the layout.
Does that make sense? Can you move one of the divs up (or down) a couple lines in your html, to see if it affects its on-screen appearance?
[webmasterworld.com...]
I'd imagine it would be covered in depth in the specifications.
[edited by: Marcia at 8:41 pm (utc) on Aug. 15, 2002]
In NN my left div is 40% longer than the right div.
Id I could get IE to look right at this point I would be happy :)
Can you move one of the divs up (or down) a couple lines in your html, to see if it affects its on-screen appearance?
No. Definately not.
You must have changed something else by doing that. Margins and padding either on the div, its photo or another element such as p h2 etc outside the div will all affect it....
Nick
Thanks
Y'know, if browser programmers could just program the #$(&(* browsers to all follow the same margin/padding display rules, I have a feeling these things wouldn't be a problem.
You must have changed something else by doing that.
Nope. All the re-arranging took place within the same 'content' div, with no difference in applied padding, margins etc. from one position to another.
Basically, everything inside the 'content' div had 10px padding applied, causing my photo (nested within the content div, in its own float:right div) to appear 10px lower on the page than I expected. By moving the float:right div up two lines into the preceding <p> of text, I visually compensated for the 10px padding, without having to add extra code to exclude the float div from the existing padding rule.
I thought if div padding/nesting was an issue on his page, the same trick might work.
Can you move one of the divs up (or down) a couple lines in your html, to see if it affects its on-screen appearance?
Actually, you can if your float is contained within a positioned <div> and written into code between paragraphs or other elements within the same parent <div>. I am using <div>'s as an example since that is what the thread references.
I do this all the time. The key is the parent <div> which has either position:absolute or position:relative assignments. Remember, once your assign positioning, the <div> is removed from the normal page flow, but also - becomes a self-contained element that has "body-like" properties when it comes to elements contained within.
The positioned element now controls the boundaries, paragraphs, images and even floating divs take the que from the parent div as if nothing else existed.
Begin populating your positioned <div> with other elements and normal flow will ensue... Begin with a heading, then a paragraph or two; add a floating div and then more text.
Just as you can position an image by moving it up or down within the code, a floating div can be maneurvered in the same fashion. The only difference is, an <img /> can be placed within a paragraph since it is treated like inline text. Place your floating <div> before, after or in between paragraphs.
[edited by: papabaer at 9:37 pm (utc) on Aug. 15, 2002]
You moved it up into a <p> block, right?
Nick
Then, I had to come up with a whole bizarre @import hack to make the image disappear entirely for NN4 users, because NN4 doesn't handle the float property. It's in the right place for both Opera and IE on Mac & Windows now... and NN4 users just see a slightly simplified version of the whole site.
Presuming I now understand correctly, that's not a css thing, it's just plain html....
Nick
The photo was supposed to appear right-aligned next to paragraph "b", but actually appeared partway down the side of the paragraph. When I moved the image code into paragraph "a", the photo actually rendered properly aligned with paragraph "b".
Nothing CSS-specific about rearranging your HTML... the suggestion was simply that if your problem happens to be misaligned divs or other page elements, re-arranging the order of the elements in the HTML out of their most 'logical' position in the code could help.
a. a little tweaking or
b. an insertion to clear the float would
have solved this issue. Have you tried the page at very high rez? It may not look as it should in different environments...
When you float an image you take it out of the natural flow and all manner of wild things can happen, as you've seen.
One of the more bizzare things is the 'left side collapse' bug in Mozilla based browsers that means (and I forget the exact circumstances) that your right aligned image can actuall cause the parent divs left margin to collpase leaving you in a dreadfull mess!
The fix is just as bizzarre: Put an inline element just before the clearing div. Like a   :: Wierd but true ;)
Nick
