WN - problem med div placering

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - problem med div placering (https://www.wn.se/forum/showthread.php?t=33530)

Jag har lagt ner tabell design för att testa DIVar istället, men nu har jag stött på lite problem.
min div #imgs vill inte ligga på samma höjd som #meny eller #txt.

sen har jag en annan fråga, jag vill att #mitten och #txt ska stretchas på höjden , hur gör jag detta på bästa sätt?

här är koden:

Kod:

body {

        background-image: url(img/bakgrund.gif);

        background-repeat: repeat-x;

        height:100%;

        text-align:center;

}





#top

{

background-image:url(img/bg_top.png);

width:900px;

height:29px;

}



#header

{

        background-image:url(img/bg_middle.png);

        width:900px;

        height:165px;

}

#mitten

{

        background-image:url(img/bg_middle.png);

        width:900px;

        height:700px;

}



#botten

{

background-image:url(img/bg_botom.png);

width:900px;

height: 36px;

}



#meny

{

        background-image:url(img/bg_bg.jpg);

        width:108px;

        height:500px;

        margin-left:10px;

        float: left;

}



#txt

{

        background-color:#EFF1E7;

        width:500px;

        height:500px;

        margin-left:5px;

        text-align:left;

        float: left;

}

#imgs

{

        background-image:url(img/bg_bg.jpg);

        width:220px;

        height:500px;

        margin-left:650px;

        margin-top:0px;

        float: left;

}



________





<div id="top"> </div> 

<div id="header"></div>

        <div id="mitten"> * * * * <!-- finns för att få skuggade kanter , ska stretchas på höjden. -->

 *<div id="meny"><img src="bild.gif" width="102" height="28" /><br />meny</div>

 *<div id="txt">DIV - txt , ska gärna stretchas med innehållet på höjden.</div>

 *<div id="imgs"><img src="bild.jpg" width="120" height="100" /><br />div - imgs</div>

        </div>

<div id="botten"></div>

Tack på förhand!

Om du vill ha flexibla höjder kan du börja med att ta bort height-värdena.

jag tog bort height värdena , och det funkar till viss del , #txt stretchas precis som den ska, men #mitten hänger inte på, kan man länka ihop #txt och #mitten height på nått sätt? typ att #mitten = 120% av #txt ?

sådär nu är #imgs i rätt höjd , koffein brist och allmän förvirring gjorde att man inte såg left-margin 650px , men jag letar fortfarande en lösning på hur jag ska få
#mitten att stretcha lika mkt eller helst lite mer än vad #txt gör i höjd.

googlade runt lite på nätet å det verkar som man ska använda javascript för det här, tyvärr hittade jag inga exempel , nån som har nått tips på hur jag kan få #mitten att bli lika hög som #txt?

Citat:

Originally posted by harding-85@Nov 26 2008, 12:16
googlade runt lite på nätet å det verkar som man ska använda javascript för det här, tyvärr hittade jag inga exempel , nån som har nått tips på hur jag kan få #mitten att bli lika hög som #txt?

Ska är väl överdrivet (använda javaskript). Det är alltid bra att försöka undvika javaskript enbart för design, designen ska ligga i css:en.

Däremot är det ett vanligt problem att stöta på när man jobbar med css-design, det finns ett antal lösningar eller sätt att komma runt problemet (kanske någon annan kan fylla på med länkar). Fundera också på om de absolut måste vara lika långa - ofta är det tabelltänk som gör att man får för sig att det måste se likadant ut.

Om du vill ha skuggade kanter kan man lägga det som bakgrund i bodyn. Då kan du skippa #mitt.

Tack så mycket för tipsen!
efter martines post så började jag fundera och jag tog bort float på #txt och eftersom den ligger i #mitten så stretchas #mitten lika mkt som #txt gör.

men när jag tog bort float så kom nästa problem , #meny #txt #imgs ligger inte i samma höjd. jag har testat med alla möjliga kombinationer med position men det funkar inte. nån som har lösning på det här? känns som det borde vara simpelt men jag har verkligen inte lyckats..

så här ser koden ut nu

Citat:

body {
background-image: url(img/bakgrund.gif);
background-repeat: repeat-x;
height:100%;
text-align:center;
}

#top
{
background-image:url(img/bg_top.png);
width:900px;
height:29px;
}

#header
{
background-image:url(img/bg_middle.png);
width:900px;
height:165px;
}

#mitten
{
background-image:url(img/bg_middle.png);
width:900px;
}

#txt
{
background-color:#EFF1E7;
width:500px;
text-align:left;
position: static;
margin-left: 150px;
}

#imgs
{
background-image:url(img/bg_bg.jpg);
width:220px;
margin-top:0px;
}

#botten
{
background-image:url(img/bg_botom.png);
width:900px;
height: 36px;
}

<div id="top"> </div>
<div id="header">[img]img/header.jpg[/img]</div>
<div id="mitten"> *
<div id="meny"></div>
<div id="txt"></div> *
* <div id="imgs"></div>
</div>
<div id="botten"></div>

Efter mycket trixande så fick jag #imgs att ligga på samma nivå. men trots att sidan är validerad så är det mkt buggar när man jämför den i IE och FF , i IE är den centrerad men inte i FF , (testade göra en container med text-align center men det gick inte det heller) i FF ligger DIVarna som jag vill ha dom , men i IE så blir det knas. för att lättare beskriva så har jag lagt upp sidan här:

http://www.mr-ab.se/test/testar-div1.html

mvh
en glad amatör :)

Ang. höjden borde du kunna lägga dem i en wrapper div och sen har procentuella höjder på de två divvarna .. fast jag har inte testat så ta mig inte på orden. :)