Avatar billede Slettet bruger
01. september 2017 - 16:24 Der er 4 kommentarer og
1 løsning

At lave to bokse ved siden af hindanden i HTML

Hej
Der er noget der simpelthen driller.
Jeg har gjort det en del gange før, men det er som om at løsningen på det er smidt fuldstændig ud af hovedet...

Det jeg vil have lavet er to "content-boxe" som skal være ved siden af hindanden: en til venstre og den anden til højre.

Jeg har kaldt dem følgende: <div class="half-column-left"> og <div class="half-column-right">

Jeg kan godt få boksene til at være ved siden af hindanden ved at give boksene noget css. Problemet opstår så, når jeg vil have teksten i boksene til at blive rygget lidt ind i boksen. Det har jeg forsøgt at løse ved at style med "padding", men når jeg går det, overlapper de to kolonner hindanden.
Avatar billede Slater Ekspert
01. september 2017 - 16:33 #1
Umiddelbart burde de ikke overlappe hinanden fordi du bruger padding, så kan du ikke lige vise os hvad du gør? Evt med en jsfiddle?
Avatar billede olsensweb.dk Ekspert
01. september 2017 - 16:40 #2
hvad står der i half-column-left og half-column-right ??
er de 2 boxe floated ??
lav en online demo og kom med et link som forslået i #1
Avatar billede Slettet bruger
01. september 2017 - 16:54 #3
Her kan man se et eksempel: https://jsfiddle.net/hq27z8ay/
Avatar billede Slater Ekspert
01. september 2017 - 18:21 #4
Ah ja, det er kombinationen af padding og en fast bredde. Når du sætter begge til at være 50% brede og padding så kommer oven i, så er de naturligvis mere end 50% brede og falder under hinanden.

Det kan du heldigvis ret nemt rette, ved at fortælle browseren at padding ikke skal lægges oven i bredden, hvilket gøres med "box-sizing".

Eksempel: https://jsfiddle.net/hq27z8ay/1/
Avatar billede Slettet bruger
01. september 2017 - 21:06 #5
Fantastisk! Mange tak!
Go' weekend.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester