Søg
Avatar billede palito Nybegynder
26. marts 2006 - 11:30 Der er 23 kommentarer

2 <div> ved siden af hinanden

Hvordan får jeg 2 <div>-bokse til at stå ved siden af hinanden?

Den ene boks skal være 100% i højden og 300 i bredden - den anden skal fylde af hvad der er tilbage i browseren
Avatar billede dr_chaos Nybegynder
26. marts 2006 - 11:33 #1
<table>
<tr>
<td>
<div id="1">
</div>
</td>
<td>
<div id="2">
</div>
</td>
</tr>
<table>
Avatar billede dr_chaos Nybegynder
26. marts 2006 - 11:33 #2
kan du måske bruge.
Findes måske en bedre måde
Avatar billede palito Nybegynder
26. marts 2006 - 11:44 #3
<div>, tak ;)
Avatar billede palito Nybegynder
26. marts 2006 - 11:44 #4
Ingen tables
Avatar billede marz* Nybegynder
26. marts 2006 - 12:10 #5
http://www.alistapart.com/articles/holygrail/
Avatar billede mclemens Nybegynder
26. marts 2006 - 12:12 #6
... virker desværre kun i IE da man normalt ikke kan angive height 100%...
- javascript er desværre nødvendigt for at simulere det :/
... koden er valideret v w3c...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById("rightcontainer").style.width=document.body.offsetWidth-300;
}
//-->
</script>

</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;">


<div id="leftcontainer" style="float:left;width:300px;height:100%;background-color:red;">
abc</div>

<div id="rightcontainer" style="float:left;width:470px;height:100%;background-color:blue;">
abc</div>

</body></html>
Avatar billede mclemens Nybegynder
26. marts 2006 - 12:15 #7
glemte update :P
... virker desværre kun i IE da man normalt ikke kan angive height 100%...
relaterer til mit eksempel
Avatar billede mclemens Nybegynder
26. marts 2006 - 13:01 #8
der er dog også lidt probs med resize... ret evt. window.onload=function(){ til window.onload=function alignit(){
samt tilføj i body tagget onresize="alignit();"
Avatar billede milandt Nybegynder
26. marts 2006 - 15:59 #9
Denne løsning virker i alle browsers, og clear-fix klassent ager højde for at Internet Explorer ikke kan finde ud at sætte korrekt højde på et element der indeholder elementer der floater.


<style type="text/css">
    /*Clear floats fix */
    .clear-fix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;               
    }
    /* Hides from IE-mac \*/
    * html .clear-fix {height: 1%}
    /* End hide from IE-mac */
</style>


<div class="clear-fix">
  <div style="float:left;width:200px;">Div 1 content here</div>
  <div style="float:left;width:200px;">Div 2 content here</div>
</div>
Avatar billede mclemens Nybegynder
26. marts 2006 - 16:13 #10
Denne løsning virker i alle browsers, og clear-fix klassent ager højde>
- øhm? højde = 100% som i spørgsmålet...
Avatar billede mclemens Nybegynder
26. marts 2006 - 16:15 #11
samt 300px bred i den ene side og 100% bredde - de 300px i den anden ...
Avatar billede milandt Nybegynder
26. marts 2006 - 19:15 #12
læste kun overskriften, kan være jeg har misforstået sprørgsmålet.
Avatar billede mclemens Nybegynder
28. marts 2006 - 00:16 #13
Det her hjælper lidt på FF samt IE ;)
- det er noget fusk lad det være indrømmet...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script>
window.onload=function alignit(){
newwidth=document.body.offsetWidth;
if(document.body.clientHeight>100)newheight=document.body.clientHeight;
else if(window.innerHeight>100)newheight=window.innerHeight;
document.getElementById("leftcontainer").style.height=newheight+"px";
document.getElementById("rightcontainer").style.height=newheight+"px";
document.getElementById("rightcontainer").style.width=newwidth-300+"px";
}
</script>
</head>

<body onresize="alignit();" style="margin:0px;height:100%;">

<div id="leftcontainer" style="float:left;width:300px;height:100%;background-color:red;">
abc</div>

<div id="rightcontainer" style="float:left;width:370px;height:100%;background-color:blue;">
abc</div>

</body></html>
Avatar billede roenving Novice
29. marts 2006 - 06:10 #14
Højde 100% er da ikke svært i nogensomhelst browsere, man skal bare være opmærksom på, at W3C eksplicit foreskriver, at en relativ højde skal beregnes på baggrund af et omgivende elements _angivne_ højde, hvilket altså betyder, at der skal være en angivelse et-eller-andet sted for at det virker, med 100% skal det også ligge på dokument- og body-elementet ...

