22 replies [Last post]
larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Hey! I've checked out what I can on floats, but can't seem to find anything on this. I'm sure it's relatively simple but I've not come across it before...

have a pic floated to the right and want the border of the div to fall below it.

any advice appreciated

http://www.subtleasafish.com/test/snu/index.html

thanks

larmyia

kira80
Offline
Enthusiast
Last seen: 15 years 6 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

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

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

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

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

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;

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

Quote:
could you pls explain what "border-bottom:0 none;" does.

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.

Quote:
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?

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

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

rmfred wrote:
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

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

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

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.

peabody
Offline
newbie
Last seen: 16 years 30 weeks ago
Joined: 2005-05-09
Posts: 1
Points: 0

border on &lt;div&gt; of float:right not working...

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.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

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>

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

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

Root
Offline
Enthusiast
Brighton UK
Last seen: 14 years 43 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Box Model Borkage

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.

No class, little style and a lotta division.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

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

Root
Offline
Enthusiast
Brighton UK
Last seen: 14 years 43 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Quick and dirty

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. Smile

No class, little style and a lotta division.

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Re: Quick and dirty

Root wrote:
When the guy fits his fancy head graphic it is going to be all over the place - believe me. Smile

girl Wink

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Root - quick and dirty

Quote:
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

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...

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

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

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

border on &lt;div&gt; of float:right not working...

Quote:
how come you have to restate the width in every main <div>

I just find it better to give any floated element a specified width
Quote:
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

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Re: Quick and dirty

Root wrote:
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. Smile
None needed. IE is forced into standards mode where it uses the proper box model.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

border on &lt;div&gt; of float:right not working...

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

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border on &lt;div&gt; of float:right not working...

and he's confusing people!