Member Avatar for OrangeTree

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
  • 188 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by OrangeTree
Member Avatar for ckchaudhary

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.

Member Avatar for OrangeTree

Thanks. Which div should I cleared, please?

Edited by OrangeTree
Member Avatar for mongoose25

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 because: Found better example & reference | Fixed Link
Member Avatar for lps

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.

Member Avatar for OrangeTree

Thank you for all replies :).

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.