div align right
Jeg har en div der skal indeholde 2 andre divs..Den ene er til venstre som er nem nok at få til at passe og så en højre for den til venstre.. Den er straks værre..
Hvis jeg sætter position: relative; ville jeg mene position skulle justeres udfra kanten af den div den er placeret indeni.
Således at jeg kunne skrive right: 20px; og så ville den sætte sig 20px fra den højre side af den div den er indeni.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 800px;/* 46em; */ /* 49px mindre end fuld sidebredde */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px; /*1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
height:auto;
}
#mainContent {
padding: 50px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
#leftcontainer{
width: 300px;
background: #FFFFFF;
margin: 0px; /* auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px; /*1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
height:auto;
padding:0 0px; /*remember that padding is the space inside the div box and margin is the space outside the div box */
#rightcontainer{
width: 200px;
background: #FFFFFF;
position:relative;
margin: 0px; /* auto; /* the auto margins (in conjunction with a width) center the page */
/* margin-left:500px; dette virker men synes det da en crappy løsning! */
border: 0px; /*1px solid #000000; */
height:auto;
padding:0px 0px; /*remember that padding is the space inside the div box and margin is the space outside the div box */
}
</style>
</head>
<body>
<div id="container">
<div id="mainContent">
testtext
<div id="rightcontainer"><p>testtext2</p></div>
<div id="leftcontainer"><h2>Profil</h2><p>testtext</p></div>
</div>
</div>
</body>
