WN - Problem med css

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

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

- - Problem med css (https://www.wn.se/forum/showthread.php?t=16667)

I följande kod vill jag få left, menu och main att ligga bredvid varann inuti content. Höjden på content ska alltså ändras om divarna i content ändras. Detta för att footer ska flyttas ned om dessa ändras.

Jag har gjort det här massor av ggr förut, men jag får det inte att funka. Som det funkar nu så ligger left, menu och main ovanpå content istället.

Vad gör jag för fel?

Html-kod:

Kod:

        <div id="whole">

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

 <div id="topline"></div> 

 

 <div id="content">

         <div id="left"></div>

<div id="menu"></div>

<div id="main"></div> 

 </div> 

 

 <div id="footer"></div> 

        </div>

CSS:

Kod:

body

{

        background: #DEECF3;

        font-family: Verdana;

}



#whole 

{

        margin: 0px auto;

        width: 651px;

}



#header

{

        width: 651px;

        height: 70px;

        background: url(images/header_back.gif) no-repeat;

}



#topline

{

        width: 651px;

        height: 24px;

        background: #fff url(images/topline_back.gif) repeat-x;

        border-bottom: solid 1px #BCBCBC;

}



#content 

{

        margin: 0px;

        padding: 0px;

        background: #fff;

        height: 400px;

        width: 651px;

}



#left

{

        width: 40px;

        float: left;

}



#menu

{

        background: #fff url(images/menu_back.gif) repeat-x;

        border-right: solid 1px #D0D0D0;

        width: 198px;

        height: 400px;

        float: left;

}



#main

{

        float: left;

}



#footer

{

        width: 651px;

        height: 39px;

        background: url(images/footer_back.gif) no-repeat;

}

Kod:

<div id="whole">

  <div id="content">

   <div id="left"></div>

   <div id="menu"></div>

   <div id="main"></div>

   <div id="footer"></div>

  </div>

</div>

Kod:

#menu {

  background: #fff url(images/menu_back.gif) repeat-x;

  border-right: solid 1px #D0D0D0;

  width: 198px;

  float: left;

  }

Kod:

#footer {

  clear: left;

  width: 651px;

  height: 39px;

  background: url(images/footer_back.gif) no-repeat;

}

Jag har lagt sidfotsdiven inne i content-diven, tagit bort height från #menu samt satt clear: left; på sidfotsdiven.

Ja, just det så var det man fick till det. Tackar.

Om jag nu fyller main med innehåll och vill att både left och menu ska få samma höjd som main, hur löser jag det?

Citat:

Originally posted by Martin@Oct 11 2006, 19:25
Ja, just det så var det man fick till det. Tackar.
Om jag nu fyller main med innehåll och vill att både left och menu ska få samma höjd som main, hur löser jag det?

Det där brukar tas upp titt som tätt och är tyvärr lite bökigt. Har ingen lösning på rak arm men ett fulhack kan vara att lägga en bakgrundsbild i content-diven som får det att se ut som att left och menu hänger med ända ned.

Citat:

Ursprungligen postat av elofsson

Citat:

Ursprungligen postat av Martin

Ja, just det så var det man fick till det. Tackar.
Om jag nu fyller main med innehåll och vill att både left och menu ska få samma höjd som main, hur löser jag det?

Fulhack? Det är väl snarare så att den enda pålitliga lösningen är just Faux Columns. Eftersom alla andra lösningar kräver just fulhack, såsom Javascript eller CSS hacks och filter.

Några källor:
http://alistapart.com/articles/fauxcolumns/ (inga fulhacks).
http://www.positioniseverything.net/articl...out/equalheight (väldigt många fulhacks)
http://www.paulbellows.com/getsmart/balance_columns/ (smidigaste lösningen, om man lyckas övervinna sin rädsla för att använda Javascript för visuella förbättringar)