Nieuw kolom als inhoud groter is

Status
Niet open voor verdere reacties.

xvilo

Gebruiker
Lid geworden
14 dec 2008
Berichten
492
Hallo Dames,

Stel, ik heb deze markup:


HTML:
<!doctype html>


<html lang="en">
<head>
  <meta charset="utf-8">


  <title>The HTML5 document</title>
  <meta name="description" content="YOLO CONTENT">
  <meta name="author" content="xvilo">
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  <link rel="stylesheet" href="css/styles.css?v=1.0">
  
     <style>
        
        *{
           box-sizing: border-box;
        }
        body{
           margin: 0px;
           height: 0px;
           height: 100vh;
        }
      .col{
         width: 542;
         float: left;
         display: block;
         height: 100%;
         overflow: hidden;
         padding: 5em;
             text-overflow: ellipsis;
      }  
   </style>


  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>


<body>


<div id="data1" class="col">
<!--   data Start -->
<p>lot's of these</p>
<!--   data End -->
<>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/scripts.js"></script>
</body>
</html>


Hoe kan ik er dan voor zorgen dat als de tekst de onderkant van de div heeft bereikt, er een nieuwe div word aangemaakt en vervolgens daar de rest van de content in word geplaatst. Maar als daar de content de onderkant weer raakt, er weer een nieuwe div word gemaakt.... and on.... and on.... and on....


Hij zou ook resizebaar in hoogte moeten zijn, dus als iemand het scherm in hoogte kleiner maakt, er dan meer kolommen komen.....


Alvast bedankt,


//xvilo
 
Nou ik zag die al voorbij komen. Maar waar ik het voor nodig heb is dat de hoogte en breedte vast zijn. En dat vervolgens er steeds een kolom naast gezet word zodat de pagina dus zo alleen horizontaal scrollbaar word.
 
Ook dat kan ermee, alleen heb je eventueel een container div nodig als niet de volledige pagina, maar enkel dat gedeelte van de inhoud moet scrollen. Ik heb even een snel voorbeeldje samengesmeten op http://jsfiddle.net/hdvw87v2/
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan