styling af div

Forstår ikke rigtigt dit problem?

mit div har en højden på indhold hvis jeg ikke bruger float

men hvis jeg bruger float bliver mit div i højden 2px

hvor jeg gerne ville have at den stadigvæk føler højden på mit div efter indholdet

Der skal nok noget kode på bordet.

<style type="text/css">
#ulnav{
    border:1px solid #000;
    display:block;
    margin:0px 0px 0px 0px;
}

#ulnav ul{
    margin:0px 0px 0px 0px;
    padding:0px;
    list-style:none;
}

#ulnav li{
    padding:0px 0px 0px 5px;
    float:left;
}

#ulnav li a, #ulnav li a:link{
    border:1px dotted #999;
    display:block;
    padding:8px;

    color:#012b50;
    font-weight:bold;
    text-decoration:none;
}

#ulnav li a:hover{
    color:#000;
    background-color:#ddd;
    border:1px dotted #000;
    text-decoration:none;
    font-weight:bold;
}
</style>

<div id="ulnav">

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
</ul>

</div>

hvis du fjerne float vil du se at den holder sig inde for divet

et floatet elementer fylder ikke noget - det kan du løse fx ved at lægge et element ind efter dine floatede elementer med clear: both; på og ellers kan du sætte en bredde på din parent div og sætte overflow: hidden;

jamen er det så ikke bedst af slutte med clear:both; frem for at skjule resten af indholdet i et div??

nu fristes jeg næsten til at sige at du her viser står mangel på viden og forståelse for HTML og CSS - nej, det er ikke bedst at afslutte med et element med clear: both da det i HTML altid gælder om at have så få elementer som muligt og at lægge et sådant ind med absolut intet indhold og ingen anden effekt end et hack er oftest spild - at benytte overflow: hidden er klart bedst og vil kun skjule noget indhold hvis du sætter en fast både højde og bredde på din div.

Men du skal have et stort TAK her fra for dine indlæg, de gav stor hjælp frem ad for mig

<ole>

- og når vi nu har den fremme, så anses float med god grund af et stigende antal udviklere som værende tabellens afløser som HTML's mest misforståede/abused feature  *o)

Float er fint, når man f.eks. skal lave tekstomløb omkring et billede, men når man gerne vil have elementer til at ligge ved siden af hinanden, bruger man jo bare inline-elementer - f.eks. SPAN. Det er helt elementær HTML.

Hvis de elementær, der skal ligge ved siden af hindanden skal indeholde block elementer (f.eks. DIV, UL, el.lign.), vil det dog skabe problemer, hvis de er inline elementer (inline elementer kan som bekendt ikke indeholde block elementer).

Netop derfor har W3C begavet os med værdien inline-block til CSS-property'en display:


display:inline-block gør, at elementet opfører sig som inline element udadtil - men som block element indadtil.

/mvh
</bole>