4 svar · 280 visningar · startad av Yoda
Jag har en container- och en left- och en right-div. left och right ska ligga i containern och dela upp denna. All text och bilder jag lägger in ska ligga i left och right. Containern ska då anpassa sin längd efter innehållet. Containern anpassar sig efter lefts innehåll. Men när right blir för lång, anpassar inte sig containern efter längden. Right kommer utanför...det vill jag inte.
Så här ser det ut:
<div class="container">
<div class="left">
bla bla bla
</div> //slutar left
<div class="right">
bla bla bla
</div> //slutar right
</div> //slutar containern
och min css ser ut så här:
html, body
{
margin: 0;
padding: 0;
height: 100%;
overflow: auto;
background: white;
font: 11px/1.5em verdana, sans-serif;
color: black;
}
div.container
{
position: absolute;
top: 91px;
left: 131px;
height: 444px;
width: 619px;
border: 1px solid black;
background: white;
padding: 10px;
z-index: 0;
}
div.left
{
top: 5px;
left: 5px;
width: 380px;
margin-bottom: 10px;
background: red;
}
div.right
{
position: absolute;
top: 48px;
left: 390px;
width: 228px;
margin-bottom: 10px;
background: green;
padding: 7px;
}
Om jag tar bort position: absolut i right så anpassar sig containern men innehållet i right lägger sig under left och det vill jag inte.
Hur ska jag göra för att få containern att anpassa längden efter rights längd???????????
menar du så här:
div.left
{
width: 370px;
padding: 7px;
margin-bottom: 10px;
background: red;
[blue]float:left;[/blue]
}
div.right
{
width: 228px;
margin-bottom: 10px;
background: green;
padding: 7px;
[blue]margin-left:7px;
float:left;[/blue]
}
Med float: right; istället för position: absoulte; i div.right så fungerar det i IE. Firebird är däremot inte speciellt imponerad över koden oavsett om vad det står.
Fast det har jag ingen lösning på.
Mvh
Jan-Olov
Funkar inte...
Det fungerar fortfarande inte...
Skriver jag:
div.left
{
width: 370px;
padding: 7px;
margin-bottom: 10px;
background: red;
float:left;
}div.right
{
width: 228px;
margin-bottom: 10px;
background: green;
padding: 7px;
margin-left:7px;
float:left;
}
så lägger sig rutorna under varandra till vänster, så det var inget bra.
Skriver jag:
Med float: right; istället för position: absoulte; i div.right så fungerar det i IE.
så lägger sig left till vänster där den ska. Och right lägger sig till häger som den ska fast under left...skumt. Jag vill ju ha den sidanom.
Fast med båda förslagen anpassar längden i containern sig efter längden i right, så det är ju bra. Men jag vill ju att right ska stanna uppe på den nivån jag sagt:
top: 48px;
Hur gör jag nu då? Vet någon?
En tanke bara..
Om du använder strict och inte går i Quirks-mode så måste du räkna in paddingen i div´ens bredd,
det är förmodligen därför som right inte får plats innanför din container.
Bredd:
div.container: 619px
div.left: 370+7+7 = 384px
div.right: 228+7+7+7 = 249
Summa: left + right = 633px
