0

Hi everyone :).

Strange situation with this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
  <div align="center">
    <div style="width: 500px; background-color: blue">
      <div style="width: 200px; float: left">
        <p>Some text.</p>
      </div>
      <div style="width: 210px; float: right">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/DuskyDolphin.jpg/220px-DuskyDolphin.jpg" alt="Dolphin">
      </div>
    </div>
  </div>
</body>
</html>

Display in IE (9) is OK, in Chrome is problem.

Where is mistake? Thanks a lot :).

4
Contributors
5
Replies
6
Views
4 Years
Discussion Span
Last Post by OrangeTree
1

What is the problem?
One problem i can see is that u've not cleared the float, so you wont be seeing the blue background color of the container div.

0

Thanks. Which div should I cleared, please?

Edited by OrangeTree

1

You need to add a height to the div for it to show the background-color in Chrome & Firefox.

Alternatively, you could add the following after the div containing the picture of the dolphin. <div style="clear: both;"></div>

Here is a link which explains the use of float and clearing: Click Here

Edited by mongoose25: Found better example & reference | Fixed Link

1

Another way is set the blue color div with overflow: hidden;
But this way, if there is any overflow items especially the absolute positioned one, it will be hidden.

This question has already been answered. 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.