html/css - div höjd beroende av annan div

Trädvy Permalänk
Medlem
Plats
Källaren
Registrerad
Mar 2005

html/css - div höjd beroende av annan div

Har ett problem. När texten i "div content" blir så pass mycket att det blir mer än 500px i höjd, dvs när height:auto börjar gälla så stannar givetvis "div sidebar" kvar i höjden 500px. Hur ska jag göra för att få "div sidebar" att följa efter "div content" i höjd allt eftersom "div content" expanderar?

HTML:

</head>
<body>
<div id="wrapper">

<div id="content">
Text
</div>

<div id="sidebar">
Länkar
</div>

</div>
</body>
</html>
__________

CSS:

#wrapper {
margin:auto;
width:836px;
height:auto;
padding-top:30px;
}

#content {
float:left;
width:526px;
height:auto;
min-height:500px;
padding-left:56px;
padding-right:28px;
text-align:justify;
background-image:url(img/content.gif);
background-repeat:repeat-y;
}

#sidebar {
float:right;
width:170px;
height:auto;
min-height:500px;
padding-left:14px;
padding-right:42px;
background-image:url(img/sidebar.gif);
background-repeat:repeat-y;
}

Phenom2 X3 720 . DFI LanParty JR 790GX-M2RS . PowerColor Radeon HD 4850 "PCS" 1GB . Corsair 4GB (2x2GB) XMS-2 . Antec P180 Mini .

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

testa height: 100% i #sidebar

PS. auto är default-värde på height så du kan ta bort de raderna

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Källaren
Registrerad
Mar 2005
Citat:

Ursprungligen inskrivet av Teknocide
testa height: 100% i #sidebar

PS. auto är default-värde på height så du kan ta bort de raderna

Det vill inte fungera. Den står stilla vid 500px.

Phenom2 X3 720 . DFI LanParty JR 790GX-M2RS . PowerColor Radeon HD 4850 "PCS" 1GB . Corsair 4GB (2x2GB) XMS-2 . Antec P180 Mini .

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

Precis som Teknocide säger så är det height: 100% som fungerar.
Tänk på att padding och marginal kan skapa lite problem med överlappande div:ar och att resultatet kan variera mellan olika webbläsare. Det gäller att ha tungan rätt i munnen där.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Källaren
Registrerad
Mar 2005

Knasigt. Har tagit bort alla height:auto och lagt till height:100% i sidebar men det hjälper ej. Kanske är något annat som ställer till det. Kan länka sidan så att ni som är duktiga kan ta er en koll på det hela (om ni har lust). http://fpcs.host-ed.net/index.php - index fungerar men i andra länken syns felet.

Phenom2 X3 720 . DFI LanParty JR 790GX-M2RS . PowerColor Radeon HD 4850 "PCS" 1GB . Corsair 4GB (2x2GB) XMS-2 . Antec P180 Mini .

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av muhihihaha
Knasigt. Har tagit bort alla height:auto och lagt till height:100% i sidebar men det hjälper ej. Kanske är något annat som ställer till det. Kan länka sidan så att ni som är duktiga kan ta er en koll på det hela (om ni har lust). http://fpcs.host-ed.net/index.php - index fungerar men i andra länken syns felet.

Det är din wrapper som tar slut där. content blir större för att texten fyller ut, sidebar blir inte större för att blankt utrymme inte räcker som utfyllnad.

Problemet är att vissa element float:ar och andra inte.

height:100% fungerar endast om parent-objektet har en fast höjd.

Om du gör html, body och wrapper till height:100% så fungerar det. Designen/layouten borde inte förstöras, eftersom det är innehållet i content och sidebar som bestämmer utseendet.

Jag testade själv och det fungerade. Problemet är bara att sidebarens högra border vill sticka iväg.

Det går att lösa detta på ett annat vis tror jag...

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Ett alternativ till floats som jag tycker är bättre och mer kompatibelt om #content garanterat har högre innehåll än #sidebar är att ha #sidebar inuti #content, position: relative på #content, position: absolute på #sidebar. Då kan du även placera sidebar till höger eller vänster om content precis hur du vill utan hänsyn till var i HTML-koden elementet förekommer.

exempel:

<style> #content { background: #afa; height: 737px; /* faux height, ta bort när elementet får annat innehåll */ position: relative; width: 500px; } #sidebar { background: #ffa; /* bakgrundsfärger för att visa våra element */ height: 100%; /* 100% i förhållande till #content */ left: 100%; /* flytta in #sidebar 100% av #content:s bredd från vänster */ margin-left: 10px; /* 10 pixlar från kanten */ position: absolute; top: 0; width: 200px; } </style> <div id="content"> <div id="sidebar"> </div> </div>

Du kan även använda en wrapper med position: relative på liknande sätt. Då blir dock koordinaterna för att placera #sidebar i övre högra hörnet top: 0; right: 0;
Observera att #sidebar kommer att begränsas till #content:s höjd. Blir #sidebar högre försvinner innehållet "ut över kanten". Float-clears fungerar inte.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Källaren
Registrerad
Mar 2005

Tack Teknocide! Har försökt något liknande innan utan att använda mig utav position. Det verkar som att detta kommer att fungera! Ska testa mig fram.

Phenom2 X3 720 . DFI LanParty JR 790GX-M2RS . PowerColor Radeon HD 4850 "PCS" 1GB . Corsair 4GB (2x2GB) XMS-2 . Antec P180 Mini .

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Ingen orsak, lycka till

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Källaren
Registrerad
Mar 2005

Har fått det att fungera nu! Kanon!

Kanske aningen off-topic men går det att fixa så att sidan inte hoppar åt vänster när scrollbar'en kommer upp på sida två? Eftersom sidan ligger centrerad och den totala bredden blir mindre när scrollfunktionen tittar fram så flyttar sig allt åt vänster. Finns det något man kan göra för att få sidan att ignorera det? Inte för att det är världens största problem men det ser ändå halvknasigt ut om man navigerar och läser samtidigt

Edit:
Kom på det själv
html
{oferflow:scroll;}

Phenom2 X3 720 . DFI LanParty JR 790GX-M2RS . PowerColor Radeon HD 4850 "PCS" 1GB . Corsair 4GB (2x2GB) XMS-2 . Antec P180 Mini .

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Du kan nog sätta den så att den alltid syns.. men hur snyggt är det. Om du ser till att fylla sidorna så kommer den alltid finnas där ändå

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003

Haha, typiskt mig. Jag satt och gjorde "det andra sättet" som jag nämnde men så hittade jag något annat som jag grävde mig ner i...

Bra att det löste sig i alla fall.

ηλί, ηλί, λαμά σαβαχθανί!?