Et float problem med divs

Hvorfor bruger du float: left? Hvorfor ikke blot text-align: left når du det kun er tekst, det handler om?

  // Steeven

Jamen, kan jeg godt det, når det er divs der er tale om?? Men prøver det da lige og ser hvad der sker ved det?

Har du kigget css koden?
Min footer css ser sådan her ud:
#footer {
clear:both;
float:left;
margin-left:60px;
padding-top:10px;
padding-bottom:10px;
width:800px;
font-size: 10px;
color: #7A7B7C;
}

Og der mener du det skulle kunne gøre det ved at skifte "float:left" ud med "text-align:left" i stedet for?

text-align: left venstrejusterer teksten i div-boksen. Og det er vel egentlig det, du ønsker.
Float-kommandoen benyttes mere til fx at lade billeder placere sig i venstre side, mens teksten flyder omkring.

Prøv at skrive det således:

#footer {
text-align: left;
margin-left:60px;
padding-top:10px;
padding-bottom:10px;
width:800px;
font-size: 10px;
color: #7A7B7C;
}

  // Steeven

Men default-indstillingen i browsere er jo også venstrejustering af tekst? Så linjen er egentlig slet ikke nødvendig, med mindre du har angivet andre indstillinger nogle steder.

  // Steeven

Nu har jeg lige prøvet at fjerne "float:left" helt, men det er stadig samme problem i IE, min footer står oveni teksten. Den gør det bare ikke i FF..

Hvad kan problemet ellers være?

Min div opsætning ser ud som følger, måske det kan hjælpe lidt...

<div id="Sub-wrapper">
  <div id="toplogo"></div>
  <div class="topmenu>
      <div id="topleft"></div>
      <div id="topright"></div>
  </div>
  <div id="breadcrumb"></div>
  <div class="inner-content-wrapper">
      <div class="main-content-wrapper">
        <div id="menuleft"></div>
        <div id="contenttop"></div>
        <div id="content"></div>
        <div id="contentbottom"></div>
        <div id="contentbottomtext"></div>
      </div>
  </div>
</div>

Hvorfor har du egentlig skrevet alle de float: left-kommandoer ved så godt som alle delene i CSS'en? Hvis det kun er tekst, det handler om, så brug text-align: left i stedet alle de steder, hvor der står float. Især ved formateringen af .box_1_content osv.
Prøv det...

  // Steeven

Og ligeledes især ved .main-content-wrapper.

  // Steeven

Har lige prøvet at ændre de fleste "float:left" til "text-align:left" og det smadre siden totalt, så det er ikke løsningen på problemet...

Okay...

Sidste forsøg: Du har angivet en line-height på teksten. Prøv at fjerne den.
Hvis du kigger i CSS-filen, så står der ca. en tredjedel nede på siden følgende:

.col_1, .col_2 {
    float: left;
    width: 323px;
    padding: 10px;
    line-height: 18px;
}

Her angiver du en fast linjehøjde på linjerne i teksten. Prøv at fjerne denne faste line-height.


  // Steeven

Som du kan se nu, så har jeg fjernet line-height, men det er vel stadig samme problem, at footer i IE stadig ligger over teksten i den hvide boks, og den hvide boks kan jo potentielt godt være længere end dette alt efter indholdet i den...

Jeg kan ikke se, at du har fjernet line-height? Det vises stadig på CSS'en du linker til.

