2 replies [Last post]
eZe616
eZe616's picture
Offline
Enthusiast
Aruba
Last seen: 13 years 22 weeks ago
Aruba
Timezone: GMT-5
Joined: 2007-02-23
Posts: 52
Points: 0

I just don't get it. How come the the div isn't wrapped around the pic and such? I'm I wrongly using the float element?

What's wrong with this code:
http://eze.110mb.com/tests/bhome.php

HTML:

Home Pic

  • Price

  • Adress

  • Country

CSS:

.add { width: 350px;
margin: auto;
border: 1px dotted #ccc;
}

.add img { margin: 1em;
display: block;
float: left;

}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Because that's how floats

Because that's how floats work. A floated element is taken out of the normal document flow and is not supposed to be enclosed by it's containing element. Gary Turner's site explains this well, and also shows you how to enclose them.

This catches about 100% of everyone when they first try to use floats, so don't feel alone. It is probably the single most often asked question at this site! The simplest way to enclose a float is either to float the container itself as well, or to give an overflow rule to the container.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

eZe616
eZe616's picture
Offline
Enthusiast
Aruba
Last seen: 13 years 22 weeks ago
Aruba
Timezone: GMT-5
Joined: 2007-02-23
Posts: 52
Points: 0

mmm, that explains alot of

mmm, that explains alot of problems I've been having with float elements. tnx for the link.

edited: Figured it out. Keep forgetting about margins and paddings, that the browser put on the ul and li for default