Hvordan lager jeg tre kolonner med Div's (CSS)

[JohnRichard]

Hei!

 

Trenger en måte å lage 3 kolonner på.

 

Slik ville jeg gjort det om jeg hadde brukt tables fremdeles

 

<table width="900">
<tr>
 <td width="300">
 <p> </p>
 </td>
 <td width="300">
 <p> </p>
 </td>
 <td width="300">
 <p> </p>
 </td>
</table>

 

 

Jeg gjorde slik med CSS / XHTML:

#headlights {
border: 1px dotted #00F; /* testing purposes */
padding: 4px;
width: 772px;
}

#container1 {
border: 1px dotted #123456; /* testing purposes */
padding: 4px;
position: absolute;
width: 245px;
}

#container2 {
border: 1px dotted #123456; /* testing purposes */
margin-left: 255px;
padding: 4px;
position: absolute;
width: 245px;
}

#container3 {
border: 1px dotted #123456; /* testing purposes */
margin-left: 510px;
padding: 4px;
position: absolute;
width: 245px;
}

 

<div id="headlights">
<div id="container1">
<p>Lorem ipsum. Container 1.</p>
</div>
<div id="container2">
<p>Lorem ipsum. Container 2.</p>
</div>
<div id="container3">
<p>Lorem ipsum. Container 3.</p>
</div>
</div>

 

 

Men problemet mitt er at de legger seg oppå div'ene som skal vises over og under disse tre kolonnene. Regner med det er "position: absolute;" som gjør det.

 

1) Er dette riktig måte å lage 3 kolonner på, hvordan gjøre det på en annen (riktig) måte?

 

2) Dersom dette er en kurrant måte å gjøre det på, hvordan løser jeg problemet?

[svamp]

Se her: http://www.thenoodleincident.com/tutorials...sson/boxes.html

[PoleCat]

<div id="wrap">
 <div id="left"></div>
 <div id="mid"></div>
 <div id="right"></div>
 <hr class="clear">
</div>

 

#wrap {
 width: 751px !important;
 width /**/ : 759px;
 padding: 4px;
}

#left {
 float: left;
 width: 245px;
 width /**/ : 253px;
 padding: 4px;
}

#mid {
 float: left;
 width: 245px;
 width /**/ : 253px;
 padding: 4px;
}

#right {
 float: left;
 width: 245px;
 width /**/ : 253px;
 padding: 4px;
}

hr.clear {
 clear: left;
 height: 1px;
 overflow: hidden;
 visibilty: hidden;
}

 

Ikke testa, men burde funke. Er mer prinsippet jeg tenker på.

[Hagforce]

PoleCat

 

Sikkert dumt spørsmål men hvordan blir den koden din med topp og bunn?

 

Takker for svar

[PoleCat]

Hagforce:

<div id="wrap">
<div id="top"></div>
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
<div id="footer"></div>
</div>

 

#wrap {
width: 751px !important;
width /**/ : 759px;
padding: 4px;
}

#top {
 height: 100px;
}

#left {
float: left;
width: 245px;
width /**/ : 253px;
padding: 4px;
}

#mid {
float: left;
width: 245px;
width /**/ : 253px;
padding: 4px;
}

#right {
float: left;
width: 245px;
width /**/ : 253px;
padding: 4px;
}

#footer {
 height: 20px;
} 

 

Omtrent sånn burde funke.

[Hagforce]

Takk for den PoleCat!

 

Funker bra!

 

Bare ett spørsmål, eller to forresten.

 

Hvordan får jeg nyhets teksten til å flyte opp vedsiden av banneren??

 

Her er siden http://www.hagforsen.com/kf/index.php

 

Hvardan får jeg "gjemt" tekst som blir for mye bak footeren.

Tengte bare å lage en "les mer link"

 

Takker for koden igjen!

Hadde brukt absolute posisjonering før.

Endret 1. oktober 2004 av Hagforce

[PoleCat]

Hvordan får jeg nyhets teksten til å flyte opp vedsiden av banneren??

Tja, slik at du skal slippe å endre så alt for mye i koden din, så kan du bare absolutt-posisjonere #nyheter. Ser ingenting i veien for det, da det ikke skal være noen elementer under denne.

Hvardan får jeg "gjemt" tekst som blir for mye bak footeren.

Dersom du opererer med en fast høyde på det feltet (det må du ha dersom dette skal fungere), setter du "overflow: hidden" på div'en som ikke skal bli større, dermed vil den ikke bli større en det du har fortalt at den skal være, uansett innhold.