Back to frontpage
Hét vraag- en antwoordplatform van Nederland

Hoe maak ik een 2 kolommen layout in Css?

Ik wil een 2-kolommen layout maken,
in het div: content.
De content-div is te herkennen aan het witte vlak.
Dit is de content div:
width: 800px;
height: 1000px;
left: 135px;
position: relative;
font-family: Arial;
line-height: normal;
background-color: #FFFFFF;

Ik heb 2 afbeeldingen bijgevoegd, het plaatje met de gecentreerde tekst is de huidige, ik wil het zoals ik in het andere plaatje heb gedaan.

Heeft iemand een idee hoe ik dit het beste kan doen?

Verwijderde gebruiker
12 jaar geleden
2.1K

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (3)

Ik adviseer in dit geval tables te gebruiken ipv divs
(Lees meer...)
Verwijderde gebruiker
12 jaar geleden
Verwijderde gebruiker
12 jaar geleden
Fout, tables zijn niet bedoeld voor de layout.
Verwijderde gebruiker
12 jaar geleden
Er is niets goed of fout. Er is alleen iets wat werkt en niet werkt. Dat jij ergens hebt geleerd dat tables niet mogen is dogmatisch. Mensen praten elkaar na baby.
Verwijderde gebruiker
12 jaar geleden
Onzin. Een table is niets anders dan een apart type div. Inhoud en vorm zijn al lang geen onderscheidende kenmerken. Wat wel en niet mag kun je niet uit een boekje leren.
rose
12 jaar geleden
Toch hebben ze gelijk, Hans, html (HyperText MARKUP Language) tag's zijn er niet voor de opmaak, maar voor de ordening van informatie. En een table is niet 'een apart type div'. Je kunt tegenwoordig met CSS3 een verzameling div's als table opmaken. Er is eigenlijk niets dat je met table elementen kan doen dat niet ook met div's en CSS mogelijk is. Als je weet hoe je je gereedschap moet gebruiken. Je kunt een spijker ook met een schroevendraaier in een plank slaan...
Verwijderde gebruiker
12 jaar geleden
http://www.stylesheets.nl/
Verwijderde gebruiker
11 jaar geleden
@hans, bekijk deze site maar eens en verbaas u.
http://www.csszengarden.com/
Verwijderde gebruiker
11 jaar geleden
Ziet er belabberd uit op een iphone. Was keistrak geweest ware er tables gebruikt.
Verwijderde gebruiker
11 jaar geleden


IS VEROUDERD!
Verwijderde gebruiker
11 jaar geleden
Einde discussie. Het gaat niet om wat verouderd is maar om welke methode je waar toepast.
rose
11 jaar geleden
Op beide punten fout. De discussie was nog niet afgelopen en het gaat erom dat je het juiste gereedschap kiest voor je klus. Jij adviseert iemand om tables te gebruiken voor layout en dat is domweg een slecht (en fout) advies.
html, body {
height: 100%;
list-style:none;
background-color: #fff;
font: normal 100% Arial, Helvetica, Verdana, Geneva, sans-serif
}
body, #wrapper {
height: auto;
}
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#content{
width: 800px;
height: 1000px;
left: 135px;
position: relative;
font-family: Arial;
line-height: normal;
background-color: #FFFFFF;
}
#col-left{
float:right;
width:500px;
height:auto;
margin:5px 5px 25px 5px;
}
#col-right{
float:right;
width:300px;
height:auto;
margin:5px 5px 25px 5px;
}

In je html doe je dit dan als volgt.




Hier je header.



Hier je tekst.


Hier je tekst.






Succes
(Lees meer...)
Verwijderde gebruiker
12 jaar geleden
rose
11 jaar geleden
Die ,header. tag is een HTML 5 element, dat kan problemen geven met oudere browsers. Het element is mij geheel onbekend.
Verwijderde gebruiker
11 jaar geleden
@rose, je hebt gelijk er had moeten staan
Ik zou hier een eenvoudig voorbeeld kunnen neerzetten, maar Mathew James Taylor heeft een geweldige oplossing voor column-layout (ook voor drie kolommen):

http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
(Lees meer...)
Bronnen:
rose
11 jaar geleden

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 2500
Gekozen afbeelding
+