Men ja, du har ret, og jeg har ikke flere gode ideer :(
Forhåbentlig er der andre herinde, der kan gennemskue problemet...

  // Steeven

Hejsa, prøv at fjerne "height" fra din inner-content-wrapper, eventuelt erstat den med en minimum height, hvis det er for at den skal have en højde. Min tanke er at højden på denne er FAST, og indholdet er længere end størrelsen, deraf problemet da den nederste stadig har position i forhold til den faste højde.
Og din "contentbottomtext" har display: block, hvilket jeg også kunne forestille mig kan give problemer, det virker som en nødløsning i mine øjne :S.

melieha: Det har jeg lige prøvet, og det eneste der kommer ud af det, er at mit baggrundsbillede forsvinder, da jeg ikke definere højden på det billede. Så det tror jeg skal være der...

kan slet ikke forstå hvorfor jeg ikke kan få den til at opføre sig ordentligt i IE.

Nej, det er mystisk. Men der er sikkert bare én bestemt kommando et eller andet sted i CSS'en, som fortolkes forskelligt i de to browsere.
Nu er det bare med at finde den...

  // Steeven

Hvis din subpage-content-wrapper ændres i højden til 1100px så kommer din "footer" i hvert fald ned under den ønskede størrelse. Jeg tror problemet ligger i at du har dine div inde i en div og igen og igen, det har jeg før bøvlet med, at hvis der ikke er tekst, billeder eller andet til fylde ud, så fejler den slags designs, og hvis du så samtidig har sat fast højde på noget af det kan det fejle helt groft.

Hvis du vælger "overflow: hidden" på din subpage-content-wrapper passer det hele også jo.

Ellers så prøv at lade din footer være inde i subpage-content-wrapper, så burde den da automatisk passe ind.

Steeven: Det har jeg prøver så meget nu, og kan slet ikke finde ud hvad det er der er galt :-(

Melieha: Nu prøvede jeg at smide "overflow: hidden" på min subpage-content-wrapper, og det gjorde så bare at teksten i subpage-content-wrapper ikke bliver vist fuldt ud, den stopper bare der hvor billedet stopper.

tlunde, ja, og din bund "passer" i forhold til det viste, hvis du vælger "auto" kommer der formegentlig en scroll i stedet for. Et eller andet sted er der en forvirring i hvad højden skal være. Har du prøvet at flytte footeren ind i varmen? :)

Hvis du rykker den 2 divs ind, så skulle den gerne placere sig pænt i hvert fald.

Som jeg ser det er du løbet ind i IE dobbelt margin bug, Læs mere om det her http://www.webdesign101.dk/showcase/float/index.php

Så prøv at sætte display:inline; på disse 3
.main-content-wrapper
#contentbottomtext
#contentbottom

Vil mene det løser dit problem :)

zips, umiddelbart ikke det problem, jeg prøvede lige at kaste display: inline på med IE Developer Toolbar, og det gjorde ingen forskel.
Det passer stadig med at footer div'en ligger præcist i bunden af inner-content-wrapper's oprindelige højde, så jeg vil stadig mene det er der fejlen ligger :)

Jeg så kun siden i IE6 og her er der dobbelt margin bug, kik selv :)

Som melieha skriver skal du flytte din footer 2 div op og slette _height: 897px;_ i _#subpage-content-wrapper_ samt sætte _background-repeat: no-repeat;_ på din _#page-wrapper #content, #subpage-wrapper .inner-content-wrapper {_

Og hvad laver denne <?xml version="1.0" encoding="utf-8"?> nede i din DTD??

Den skal ligge som her

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Men ikke alle browser kan finde ud af dette og slet ikke med _content="text/html;_ i din meta, så slet den eller helt glemme xhtml og lave den som html 4.01 som er fuldt understøttet :)

Her er den test side jeg har, for at se om det virker som det skal udfra det jeg har skrevet http://prebendahl.dk/exp/test/tlunde/

Jeg har testet i Opera, Safari, FF3, IE6, IE7 og Chrome

zips, sorry, jeg tænkte ikke lige IE6, men det ændrede stadig ikke så meget på resten af det, men det fik du styr på :P Nu må vi se om tlunde vender tilbage engang :)

<ole>

Nej, slet endelig ikke meta'en, men slet derimod din XML-deklaration:
    <?xml version="1.0" encoding="utf-8"?>

- da den disabler store og væsentlige dele af CSS i IE6.

Derudover giver det ikke ret meget mening at bruge XHTML, før det er understøttet af de gængse browsere på WWW, og det tager med overvejende sandsynlighed en del år endnu  ;o)

/mvh
</bole>

Har fået løst problemet, også med hjælp herfra, så dem der gerne vil have lidt point, smid et svar :-)

Kan du ikke udvælge dem, som du vil give points, og så bede dem lægge et svar? Ellers bliver det nok aldrig til noget ;)

  // Steeven


PS.: Hvad var problemet så?

steeven, melieha og olebole: smid svar og i får point.

;o)

Tak for det.

  // Steeven