border on <div> of float:right not working...

This is because floats act a bit like absolutely positionned elements, they are removed from the normal flow, but unlike absolutely positionned elements, they act on the elements in the flow like rocks act on water in a river...this is why your containing div acts like that, the div doesn't see the floated elements anymore because they are not in the flow, the div just sees the text that flow around them, and adjusts its height accordingly without taking into account floated elements...I hope I'm clear...

Talking about clear, there is a property you can use to solve your problem : the clear property. When you set the clear property of an element to "right", it means that this element will be positionned in a way that there aren't any floated elements on its right side. If you set this property to "both", it means that it will be positionned so that there aren't any floated elements on both sides. The important thing to notice is that such an element with clear: both; is still in the flow so the container div includes it, unlike floated elements.

So all you have to do is placing in the flow an element with the clear property set to "both" at the bottom of your containing div. Like this :

<div>
  <img src="..." style="float: right;" />
  
  <p>qsdfq qsdfqds fqs fqsd</p>

  <div style="clear: both; line-height: 1px; font-size: 1px;">&nbsp;</div>

</div>

This is the simple but unelegant way to do it. For a better but more complicated solution without additionnal markup, see here : http://www.csscreator.com/attributes/containedfloat.php

How about adding a float:left; to the div #lead?
That does it in FF but who knows how IE will take it...

You could also just increase the padding-bottom to something like 150px but that's kinda silly IMHO

it's still not in the parent <div> #content's border (at least I think it's the parent). big mess in ie6 too.

kira80: I understand all the float/clear:both stuff, but to summarise your solution, is it: put an empty div after my <p> and then put clear:both on it? hrm. will try it asap. however, time to give my daughter her bath. will report later.

oh brother (re: float prob, not my daughter!)

larmyia

Whoa... the page has changed since I looked last...
The following works in FF...based on how I THINK you want the page to look.. but who knows about IE... if I get a chance I'll download your code instead of just working with the web developer tools...

add this to #content
float:left; position:relative;
border-bottom:0 none;

change #footer to be clear:both;

thanks rmfred. could you pls explain what "border-bottom:0 none;" does. actually works in IE which makes me think I'm doing something wrong as there is no gap between #wrapper2 and #wrapper3. I will have to fiddle about with it...but after dinner.

any chance of getting the dashed border at the bottom of the two articles to line up the same, or will I have to define the height of the div to do that?

thanks

larmyia

Well.. since you had borders on content and footer you were getting a double border at the bottom of content which I didn't think looked very good so the border-bottom:0 none; got rid of that. However, I didn't realize that you want your header, content and footer to have a gap between them.

Again, this is only tested in FF but you could do this...
remove the padding-bottom from #thirdpara and change the padding-bottom in #secondpara to 17px

Personally, I think you are going about this the wrong way? I'll have to take your code and play around a bit to make sure, but it appears that you are working harder not smarter on this layout (no offense intended) with all of your wrapper classes?
Couldn't you just create a wrapper for the page, then create your header, content, footer divs that have a border and a margin-top on content and footer to create the gap between them?

What I envision you want for the page is a header with borders, a content area with borders, and a footer with borders with a gap between all three areas... is this correct?

I've downloaded your code and pics and will take a stab at it if you would like me to.

Hope this helps

I've downloaded your code and pics and will take a stab at it if you would like me to.

Hope this helps

that is correct. I'd really appreciate your help. I'm getting in a real muddle with it. I felt like I had too many divs, but everything I tried didn't work.

many thanks!

larmyia

okie dokie, I have gotten over my case of "divititis" and gotten rid of most of the <div>s. However, I am still unsure of the best way to get the floats to stay within the border of the #content <div>. I can't seem to find any tutorials/articles regarding this.

any help apprecaited as am desperate and confused.

larmyia

ps ignore background colors - there to help me only.

I am new to this css, so maybe I am not correct in this. Looking at your code:
1. the image in html should be moved below the h1 otherwise it floats to the right of the h1 "Learning the skills......."

2. the #lead is floated left but the image in it is floated right so that takes them both out of the flow and your #content doesn't even start until the #secondpara. It seem to work ok if you take the float left out of the #lead and just let the image float right of the text. That will put the text back in the flow and the image will float to the right of it.

I am not sure if this is what you are looking for but I hope it helps.

larmyia;
Quick and dirty layout for you. If you would like me to continue working on this let me know.

<!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>SNU - Social Policy Into Practice</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
body {
    font: 11px verdana, arial, helvetica, sans-serif;
    text-align: center; /*IE centering hack*/
    }
 
/* Set all elements to 0 padding margin and border */
* {padding:0;margin:0;border:0;}

/* page holder */
#container {width:800px; background:#fff; color:#999;
 margin:20px auto;/* center for compliant browsers*/
 text-align:left;
 padding:2px 0;}

#header {float:left; width:760px; 
    border: 1px solid #999;
    padding: 5px 20px 15px 20px;
    }     

#logo {
    padding: 0 10px 10px 0;
    }    

