Notifikationer

Markér alle som læst Log ud

cmau Nybegynder

29. marts 2006 - 17:58 Der er 16 kommentarer og
1 løsning

2 div's ved siden af hinanden

Hejsa

Hvordan kan jeg opstille 2 div's, så den ene har 50% af pladsen eller et vis antal pixels og den anden har den anden halvdel?

Synes godt om

dr_chaos Nybegynder

29. marts 2006 - 18:00 #1

http://www.eksperten.dk/spm/698180
kig nederst her.
roenving har besvaret spørgsmålet.
Måske kan du bruge det.

Synes godt om

razmuz_dk Nybegynder

29. marts 2006 - 18:12 #2

<div style="width: 50%; float: right;">kasse 2</div>
<div style="width: 50%;">kasse 1</div>

Prøv det måske ..

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:14 #3

<!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>

<style type="text/css">

html{overflow-y:scroll}

body{margin:0px;padding:0px;}

div#leftdiv{
width:50%;
background-color:red;
}

div#rightdiv{
position:absolute;right:0;top:0;
width:50%;
background-color:blue;
}

</style></head>

<body>

<div id="leftdiv">smut til venstre...</div>
<div id="rightdiv">smut til højre...</div>

</body></html>

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:15 #4

hvis mit virker så kast point efter raz

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:17 #5

... m.h.t. min pos absolute
- så hvis vi antager at vinduet har en bredde på f.eks 433 så er
50% = 216,5 = 217 px og 2*217px=434px... derfor dette bug fix :/
- hvis den skal centreres i en udvendig div og px fastsættes er
der dog ingen problemer - pos absolute er ikke nødvendig...

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:21 #6

eksempel er bedre end forklaring :/

<!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>

<style type="text/css">

html{overflow-y:scroll}

body{margin:0px;padding:0px;}

div#centered{
width:770px;
margin:0px auto;
}

div#leftdiv{
width:270px;
float:left;
background-color:red;
}

div#rightdiv{
width:500px;,
float:right;
background-color:blue;
}

</style></head>

<body>

<div id="centered">
<div id="leftdiv">smut til venstre...</div>
<div id="rightdiv">smut til højre...</div>
</div>

</body></html>

Synes godt om

cmau Nybegynder

29. marts 2006 - 18:22 #7

Jeg har fået det til at virke nu, men vil bare lige have det kontrolleret af jer.
razmuz_dk smider du svar?

Kode:

#main {
position:relative;
margin:0 auto;
width:762px;
background-color:#4F84B7;
text-align:center;
}
#content {
position:relative;
margin:0 auto;
width:760px;
background-color:#6AA0D3;
}
#top {
position:relative;
text-align:right;
padding:7px;
}
#copyright {
position:relative;
margin:0 auto;
padding:7px;
}
-->
</style>
</head>
<body>
<div id="main">
<img border="0" src="images/logo.gif" width="760" height="130">
<div id="top"style="width: 330; float: left;">Hej Dennis Drejer og velkommen til din personlige side.</div>
<div id="top" style="width: 200;">
<select size="1" name="D1">
<option selected>Muligheder</option>
<option>Redigér profil</option>
<option>Opslagstavle</option>
<option>Debat</option>
<option>Redigér resultater</option>
</select>
</div>
<div id="content">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="copyright">
Copyright © Skive Atletik, 2006. Powered by WooX.DK.
</div>
</div>

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:34 #8

fin nok
body{margin:0px;padding:0px;}
- ville pynte lidt i 800x600
(scroller vertikal forsvinder)
mvh/clemme

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:35 #9

vertikal=horisontal (doh) =)

Synes godt om

razmuz_dk Nybegynder

29. marts 2006 - 18:39 #10

.. yup :)

Synes godt om

cmau Nybegynder

29. marts 2006 - 18:52 #11

Ja, har jeg på. Tusind tak for svarene, men er stødt på en fejl i FF og Opera.
Hvis i kigger her http://www.woox.dk/sam/
Prøv at kig i IE, FF og Opera eller hvad i nu har, så kan i se der er en fejl med at <p> laver en ekstra linje og mine div's bliver rygget ud.

Synes godt om

mclemens Nybegynder

29. marts 2006 - 18:56 #12

#content {
position:relative;
padding:0px;
width:760px;
background-color:#6AA0D3;

Synes godt om

cmau Nybegynder

29. marts 2006 - 19:00 #13

mclemens > Jamen jeg har brug for de 7px padding :S

Synes godt om

mclemens Nybegynder

29. marts 2006 - 19:02 #14

? sådan ?

#content {
position:relative;
padding:7px;
width:746px;
background-color:#6AA0D3;

Synes godt om

mclemens Nybegynder

29. marts 2006 - 19:05 #15

padding er uden om boksen... så hvis boksen er 760+2*7px bliver denne boks lige pludselig 774 px... (7px venstre + 7 px højre, 7 top, 7 bund)... og det er størrer end den ydre boks derfor probs...

Synes godt om

cmau Nybegynder

29. marts 2006 - 19:06 #16

Hov, bare fordi du satte den til 0. :) Nu forstod jeg lige hvordan det hang sammen, tusind tak :D

Synes godt om

mclemens Nybegynder

29. marts 2006 - 19:07 #17

super ;)

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