Css Floating Trouble cant get a background color

I want #nav_info to have a background color

div#nav_info         {background:#000055; color:black;}div#nav_info p#breadcrumb    {float:left;}div#nav_info p#date  	{float:right;}

But it doesnt show the background like i want, and id like to avoid as much as i can nesting into another div, does any body know how can i do this?

If i put each paragraph a background color, it only shows for the part of the text they actually occupy in their own space, it leaves white areas between them...

This is the xthml:

<div id="nav_info">
<p id="breadcrumb">Usted está en: <strong>Inicio</strong></p>
<p id="date">Viernes 13 de Octubre de 2006</p>
</div>

Thanks in advance!

What browser are you using for this? I also have trouble with floats using older IE.I'll check some 'floats' I use and post back later.

Im practically today only checking it with IE and my beloved Foxy Browser (firefox)... But yesterday i was using opera too... By the way, the background color and the text color are both dark, i know, but the background color does not show, im sure it has to do with the floats... just dont know where...Thanks jlhaslip...

Here is how I would add background color to a 'floating' element:

 

<div style="padding: 2px; float: right; font-weight: bold; font-size: 18pt; font-family: georgia; background-color: #ffffff; color: brown;">Web Site</div>

This is in-line styling.

 

For use in an Html document on a class, the html and style sheet entries would become something like :

 

html on your page:<div class="back-colour">Web Site</div>and the css in your syle sheet file:.back-colour div  {padding: 2px; float: right; font-weight: bold; font-size: 18pt; font-family: georgia; background-color: #ffffff; color: brown;}

I didn't test the css and class, only the in-line.

I think it will work as displayed, though.

My ff browser is not available (hasn't been since I did a win98se re-install. It has no Internet connection).

 

I checked it inline with IE and it worked.

 

lozbo,

 

Clear your cache?

 

Or add this meta tag to the html page until you have it behaving properly.

 

<meta http-equiv="expires" content="0" />

This meta tag should expire this entry in your cache so the next viewing will show the changes you entered. Otherwise you run the risk of picking up the prior version which will not include your altered html or css.

 

Delete the meta tag from the html page after you get the coding correct, or the page will never cache.

 

Hope this helps.

 

Edited October 26, 2005 by BuffaloHELP (see edit history)

Does not help, either clearing cache and coding the solution, which dont has to do a lot with what i was doing:A div with two paragraphs inside, one is floated to the left and the other to the right. The solution you propose has only one div and floated to the right, not sure what principle can i apply that differs from what i already have, becouse that div should have the background, but the other div that is floated against it? And its not actually a div, its a p, i would like to do this with as less of divs as i can...Thanks!-10730

Using a <p> tag will only let you add background color to the areas where there is text, because that is all that a <p> tag affects. I am assuming that you want to make the container in which the text is have a background color. In order to do that, you will have to use a <div> tag or another type of container tag (i.e., tables)...Hope some of this helps!!

Alright... I changed the p for div and it still doesnt work (and i left those paragraphs as anonymous, without living inside a p and its still valid...strict xhtml) But i dont know... i think it has to do with the floating...Yes, if i remove the second div the float:right, it shows my background color, let me see what i can do about this, ill try changing the alignment, the text-align property... Thanks! I will have to use divs anyway... but at least it workx ^_^ADDITION: But id like still to know if anyone could help me out with this... if some one knows how to achieve the background issue without using more divs, its most welcome... Thanks!

Edited October 26, 2005 by BuffaloHELP (see edit history)

Your problem is that floated elements are taken out of the normal flow of the document which means their containing elements don't actually see that they're there (this is the case in browsers that support the specs properly like Firefox - IE will incorrectly expand to contain floats).
You need to clear your floats.

My floats are cleared beyond this, its only floated for the element itself, whatever is under it is cleared so it doesnt stay floated...

My floats are cleared beyond this, its only floated for the element itself, whatever is under it is cleared so it doesnt stay floated...

198310[/snapback]

Eh?

p#breadcrumb and p#date are both floated right? That means that the container that's holding them (the one with the background colour) won't expand to contain them.

or add the background colour to the floated elements and have each of them share the screen width. Like this:

<div> <span style="float: left; width: 50%; background-color: #fff000">  left  </span> <span style="float: right; width: 50%; background-color: #000fff; text-align: right;">  right  </span> <p style="float: left; width: 50%; background-color: #000fff">  left  </p> <p style="float: right; width: 50%; background-color: #fff000; text-align: right;">  right  </p> <span style="float: left; width: 50%; background-color: #fff000">  left  </span> <span style="float: right; width: 50%; background-color: #000fff; text-align: right;">  right  </span> </div>

It worked with both paragraph and span tags when I checked it. Not certain what you will see in your browser, though. Might have to reduce the width a bit. Like 45% or something, depending on how the page margins are set for the rest of the page and how you want it to look.

No, one is floated left and the other is floated right, well that was before, now i changed the p for div, and only left the p#breadcrumb floated left and the other div just aligned right (text-align:right).And now it shows the background, and it does expands to contain them... In other words it got fixed, but by adding adicional divs, though i wanted to avoid it...Tyssen what i meant is that i had the next div with a rule that set it to "clear:both" so that it wont float anymore, and the normal flow of the document continues without floating...

The solution you propose has only one div and floated to the right, not sure what principle can i apply that differs from what i already have,

-10730

198291[/snapback]

Lozbo,

 

 

We are only trying to assist you with this problem. Often the answers provided will give you enough information for you to help yourself. One of the best learning techniques is to "seed" an answer and have you find the balance of the solution. Learning by researching the topic and doing it yourself is a better lesson learned. Given the small amount of information in your first post, I thought you would be able to complete the answer based on the information I had given. Apparently not.

 

Does my last reply help? The one with the span tags? Or maybe I am not understanding what it is that you are asking?

jlhaslip, im sorry i meant no offense, i am all the way working, i mean, while working in the file itself, i was seeking questions i was trying different things, just wanted to make clear that i did not see a pattern or something that i didnt know that actually helped me, not saying that you dont know, what i meant is that that particular thing didnt helped me to fix the particular issue, but i do apreciate everyones help and i know that im not only meant to sit back while some one does the job for me (though some people are willing to do so, and even i would offer that help if i can for other member)...I do apreciate your help and everyone elses, meant no offense... Im still working in it, just having difficoulties and sharing them here... Your other post about the span tags was also helpful, thanks ^_^Im not as good as id like to be, im trying and actually im learning.. and i thank you for helping me, i would only ask not to desperate with my questions ^_^Now i have a new topic with the same trouble, at least the 'pattern' and i havent figured it out...-10730

Tyssen what i meant is that i had the next div with a rule that set it to "clear:both" so that it wont float anymore, and the normal flow of the document continues without floating...

Sounds like an awkward workaround. I'd want to get a better look at your page with it's CSS & HTML - refer to the PM I've sent you.