Notifikationer

Markér alle som læst Log ud

skwizie Nybegynder

06. december 2007 - 18:26 Der er 7 kommentarer og
1 løsning

Div i div

Jeg har en stump kode der ser således ud:

<div id="1">
<div id="2">
Indhold
</div>
</div>

<div id="3">
</div>

Det jeg gerne vil, er at div nr. 1 skal udvides i højden hvis indholdet i div nr. 2 er større end sat!

som det ser ud nu, vil div nr. 1 ikke udvide sig, og div nr. 3, vil derfor gå op over div nr. 2!!

Synes godt om

jhe-ting Nybegynder

06. december 2007 - 18:48 #1

Måske vil det være lettere at hjælpe med at finde fejlen, hvis du viser den CSS der giver problemer.

Synes godt om

skwizie Nybegynder

06. december 2007 - 19:16 #2

Ja, selvfølgelig!
#1
{
width: 850px;
margin: 0px;
padding: 10px;
position: relative;
background: url(.././images/container_content.png) repeat-y;
overflow: hidden;
}

#2
{
width: 630px;
margin: 0px;
padding: 0px;
position: absolute;
float: left;
background: red;
}

#3
{
width: 850px;
height: 60px;
height: 120px;
margin: 0px;
padding: 0px;
padding-left: 15px;
padding-right: 20px;
position: relative;
background: url(.././images/container_footer.png) no-repeat;
}

Synes godt om

roenving Novice

07. december 2007 - 01:12 #3

-- bemærk lige, at det er ugyldig kode, når et id begynder med et tal !-)

-- og forklaringen er, at du har brugt absolut position på div2, hvadfor du lige gør det, når du alligevel ikke flytter rundt, forstår jeg ikke, så den simple løsning er at fjerne position:absolute; fra div 2 ...

-- hrm, elementet er også floatet, så er det nok ikke nok, men så:

-- hvis du har brug for funktionaliteten i den absolutte positionering og/eller float, må du indsætte en clearDiv:

<div id="div1">
<div id="div2">
Indhold
</div>
<div class="clearDiv"> </div>
</div>

<div id="div3">
</div>

#div1
{
width: 850px;
margin: 0px;
padding: 10px;
position: relative;
background: url(.././images/container_content.png) repeat-y;
overflow: hidden;
}

#div2
{
width: 630px;
margin: 0px;
padding: 0px;
position: absolute;
float: left;
background: red;
}

#div3
{
width: 850px;
height: 60px;
height: 120px;
margin: 0px;
padding: 0px;
padding-left: 15px;
padding-right: 20px;
position: relative;
background: url(.././images/container_footer.png) no-repeat;
}
.clearDiv{
clear:both;
line-height:0;
font-size:;
}

Synes godt om

jhe-ting Nybegynder

07. december 2007 - 02:08 #4

Jeg har også eksperimenteret lidt med dit design, og så først roenvings indlæg da jeg havde lavet dette, som måske kan være et enklere alternativ.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>spm/809274</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#id1
{
width: 865px;
margin: 0px;
padding: 10px;
background: #F88;
}

#id2
{
width: 855px;
margin: 0px;
padding: 5px;
background: red;
}

#id3
{
width: 850px;
height: 120px;
margin: 0px;
padding: 0px;
padding-left: 15px;
padding-right: 20px;
background: blue;
}
</style>
</head>

<body>
<div id="id1">
<div id="id2">
Indhold:<br>
Div-boksen med id="id2"<br>
Flytter footer ned<br>
hvis der indsættes flere linjer
</div>
</div>

<div id="id3">Footer
</div>
</body>
</html>

Synes godt om

skwizie Nybegynder

07. december 2007 - 07:52 #5

OK, jeg prøver løsningen og ser om det ikke virker! Med hensyn til id navnene, er jeg godt klar over det er ugyldig kode med et tal først, men navnet er også kun ændret for at overskueliggøre det her på exp.dk!

Synes godt om

skwizie Nybegynder

07. december 2007 - 09:12 #6

Det ser ud til at virke med roenvings svar!

Synes godt om

roenving Novice

07. december 2007 - 14:55 #7

Velbekomme '-)

Synes godt om

roenving Novice

07. december 2007 - 15:18 #8

-- og tak for point ;~}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS