Hallo allemaal!

Ik heb een klein probleempje, ik ben bezig met het opstarten van mijn website en heb op mijn homepage 3 DIV boxen staan (Naast elkaar). Alleen wil ik dat als alles responsive wordt (Op bijvoorbeeld mobiel) de tekstboxen onder elkaar komen te staan, nu strekken de boxen zich helemaal naar onderen uit en blijven ze naast elkaar staan, waardoor de tekst helemaal wordt uitgestrekt.

Het moet dus zo zijn dat wanneer de teksten responsive worden getoond, ze niet naast elkaar maar onder elkaar komen te staan!

De code die ik nu heb is als volgt:

<div style="width: 30%; position: relative; clear: left; margin-left: 0; float: left; margin: 0px; padding: 0px;">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet massa in tortor mattis congue. Nulla viverra lectus mi, non auctor magna ornare nec. Donec laoreet, nunc nec rhoncus auctor, nibh orci pellentesque odio, eu molestie justo ipsum non erat. Vestibulum eu sem placerat, sodales diam ac, mollis magna.
</div>


<div style="width: 30%; position: relative; margin-left: 5%; float: left;">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet massa in tortor mattis congue. Nulla viverra lectus mi, non auctor magna ornare nec. Donec laoreet, nunc nec rhoncus auctor, nibh orci pellentesque odio, eu molestie justo ipsum non erat. Vestibulum eu sem placerat, sodales diam ac, mollis magna.
</div>


<div style="width: 30%; position: relative; margin-left: 5%; float: left;">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet massa in tortor mattis congue. Nulla viverra lectus mi, non auctor magna ornare nec. Donec laoreet, nunc nec rhoncus auctor, nibh orci pellentesque odio, eu molestie justo ipsum non erat. Vestibulum eu sem placerat, sodales diam ac, mollis magna.
</div>

Misschien mensen die mij hiermee kunnen helpen, en de oplossing ervoor weten?

Alvast ontzettend bedankt!

Groeten,

Tom!

Dan moet je middels "CSS media queries" zorgen dat die DIV's bij een smaller scherm geen 30%, maar 100% breed zijn. Dan komen ze netjes onder elkaar.

Hier is wat uitleg daarover:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://developers.google.com/web/fu...-media-queries
https://developer.mozilla.org/en-US/.../Media_queries

Dus voor alle duidelijkheid, jouw code moet dit worden:

<div style="width: 100%; position: relative; margin-left: 0%; float: left;">

Probeer jezelf overigens altijd aan te leren te werken met een externe stylesheet, dat is niet moeilijk en het scheelt een hele hoop onnodige code. Verder is het aanpassen van dingen een stuk makkelijker.

Mogelijk is Bootstrap een tip (http://getbootstrap.com/).
De grid van Bootstrap kan je veel werk schelen :):
http://getbootstrap.com/css/#grid

Is het probleem inmiddels verholpen?
Zo niet, help ik je graag :)

Het is sowieso handiger om een style.css bestand te maken en daar alle opmaak in te stoppen. Dit is niet zo netjes en geen HTML5.
En als ik dit zo zie heb je dit in je CSS bestand nodig:

@media (max-width: 1000px){
#naamvandediv{width: 100%; float: none;}
}

@chiel ob: Als het om 3 DIV's gaat die op één pagina getoond worden, mag je niet alle 3 div's dezelfde ID geven. Een ID moet namelijk altijd uniek in de HTML van een pagina zijn. Een class kan wel.

Dit zou wel kunnen:

HTML:

<div class="3divjes">
inhoud van de 1e DIV
</div>
<div class="3divjes">
inhoud van de 2e DIV
</div>
<div class="3divjes">
inhoud van de 3e DIV
</div>

CSS:

div.3divjes{
width: 30%;
position: relative;
margin-left: 5%;
float: left;
}

@media (max-width: 1000px){
div.3divjes{
width: 100%;
position: relative;
margin-left: 0%;
float: none;
}
}

Ja oke, die regel van je mag niet 3 dezelfde ID's op een pagina wist ik niet. Waar haal je die vandaan?
Ik haal mijn code altijd door de w3c validator, die geeft dat ook niet aan. Classes is inderdaad wel mooier, maar dat het niet mag?

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

http://www.w3schools.com/css/css_selectors.asp

@B. van der Weerd, ah top. Dat wist ik niet, bedankt!

Graag gedaan. :-) In dit geval kan de TS er ook voor kiezen om de 3 div's ieder hun eigen class mee te geven, zodat je daarmee de onderlinge marges nog beter kunt bepalen.