#rightpic {
    padding: 0 0 10px 10px;
    } 

/* div:nav - main navigation */      
#nav {
    width: 100%;
    float: left;
    background: #339900;      
    }
    
#nav ul {                     
    padding: 0;
    }
    
#nav ul li {
    display: inline;
    }
    
#nav ul {
    color: #fff;
    font-family: tahoma, verdana, arial, sans-serif;
    font-size: .85em; 
    letter-spacing: 2px;
    font-weight: bold;
    }                  
    
#nav ul li a {
    padding: 0.2em 12px;
    background-color: #339900;
    color: #fff;
    text-decoration: none;
    float: left;
    border-right: 1px solid #94b473;
    }
    
#nav li a:visited {
    color: #ffcc66;
    text-decoration: none;
    background: #339900;
    }      
    
#nav li a:hover {
    color: #fff;
    text-decoration: none;
    background: #006600;
    }    
   
/* current page */    
body#index li#navindex a,
body#about li#navabout a,
body#services li#navservices a,
body#projects li#navprojects a,
body#downloads li#navdownloads a,
body#jobs li#navjobs a,
body#links li#navlinks a,
body#contact li#navcontact a
    {
    color: #fff;
    cursor: default;
    background: #006600;
    }  

#content {
    float: left; width:800px;
    border: 1px solid #999;
    margin:5px 0 5px 0; 
    }  

#footer {width:800px;
    clear:both;
    font-size: 80%;
    color: #ff6600;
    text-align: center;
    border: 1px solid #999; 
    padding:10px 0 10px 0;
    } 
-->
</style>
</head>
<body id="index">
	
<div id="container"> 	
<div id="header">
  	
<img src="logo.jpg" id="logo" alt="SNU logo of a Bee" /><img src="flower.jpg" id="rightpic" alt="Picture of red poppies" />

<div id="nav">
  	  <ul>
  	  	<li id="navindex"><a href="index.html">Home</a></li>
  	  	<li id="navabout"><a href="about.html">About</a></li>
  		<li id="navservices"><a href="services.html">Services</a></li>
  		<li id="navprojects"><a href="projects.html">Projects</a></li>
  		<li id="navdownloads"><a href="downloads.html">Downloads</a></li>
  		<li id="navjobs"><a href="jobs.html">Jobs</a></li>
  		<li id="navlinks"><a href="links.html">Links</a></li>  		
  		<li id="navcontact"><a href="contact.html">Contact</a></li>

  	  </ul>
</div></div>

<div id="content">
<p>This is the content div. Layout based loosely on 
<a href="http://www.orderedlist.com/demos/fne/">float nearly everything</a> method</p>
<p>All padding and margins reduced to zero. In the content div you can add in the
appropriate styling for your elements.</p> 
</div>    

<div id="footer">footer</div>

</div>
</body>
</html>

rmfred, thank you for all that! I unfortunatly haven't got time to check it out properly now. On a quick glance it looks like what I want. I need to spend some time with the code. I will get back to you with regards to how it's working.

once again thanks

larmyia

Just reading that code I am not sure. It is definitely going to be inconsistent across platform - just check the width calculations in #header. But I fear it will explode.

well I did say that it was quick and dirty.. nudge nudge wink wink
believe it or not it works in IE6 and FF... but yeah it does need some sprucing up... just haven't had a chance to get back to it yet

Well you havent used a hack but nor have you aimed off for Box Model Borkage. The two browsers will be be showing a variation of plus or minus 42 px each way in the header width. When the guy fits his fancy head graphic it is going to be all over the place - believe me.

girl

well, need some time to look at rmfred's code, the link he gave and my code and come up with the best solution.

larmyia

While I would normally agree with your assessment based on 40px of left/right padding and 1px left/right border... for some reason both IE6 and FF display the page properly and identical (other browsers I have no idea) the output can be seen here
http://www.redhorseoil.com/test/cssforum/larmyia/larmyia_old.htm

larmyia: you might want to consider reducing the width to around 760px or so in order to eliminate horz scroll at 800x600 resolution?

I will have a "new" page out there for you later today...

new page for ya to get started with
http://www.redhorseoil.com/test/cssforum/larmyia/larmyia.html

reduced to 760px wide and works in IE6 and FF

thanks so much for all the hard work! really appreciate it. just a coupld of questions: how come you have to restate the width in every main <div>? I thought if you put it in your container <div> then it'd apply to all the subsequent <div>s? no?

also, I have put in a border between .contentright and .contentleft. is it all possible to have a gap above and and below the border? similar to the border that goes from left to right above them

once again most grateful for all your help. I feel that I understand some things better now.

larmyia

I just find it better to give any floated element a specified width

Not a very elegant solution but you could do this...
.contentleft h2, .contentleft p {border-right:1px dashed #390;}
.contentleft p {height:100px;}

Seems to render the same in IE6 and FF

None needed. IE is forced into standards mode where it uses the proper box model.

cheers,

gary

I tried telling Root that in another thread - but he won't believe me :?

and he's confusing people!