4 divs naast elkaar met ruimte er tussen.

Hoi!

Ik zit met een probleem.
Ik wil 4 divs naast elkaar hebben, met ruimtes ertussen, op mijn eigen pc 1920x1080 px laat hij alles perfect zien, maar als hij op een kleiner scherm komt is het een puinhoop.
Kan iemand me helpen hierbij?

Hier de css:

Spoiler tonen

.box1{
background: url(images/box1.png);
width: 24%;
height: 100px;
margin-left:15px;
margin-top:15px;
margin-right:15px;
background-color: #fff;
float: left;
}
.box2{
background: url(images/box2.png);
width: 24%;
height: 100px;
float: left;
margin-top:15px;
margin-right:15px;
background-color: #fff;
}
.box3{
background: url(images/box3.png);
width: 24%;
height: 100px;
float: right;
margin-top:15px;
margin-right:15px;
background-color: #fff;
}
.box4{
background: url(images/box4.png);
width: 24%;
height: 100px;
float: right;
margin-top:15px;
margin-right:15px;
margin-left:15px;
background-color: #fff;
}

alvast bedankt.

media screens

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Hoe zou jij het doen?

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Altijd met procenten,
En dan media screens toepassen.

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Met procenten werken is niet zo super moeilijk. En bij responsive heb je het vooral nodig.

Thijmgrijs schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Altijd met procenten,
En dan media screens toepassen.

Vandaar dat jij altijd zoveel vraagt voor een layout Omdat je er jaren mee bezig bent.

Arjann schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Hoe zou jij het doen?

Je kan het eventueel doen met tables, dat is lekker makkelijk.
Als je even een live demo regelt kan ik vandaag of morgen even voor je kijken

Gebruik geen tables als je geen table hoeft te maken

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Altijd met procenten,
En dan media screens toepassen.

Vandaar dat jij altijd zoveel vraagt voor een layout Omdat je er jaren mee bezig bent.

Arjann schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Hoe zou jij het doen?

Je kan het eventueel doen met tables, dat is lekker makkelijk.
Als je even een live demo regelt kan ik vandaag of morgen even voor je kijken
Nou kijk, daar ga je al de fout in.
tables, niet gewoon niet.

Je hebt een wrapper, met volledige breedte 100%.
Denk aan de marges ben je 10% aan kwijt ongeveer.
Dan houd je 90% over om te verdelen over 4 boxes, die geef je dus 1/4 van 90% mee als width & letop geen height!
Gewoon float: left; gebruiken, of je maakt er een unordered-list van met display: inline; & list-style: none;

Thijmgrijs schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Altijd met procenten,
En dan media screens toepassen.

Vandaar dat jij altijd zoveel vraagt voor een layout Omdat je er jaren mee bezig bent.

Arjann schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Eerdere citaten tonen

Thijmgrijs schreef:

Ten eerste werk met procenten in je marges, en maak er een container omheen like this:

Codeblok (boxes.php):

1
2
3

.container{
width: 100%;
}

In die container kun je ook bijvoorbeeld:
display: inline; mee geven, zorgt ervoor dat alles op de zelfde hoogte/regel wordt geplaatst (Dus naast elkaar)

Het probleem moet opgelost zijn.
Zet ook geen height op je boxes, laat de tekst de hoogte bepalen.

En background-color is niet nodig gewoon simpel weg background:

Ik zou juist niet met procenten werken. Dat is veel te moeilijk en verschilt per beeldscherm.

Hoe zou jij het doen?

Je kan het eventueel doen met tables, dat is lekker makkelijk.
Als je even een live demo regelt kan ik vandaag of morgen even voor je kijken
Nou kijk, daar ga je al de fout in.
tables, niet gewoon niet.

Je hebt een wrapper, met volledige breedte 100%.
Denk aan de marges ben je 10% aan kwijt ongeveer.
Dan houd je 90% over om te verdelen over 4 boxes, die geef je dus 1/4 van 90% mee als width & letop geen height!
Gewoon float: left; gebruiken, of je maakt er een unordered-list van met display: inline; & list-style: none;

Dat laatste is wel een goed idee