Member Avatar for Lolalola

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
  • 69 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by drjohn
Member Avatar for drjohn

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 because: n/a
Member Avatar for Lolalola

Sorry, for "left_b".
I forget change.

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

Member Avatar for drjohn

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.