-- og den fuldkomne løsning på at have en bredde på 100% - 300px er desværre javascript, faktisk giver også kombinationen af tabel-celler og andre elementer problemer i visse sammenhaænge (spørg ikke i hvilken browser ,-)

-- og det skal da tilføjes, at tabeller ikke er hverken 80'er- eller 90'er-forældet, men åbenbart af nogle, der kun læser halvt igennem teksten, dømt til at være ude på baggrund af tidligere tiders mangel på design-elementer, der skabte 90'ernes ekstreme tabelhelveder med nestede tabeller i mange niveauer og spacer.gifs til at spænde dem ud ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>To bokse i fuld højde ved siden af hinanden</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{height:100%;position:relative;}
#menubox{height:100%;position:absolute;top:0;left:0;width:300px;background-color:red;}
#menushadow{height:100%;float:left;width:300px;}
</style>
</head>
<body>
<div id="site">
  <div id="menushadow">Dette er usynligt</div>
  <div id="menubox">
    Her placeres venstreindhold
  </div>
  Her skal det resterende indhold placeres
</div>
</body>
</html>
Avatar billede roenving Novice
29. marts 2006 - 06:14 #15
-- og det skal tilføjes, at denne type løsninger kun virker, hvis man aldrig har indhold, der går ud over skærmhøjde, da der skal javascript til at synkronisere højden på divs, hvor tabel-rækker præcis er det eneste element, der kan tvinge indhold til at blive synkroniseret i højden !-)
Avatar billede mclemens Nybegynder
29. marts 2006 - 07:58 #16
Smart nok, troede ikke, man kunne sætte height 100% i FF'eren,
men med den position:absolute; samt spaceren kunne du...
- du kender altså nogle tricks roenving :)
Avatar billede roenving Novice
29. marts 2006 - 19:45 #17
Den absolutte positionering bruges kun for at kunne lave en idiot-sikker bredde, for et absolut positioneret element vil placere sig i forhold til nærmest omkransende positionerede element, altså her i forhold til site-diven, fordi den er relativt positioneret !-)

-- den fulde højde virker helt problemfrit, hvis man bare overholder w3cs definition: en relativ længde (bredde el. højde !-) skal beregnes ud fra det omkransende element, der skal have en angivet længde på den led, altså er et nødvendigt at starte med det yderste element (dokument-elementet, html, fortsætte med body-elementet, så site-diven har noget at forholde sig til !-)
Avatar billede mclemens Nybegynder
29. marts 2006 - 20:09 #18
hmmm, i 28/03-2006 00:16:20 brugte jeg egentlig selv den med height:100% i body dog glemte jeg helt at tjekke på FF'eren om det var godt nok til FF'eren inden jeg begyndte at scripte i højden... troede lige det var pos ab der gjorde det ... min fejl.

tak for forklaring og kode :)
Avatar billede roenving Novice
29. marts 2006 - 20:14 #19
-- men du havde ikke sat html-elementet til 100%'s højde, benyt f.eks.

html,body{height:100%;} i et stylesheet !-)
Avatar billede mclemens Nybegynder
29. marts 2006 - 20:16 #20
ok.
Avatar billede mclemens Nybegynder
29. marts 2006 - 20:23 #21
du er for sej roenving 8)

Havde lidt probs med min xhtml
- Kunne ikke virke ordentligt i FF'eren...
- IE virker xhtml jo ikke ordentligt med endnu...

Og din html{100%} løste problemet med baggrunden (100% højde) i FF'eren :)
Nu kan jeg køre xhtml 1.1 i ff'eren leveret som application/xhtml+xml med php header - samt IE i text/html ... ved godt IE går med i quirks mode grundet <?xml version="1.0" encoding="iso-8859-1"?>, men resten af css koden tager højde for det hele med/uden quirks mode.

Bukker og takker igen :)
Avatar billede roenving Novice
29. marts 2006 - 20:34 #22
xml-deklarationen kan du vel også sætte til eller fra med php ?-)
Avatar billede mclemens Nybegynder
29. marts 2006 - 20:44 #23
jo selfølgelig... det vælger jeg at gøre også så :)

<?php
if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'firefox')!== false){
header("Content-type: application/xhtml+xml");}

...

if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'firefox')!== false){
echo"<"."?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">".$metas;}

...

?>
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 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I dag 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »