[løst] css posisjonering. div side ved side

[grimjoey]

Hvordan får jeg to div elementer i et annet div element til å legge seg side ved side.

 

de to elementene er halve bredden av det omfavnende div elementet. jeg får ønskelig effekt med css { position: absolute } og spesifisere marger/avstander, men da legger det seg tilsynelatende utenfor det omfavnende elementet.

 

Noen her som har en god løsning?

 

+---------------+
|div3           |
|+------+------+|
||div1  |div2  ||
||      |      ||
||      |      ||
|+------+------+|
+---------------+

Endret 18. juli 2007 av grimjoey

[Ståle]

float

[grimjoey]

Php skriver ut annenhver div inne i "containeren" som id=left og id=right.

 

jeg forsøkte med #left { float: left; } og #right { float: right; } da får jeg de på hver sin side, men de havner ikke på samme linje.

 

+------------+
|container   |
|+----+      |
||left|      |
||    |      |
|+----+      |
|      +----+|
|      |righ||
|      |t   ||
|      +----+|
+------------+

[Nano-]

Prøv å definere bredde på elementene som skal ligge inntil hverandre så summen blir mindre eller lik bredden av containeren.

[araziel]

evt. sett de til inline istedetfor block (methinks). lenge siden jeg gjorde noe webdesignwise.

http://www.quirksmode.org/css/display.html#inline

[grimjoey]

har bredde lik halve kontainer. forsøkte bredde < container/2. hjalp ikke. forsøkt både display: inline; og å endre div til span. (div er block, span er inline) første gjorde ingen forskjell. andre ble helt rart. mulig det går an å jobbe ut i fra span, men det så ut som en del arbeid. alt ble litt hulter til bulter.

 

edit: undersøkte linken din. ser ut som display: table[-cell/-row]; er way to go. takk.

 

edit: rettelse: fikk det til med float left/right, men problemet er at containeren ikke følger med da, så bakgrunnen kutter.

 

+-----------------+
|div3             |
| +------+------+ |
| |div1  |div2  | |
| |      |      | |
| |      |      | |
| +------+------+ |
| +------+------+ |
| |div3  |div4  | |
+-|      |      |-+
  |      |      |
  +------+------+

Endret 18. juli 2007 av grimjoey

[pakke]

For å få containeren til å følge med trenger du å legge til en clearfix. Den vanligste metoden er å legge til en div sist inni containeren, etter alt annet innhold i den.

 

F.eks

<div class="clearfix"></div>

 

Med følgende css

.clearfix {clear:both;}

[grimjoey]

har forsøkt clear: both; også. funka dårlig. ikke på den måten du beskriver dog. jeg brukte clear på de elementene som jeg har. la ikke til noe på slutten. mulig det funker, men jeg fant en løsning. kapslet inn de to elementene som skulle ligge side ved side i en ny div med { display: table-row; }. så la jeg til { display: table-cell; } i de aktuelle elementene.

[Arve Systad]

Sett float: left; på begge to, og breidden må vere slik at det er plass i parent-elementet. Det går. Left og Right-floatnig blir surr

[grimjoey]

takk for tipset. det blir vel minimalist metoden og passer bra for meg. skal sjekke det ut.