Results 1 to 4 of 4
Mar 27, 2005, 21:02 #1
Background disapears with float left
Why does my background, should be a blue line across the top, that I have set for a div (#divHeader) disappear when I set the image inside it to float left?
My css for divHeader:
I have another image I want to place inside the divHeader to float on the right side. This is why I am setting it up this way. If I remove FLOAT from the css the background shows up fine.
Also why I am at it,
If I try to place another div under divHeader it moves up next to the image that floats left. I do not understand this. The divHeader is not set to float left, the image inside it is. So why would a div placed below divHeader move up next to the image?
Mar 27, 2005, 21:25 #2
The float:left, by defualt, is placed in the top left of the containing element.
You can set it to position:relative, and move it down enough to allow the background to show.
As for floating an element below #header, with a floated element in #header, you shouldn't have any problem, as long as you have it all in a container div, the lower float should line up with the bottom of the #header div, providing you have enough hight for the header div to clear the contained float. Turn the border on and check it.
Mar 27, 2005, 21:30 #3
I got the top part working, when you float an image, you take it out of the element in that the elament will collapse to its mini. (it is no longer being held open by the height of the image since the image is now set to float) So I had to go into the css and set divHeader to the height of the image. This pretty much fixed everything.
Mar 27, 2005, 21:49 #4Originally Posted by htown
Also, you might want to check how it displays in other browsers, such as FF.
If the height of the #header is set to the height of the contained float, it might cause the float below to float only to the right side of the above float.
To solve this, give the below float a clear:left.