html in twee ongelijke delen

[chiper]

Hallo

Ik zou graag mijn html document verdelen in twee ongelijke delen zodat ik elke DIV een verschillend achtergrondkleur kan geven. Kan er iemand mij vertellen welke css eigenschappen ik de DIV's moet meegeven om dit te bekomen?
Mijn idee komt van volgende website: http://www.dagenzondervlees.be/groepen/asse/.

Alvast bedankt voor de info!

Peter Hertecant
0479291201

 

[botsenbytes]

2 in a row?

Beste Peter,

Kan je niet gewoon 1 div-container maken om je gehele website (width100%) met daarin 2 div-containers (beide ook width 100%) onder elkaar met elk een eigen achtergrond? Dat lijkt me de gemakkelijkste oplossing maar dan heb je ze boven elkaar.

Je kan beide containers natuurlijk ook een aangepaste width geven en ze naast elkaar zetten met 3 div-containers bijvoorbeeld: <div class="row"> met daarin <div class="links> met bijvoorbeeld 33.33% width en <div class="rechts"> met bijvoorbeeld 66.66% width maar dan moet je "row", "links" en "rechts" goed instellen in css.

Maar als je hier niet uit komt kan je dan niet beter een bestaande template gebruiken en die aanpassen naar je eigen wensen?

Succes en met vriendelijke groet,
Christiaan Huizinga

www.botsenbytes.nl

 

[chiper]

Beste Peter,

Kan je niet gewoon 1 div-container maken om je gehele website (width100%) met daarin 2 div-containers (beide ook width 100%) onder elkaar met elk een eigen achtergrond? Dat lijkt me de gemakkelijkste oplossing maar dan heb je ze boven elkaar.

Je kan beide containers natuurlijk ook een aangepaste width geven en ze naast elkaar zetten met 3 div-containers bijvoorbeeld: <div class="row"> met daarin <div class="links> met bijvoorbeeld 33.33% width en <div class="rechts"> met bijvoorbeeld 66.66% width maar dan moet je "row", "links" en "rechts" goed instellen in css.

Maar als je hier niet uit komt kan je dan niet beter een bestaande template gebruiken en die aanpassen naar je eigen wensen?

Succes en met vriendelijke groet,
Christiaan Huizinga

www.botsenbytes.nl

 

[chiper]

Beste Christiaan Huizinga


Bedankt voor de tips, ik probeer het uit!

Chiper

 

[bron]

Hi,

Met botsenbytes eens. Zijn idee in code wordt dan:

HTML

<div class="row">
  <div class="links">
    Linker kolom
  </div>
  <div class="rechts">
    Rechter kolom
  </div>
</div>

CSS

.row, .links, .rechts {
  box-sizing: border-box;
}
.row:before, .row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}
.links {
  float: left;
  width: 33.33%;
}
.rechts {
	float: left;
	width: 66.66%;
}

Suc6. Have fun.

 

[chiper]

.row:before, .row:after {
display: table;
content: " ";
}
.row:after {
clear: both;

Waarvoor diene deze css eigenschappen (sorry, ik ben nog maar een beginner )

 

[bron]

Hiermee voorkom je dat de float's van de linker en rechter kolom invloed hebben op de html die voor/na <div class="row"> staat.

Bij gebruik van float's binnen een <div> is het handig dit toe te passen om te voorkomen dat delen van je layout op een verkeerde plek terecht komen.

Deze css staat ook wel bekend als clearfix. Googel even voor meer info.

** iedereen was ooit een beginner