Søg
Avatar billede pnr Nybegynder
01. marts 2007 - 20:31 Der er 6 kommentarer og
2 løsninger

Problemer med div side om side

Jeg sidder og leger lidt med nogle div tags, jeg har 2 div'er som skal ligge ved siden af hinanden og følge hinanden i højden, men det vil ikke rigtig som jeg vil. Her er min kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<div style="background-color:Red">
    <div style="width: 100px;float:left;background-color:Aqua">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no
    </div>

    <div style="width: 200px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

</body>
</html>

Den højre div kravler ind under den venstre :-( Nogen der kan hjælpe?
Avatar billede o-zone Nybegynder
01. marts 2007 - 21:10 #1
Jeg er ikke helt sikker på hvad du mener med "følge hinanden i højden" ... men er det sådan noget som det her du tænker på?
---8<----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<div style="background-color:Red">
    <div style="width: 100px;float:left;background-color:Aqua">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no
    </div>

    <div style="width: 200px;float:left;background-color:Red">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

</body>
</html>
---8<----------

/o-zone
Avatar billede o-zone Nybegynder
01. marts 2007 - 21:23 #2
at sætte et blok element til at float:left betyder at det ryger ud af det normale flow, og bliver skubbet mod venstre (indtil det støder på kanten eller et andet element der tidligere er blevet skubbet mod venstre).

De elementer der forbliver i det normale flow (ved ikke at angive noget der hiver dem ud af flowet) kan populært sagt ikke se at de flydende elementer er der, så de indretter sig bare efter den plads der er tilbage, efter at de flydende elementer har taget hvad de skal bruge.

Det betyder at dit røde element fylder hele breden minus det flydende elements brede indtil det når ned under nedre kant på det flydende element. Derefter fylder det hele breden.

Ved at lade det røde element flyde mod venstre også, bliver det rykket ud af flowet, og skubbet mod venstre indtil det rammer det cyan favede element (og ender således på højre side af elementet).

En lille bieffekt ved pludselig kun at have flydende elementer er at din body bliver 0 pixels høj (der er ingen elementer tilbage i det normale flow i body, til at udvide body's højde). Derfor er jeg nødt til at sætte den højre div's baggrundsfarve til rød.

Hvis du gerne vil have at body strækker sig til neden under de to divs, kan du placere en sidste div under de to andre, som har clear:left (eller both). Det vil indsætte den i det normale flow i body, og derefter skubbe det nedad, så det først starter når der ikke er nogen floating elementer mod venstre (eller til begge sider).

Du kan tænke på det som at "clear" er et css tag der sætter elementer i det normale flow istand til at se de flydende elementer.

Jeg håber at det opklarede mere end det forvirrede? (det var overraskende svært at forklare når jeg ikke kunne støtte mig til en tegning) :)

/o-zone
Avatar billede pnr Nybegynder
02. marts 2007 - 10:25 #3
Det var ellers en flot forklaring, mange tak for det! :-)

Jeg kan dog ikke få det til at virke hvor den fylder body ud? Kan du evt. give et eksempel på det?
Avatar billede roenving Novice
02. marts 2007 - 12:28 #4
Hvis det ene element altid vil være korteste, sætter man bare baggrundsfarven i det omkransende element til den, som den korte har, så vil man ikke kunne se, at den er kortere !-)

-- hvis du for lavor skal synkronisere, skal du over i noget javascript, men det skal betragtes som en sidste udvej, for det er rent tåbeligt at basere design på scripting !o]

-- men det kan f.eks. gøres sådan:

<script type="text/javascript">
var elms = ['left','middle','right'];

function synchronizeDivs(){
  var maxH = 0;
  for(i=0;elms.length>i;i++){
    maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
  }
  for(i=0;elms.length>i;i++){
    document.getElementById(elms[i]).style.height=maxH + 'px';
  }
}
</script>
Avatar billede pnr Nybegynder
02. marts 2007 - 15:12 #5
Mange tak for jeres hjælp begge 2!

Smid nogle svar så får o-zone 20 point og roenving 10 point, hvis det er ok med jer begge?
Avatar billede roenving Novice
02. marts 2007 - 15:17 #6
Velbekomme '-)
Avatar billede o-zone Nybegynder
03. marts 2007 - 21:38 #7
takker :)
Avatar billede roenving Novice
04. marts 2007 - 14:25 #8
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 11:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
I går 15:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
White papers
Flere white papers »