HTML/CSS vraagje.

Hallo one2xs,

Ik heb een vraagje. Ik ben momenteel bezig met coderen en ik ben er geen professional in, dus ik heb een klein vraagje aan jullie.

Ik wil een site maken waar in je dit soort boxen naast elkaar zie:
Hoe moet ik dit naast elkaar zetten, want ik krijg alles onder elkaar.. wat ik ook doe.

Hopelijk kunnen jullie me verder helpen,
Sam.

2 linkse divs geef je float:left; en dan doe je de margin bij de divs van de width van de vorige divs.

Ja, maar dat bugt nogal.. Ik wil het echt lekker naast elkaar hebben op welke resolutie je het ook bekijk.

<style>
#center {
    width:1000px;
    margin:0 auto;
}
#box_1 {
    width:331px;
    float:left;
    border:1px #000 solid;
}
#box_2 {
    width:331px;
    float:left;
    margin-left:1px;
    margin-right:1px;
    border:1px #000 solid;    
}
#box_3 {
    width:331px;
    float:left;
    border:1px #000 solid;    
}
</style>
<div id="box_1">a</div>
<div id="box_2">a</div>
<div id="box_3">a</div>

<div id="box_1">a</div>
<div id="box_2">a</div>
<div id="box_3">a</div>

Ah kijk, daar heb ik wat aan. Bedankt.

slecht voorbeeld van smiegels. Indien je een div meerdere malen gebruikt dan gebruik je geen id maar class. Ook moet je na een aantal floats clear: both; doen. Check anders eens mijn tutorial daar staat ook uitgebreid in hoe je divs naast elkaar moet plaatsen.

Daar kwam ik ook achter ja, heb het ietsjes anders aangepakt. 3 rijen met daarin de boxes. Toch bedankt!

(Van dat id en class vond ik ook al raar, omdat mij er echt is ingestampt nooit meerdere keren een id te gebruiken.)

Inderdaad beter zo, 3 aparte divjes; 1 per rij die alle 3 in 1 div zitten die meestal container noemt die gecentreerd is. Per rij kan je nog aparte contentboxjes maken in de vorm van een divje.

Marjolein schreef:

slecht voorbeeld van smiegels. Indien je een div meerdere malen gebruikt dan gebruik je geen id maar class. Ook moet je na een aantal floats clear: both; doen. Check anders eens mijn tutorial daar staat ook uitgebreid in hoe je divs naast elkaar moet plaatsen.

hij vraagt hoe het moet niet hoe je een vailid pagina maakt.

Smiegles schreef:

Eerdere citaten tonen

Marjolein schreef:

slecht voorbeeld van smiegels. Indien je een div meerdere malen gebruikt dan gebruik je geen id maar class. Ook moet je na een aantal floats clear: both; doen. Check anders eens mijn tutorial daar staat ook uitgebreid in hoe je divs naast elkaar moet plaatsen.

hij vraagt hoe het moet niet hoe je een vailid pagina maakt.

Ik ga er dan wel vanuit dat het goed wordt uitgelegd, maar never mind. Het is al helemaal opgelost.

Ik zou doen:

<style>
#left {float:left; width:250px;}
#main {float:left: width:250px;}
#right {float:right; width:250px;}

.box1 {border:1px solid #000;}
.box2 {border:1px solid #ff0000;}
.box3 {border:1px solid #ededed;}
</style>

<div id="left">
  <div class="box1"></div>
  <div class="box1"></div>
</div>

<div id="main">
  <div class="box2"></div>
  <div class="box2"></div>
</div>

<div id="right">
  <div class="box2"></div>
  <div class="box2"></div>
</div>

Dat is precies de manier die ik heb gebruikt, toch bedankt.

Freestyle schreef:

Ik zou doen:

<style>
#left {float:left; width:250px;}
#main {float:left: width:250px;}
#right {float:right; width:250px;}

.box1 {border:1px solid #000;}
.box2 {border:1px solid #ff0000;}
.box3 {border:1px solid #ededed;}
</style>

<div id="left">
  <div class="box1"></div>
  <div class="box1"></div>
</div>

<div id="main">
  <div class="box2"></div>
  <div class="box2"></div>
</div>

<div id="right">
  <div class="box2"></div>
  <div class="box2"></div>
</div>

Met daarrond een div met een bepaalde width die gecentreert is dmv margin: 0 auto;