Avatar billede xcover Nybegynder
04. februar 2009 - 20:38 Der er 5 kommentarer og
1 løsning

Div side om side - Som table

Hej,

Jeg er ved at lave min første side KUN i div´s :)
Til det formål har jeg behøv for at lave en opdeling ligesom man normalt ville gøre med tabeller. Se fx:
http://netload.dk/div_layout.jpg

Jeg kunne godt tænke mig div_1 er 200 pixel bred, og div_2 er bare resten af pladsen på siden.

Hvordan gør jeg det ?

Jeg har førsøgt følgende:  (Det driller mig bare - HJÆLP :-)

HTML FIL:
<div class="div_1">div_1</div>
<div class="div_2">div_2</div>

CSS FIL:
.div_1
{
width:200%;
float: left;
overflow: hidden;
}

.div_2
{
float: left;
overflow: hidden;
}
Avatar billede gizp Nybegynder
04. februar 2009 - 20:43 #1
Hvordan driller det? De er vel ved siden af hinanden?
Avatar billede gizp Nybegynder
04. februar 2009 - 20:45 #2
Noget så simpelt som

<div style='float:left;width:150px;border:1px solid #000000;'>Venstre</div>
<div style='float:none;width:500px;border:1px solid #000000;'>Højre</div>

virker ihvertfald hos mig.
Avatar billede xcover Nybegynder
04. februar 2009 - 20:49 #3
Se koden her: Og jeg benytter firefox.

<!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" xml:lang="da" lang="da">

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="da" />
<title>xTest</title>
<style type="text/css">
.div_1
{
width:200%;
float: left;
overflow: hidden;
}

.div_2
{
float: left;
}
</style>
</head>
<body>

<div class="div_1">div_1</div>
<div class="div_2">div_2</div>

</body>
</html>
Avatar billede xcover Nybegynder
04. februar 2009 - 20:51 #4
De er ved siden af hinanden, men DIV_2 fylder ikke resten af skærmen... Skal jeg virkelig manuelt angive en brede ?
Avatar billede gizp Nybegynder
04. februar 2009 - 20:53 #5
Du har faktisk også et par fejl.
#1 du vil have at div_1 skal være 200% af browserens bredde. Du mener nok bare 200px.
#2 så vil en float:left flytter div'en til højre i "moder" objektet. Du vil altså få 2 objekter helt til venstre.

.div_1 {
width:200px;
float: left;
overflow: hidden; }
.div_2 {
float: none; }
Avatar billede xcover Nybegynder
04. februar 2009 - 20:56 #6
Min fejl... takker :)
Endnu et bevis på koden blir bedre med DIV´s :) Så ser man sq fejlne hvorimod en table bare ville have gjort det korrekt, selv med fejl næsten :P

TAK
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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