0

Hi,
what's wrong with this code?
Now disappear background and div after this code show incorrect.

<html>
<head>
<style type="text/css">
#first{
	width: 200px;
	background-color: #345752;
}
#left_b{
	background:transparent url('img/left.png');
	background-position: left top;
	background-repeat: repeat-y;
}
#right_b{
	background:transparent url('img/right.png');
	background-position: right top;
	background-repeat: repeat-y;
}
#text{
	float: left;
	width: 50px;
}
#text2{
	float: left;
	width: 70px;
}
</style>
</head>
<body>
<div id = "first">
    <div id = "left_">
	 <div id = "right_b">	
	           <div id = "text">
				text 1
		    </div>
	        <div id = "text2">
	            text 2
	        </div>
	</div>
   </div>
</div>
</body>
</html>
2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by drjohn
0

html says #
<div id = "left_">

css says
#left_b

Also left_b would need a height to display the background image. (Floating the divs inside it takes them out of the normal document flow, so the div appears empty with zero height, so the background is not visible.)

Finally, there is no doctype - use a strict 4.01

Edited by drjohn: n/a

0

Sorry, for "left_b".
I forget change.

But why when i delete "float: left", everything looks good.

0

I told you, when you float things, you take them out of their normal position. The result of that is that the div has zero content and zero height, so you can't see the background. Give it a height and float or no float, the background will be visible.

When you remove the float style, it is back in the normal flow of things and the div has a height, so you see the background.

try giving the div left_b a border and you'll notice that the floated divs are outside of the div, unless you give the div a height.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.