To DIV med fast bredde med en DIV med variabel bredde mellom seg - hvordan?

[stiansa]

Jeg har flere ganger prøvd å få til dette kun ved bruk av DIV og CSS, men hver gang endt opp med å ty til tabeller.

 

Det jeg vil er å ha en DIV til venstre som er menyen. Denne skal ha fixed width på f.eks. 200px. Så skal jeg ha en DIV til høyre som også skal være fixed, f.eks. 200px bred. Mellom disse skal hovedinnholdet på siden være, og bredden her skal justere seg automatisk etter størrelsen på webleservinduet.

 

Noe sånt:

[ Menykolonne, 200px bred ][ Hovedinnhold, skal oppta all tilgjengelig plass i bredden ][ Høyrekolonne, 200px bred]

 

Så totalbredden på de tre DIVene er 100% i forhold til webleservinduet.

 

Jeg har kommet så langt:

 

CSS-delen:

.leftDiv{
 position : absolute;
 left : 0px;
 top : 101px;
 width : 200px;
}
.centerDiv{
 position : absolute;
 left : 201px;
 top : 101px;
}
.rightDiv{
 top : 101px;
 width : 200px;
}

 

HTML-delen:

<div class="leftDiv">meny</div>
<div class="centerDiv">hovedkolonne</div>
<div class="rightDiv">høyrekolonne</div>

 

Det går vel an å floate høyrekolonnen til høyre, men hvordan forhindrer vi at den havner oppå innhold i den midterste DIV-en? Vi vet jo ikke hvor mange pixler bred midt-DIV-en er.

Endret 17. januar 2011 av stiansa

[ilpostino]

det første jeg kommer på i farten er å bruke float.

[stiansa]

float : right; ikke sant?

 

Så da blir det sånn, da:

.rightDiv{

float : right;

top : 101px;

width : 200px;

}

 

?

 

Men hvordan får jeg bredden på den midterste DIV-en til å justere seg selv i forhold til bredden på webleservinduet?

 

 

 

 

[ilpostino]

ja, det blir float:right eller float:right avhengig av hvor du vil ha det på siden. hvordan jeg ville satt opp bredden ville vært avhengig av hvordan jeg hadde satt opp bredden på hele siden. hvis du har satt opp bredden til å være feks 1000px kan du regne deg frem til hvor store de forskjellige delene skal være. ellers kan du jo prøve med *.

[stiansa]

Jeg har ikke satt opp noen bredde på siden. Jeg vil at den skal være 100% i forhold til browservinduet. Det er akkurat dette som gjør det vanskelig. Hadde jeg hatt en fast bredde, så hadde det ikke vært noe problem å sette DIV 1 til left :0px, DIV 2 til left : 200px og DIV 3 til left:900px, f.eks.

 

Hadde ikke noe hell med *, forresten. Prøvde det slik:

.mainContents{
position    : fixed;
width     : *;
top      : 201px;
left     : 211px;
}

[ilpostino]

hvorfor vil du ikke ha noen fast bredde? da vil jo siden se helt annerledes ut om de kommer innom siden med en 19" 4:3 og en 24" 16:9. nå har jeg riktignok tatt med ytterpunktene men med en fast bredde har du bedre kontroll med hvordan designet blir.

[KvitKnekt]

Her er noe å lese angående en tre-kolonne-layuot. Mange forskjellige eksempler og teknikker:

http://css-discuss.incutio.com/wiki/Three_Column_Layouts

[MikkelRev]

hvorfor vil du ikke ha noen fast bredde? da vil jo siden se helt annerledes ut om de kommer innom siden med en 19" 4:3 og en 24" 16:9. nå har jeg riktignok tatt med ytterpunktene men med en fast bredde har du bedre kontroll med hvordan designet blir.

 

Hvorfor legge inn unødvendige begrensninger? Det blir som å bare bruke 15" av skjermen din på 60"'eren din.

 

https://www.diskusjon.no/index.php?showtopic=1260308

[ilpostino]

nå er jeg på ingen måte en mester i design meg jeg ser ikke på det som en begrensning å ha kontroll på hvordan designet på siden min ser ut med forskjellige skjermstørelser.

[agm]

Stian - se om du finner noe nyttig i denne listen!

[stiansa]

Takk for gode tips. Bra liste fra KvitKnekt og agm

 

