Lave en lodret streg

Du laver blot et element f.eks. en div, og så med en border-right på.

http://codepen.io/RasmusLauridsen/pen/BzEGrx

Her kan du se et eksempel, der virker.

Hej rhl2401 - det fungerer rigtig nok på skærm, må når man ser det på moilos er det ikke responsivt. Så står de 2 kolonner ved siden af hnanden istedet for under hinanden. Har du også løsningen på dette?

På forhånd tak :-)

Undskyld. Jeg havde forstået som om at stregen bare skulle forsvinde. Her er en opdateret version, der skulle lave dem 100% bredde når det er mobil. (Jeg har lavet en rød border i mobilversionen, for at illustrere det bedst muligt)

http://codepen.io/RasmusLauridsen/pen/BzEGrx

Ellers vil jeg anbefale dig at bruge Bootstrap-frameworket. Det kan klare opgaven med det reponsive på 0,5, hvor det er lidt mere besvæligt og kræver mere kode når man gør det "manuelt". Hvis man bruger Bootstrap, kan det også komme en til gode senere. ;)

www.getbootstrap.com

Har vist nogenlunde styr på formlen nu - mangler dog bare en smule mere margin til højre i den venstre kolonne


.left; .right; {width:100%;}
@media screen and (min-width: 768px) {
.left {
  width: 45%;
  float:left;margin-left: 4%;
  display: inline-block;
  border-right: 2px solid black;
}

.right {
  width: 46%;
  float: left; margin-left:4%;
  display: inline-block;
}
}

@media screen and (max-width: 500px) {
  .left {
  width: 100%;
 
}

.right {
  width: 100%;
 
  margin-top: 20px;
}
}

Kan du ikke give den det?

mangler at finde ud af hvordan jeg laver margin i venstre  kolonne ind mod stregen så der bliver mere luft...

Du skal bruge padding i det tilfælde.

.left {
    padding-right: 50px;
}

.right {
    padding-left: 50px;
}



Da du kan se, at det er en border vi leger med, kan du på dette billede se, hvorfor det er padding og ikke margin.

Margin er som hovedregel afstanden til andre elementer.
Border er en visuel steg, prikker osv., der ligger helt oppe ad borderen.
Padding er afstanden til borderen og det inderste af margin.

http://i.stack.imgur.com/PeSIJ.gif

Hov, jeg glemte at skrive, at du kan kigge på linket, jeg har sendt et par gange før, der nu er opdateret med et eksempel med padding.

Fantastisk (y)

Tusind tak for hjælpen, nu spiller det

God søndag