Men jeg har bestemt meg for å følge rådet til ilpostino og gå for fast bredde. Litt enig med MikkelRev om det om å bare bruke en liten del av skjermen, men ulempen med fleksibel hovedinnholds-del er at det kan føkke opp layouten dersom browservinduet er for smalt eller ekstremt bredt.

 

Men nå har jeg møtt på en annen nøtt som jeg ikke har klart å knekke etter to timer med googling. Man skulle tro det var ganske enkelt, men hvordan får jeg en DIV inni en annen DIV til å bestemme høyden på den DIV-en den står inni? Altså, jeg har en wrapper/container-DIV, og inni den er de tre DIV-ene leftCol, mainContents og rightCol. De tre står ved siden av hverandre, satt med position absolute. Breddemessig er alt supert, men alle tre har ulik høyde. Nedenfor har jeg en footer-DIV som jeg vil skal dyttes nedover til bunn av den av de tre DIV-ene som har mest innhold (er høyest).

 

Dette er HTML-en jeg har

<div class="header">HEADER</div>
<div class="wrapper">
   <div class="leftMenu">LEFT</div>
   <div class="mainContents">
       <p>.</p><p>.</p><p>.</p>
   </div>
   <div class="rightCol">RIGHT</div>
</div> <!-- /wrapper -->
<div class="footer" align="center">FOOTER</div>

 

Og her er CSS-definisjonene:

.header{
width     : 999px;
height     : 150px;
background-color  : #5A86BC;
border-bottom   : solid 1px #375FA8;
border-right   : solid 1px #375FA8;
color     : #FFFFFF;
font-size    : xx-large;
}
.footer{
width     : 999px;
height     : 50px;
color     : #73728B;
background-color  : #CDD9F3;
border-top    : solid 1px #91BFE6;
border-bottom   : solid 1px #91BFE6;
border-right   : solid 1px #91BFE6;
}
.wrapper{
width     : 1000px;
margin     : 0px;
padding     : 0px;
}
.leftMenu{
width     : 180px;
background-color  : #C7CFE7;
border-right   : solid 1px #91BFE6;
padding     : 5px;
}
.mainContents{
position    : absolute;
width     : 608px;
top      : 151px;
left     : 191px;
padding     : 5px;
background-color:#FFFF80;
}
.rightCol{
position    : absolute;
left     : 809px;
top      : 151px;
width     : 180px;
padding     : 5px;
border-left    : dotted 1px #375FA8;
background-color:#DDAAAA;
}

 

For å tydeliggjøre ytterligere hva jeg prøver å oppnå, så er det oversatt til HTML-tabell just presis slik:

<table>
   <tr><td colspan="3">HEADER</td></tr>
   <tr>
       <td>LEFT</td>
       <td><p>.</p><p>.</p><p>.</p></td>
       <td>RIGHT</td>
   </tr>
   <tr><td colspan="3">FOOTER</td></tr>
</table>

 

Legg merke til hvordan alle de tre TD-ene er jevne i bunn og skyver footer-TD-en nedover under seg.

 

Jeg er en CSS-noob, så det hjelper meg ikke så mye med korte svar som "prøv height: inherit" eller noe sånt.

[MikkelRev]

Men jeg har bestemt meg for å følge rådet til ilpostino og gå for fast bredde. Litt enig med MikkelRev om det om å bare bruke en liten del av skjermen, men ulempen med fleksibel hovedinnholds-del er at det kan føkke opp layouten dersom browservinduet er for smalt eller ekstremt bredt.

Det kan du unngå ved å bruke css.

[stiansa]

Det kan du unngå ved å bruke css.

 

Kanskje. Det kommer vel litt an på hva slags innhold det er. Ikke alt egner seg for skalering. Kan risikere store, hvite flekker innimellom bilder og tekst hvis skjermen skulle være ekstremt stor.

 

Noen som har tips for å justere høyden på DIV som jeg skrev i det siste innlegget mitt før dette, eller? Jeg kom på at det er samme problematikk som om man skulle plassere et enkelt bilde inni en DIV. Da heller justerer ikke høyden på DIV-en seg etter høyden på bildet. Hvordan fikser man det?

[MikkelRev]

Du kan google faux columns. Men det finnes sikkert andre/enklere/bedre løsninger.