Deus Figendi: drei Spalten mit CSS

Beitrag lesen

SELF-Forum

drei Spalten mit CSS

Deus Figendi
– Informationen zu den Bewertungsregeln

Vergiss die Box in der Mitte du hast bereit einen umfassenden Container, der das aufnehmen kann:

<!DOCTYPE html>  
<html>  
<head>  
	<title>Drei Spalten mit allumfassendem Container</title>  
 <style type="text/css">  
  #container100 {  
   width:100%;            /* Ich habe einen Container mit 100% Breite (100% Fensterbreite). */  
   background-color:#FBB;  
  }  
  #box_links {  
   width:225px;           /* links eine box mit 225 px */  
   background-color:#BFB;  
   float:left;  
   margin-right:5px;      /*von der linken und rechten Box genau  5px abstand hat. */  
  }  
  #box_rechts {  
   width:225px;           /* und rechts ebenfalls mit 225 px. */  
   background-color:#BBF;  
   float:right;  
   margin-left:5px;      /*von der linken und rechten Box genau  5px abstand hat. */  
  }  
 </style>  
</head>  
<body>  
 <div id="container100">  
  <div id="box_links">Quisque ac quam ac orci sollicitudin tincidunt. Nam bibendum urna ut neque blandit convallis. Sed nec dolor libero, et commodo leo. Cras suscipit leo mi. Maecenas pharetra sollicitudin vestibulum. Ut cursus congue orci nec condimentum.  
  </div>  
  <div id="box_rechts">Etiam vitae eros euismod metus pellentesque elementum. Praesent vitae tellus lorem, ac vestibulum erat. Vestibulum eget erat et metus congue eleifend sit amet sit amet mauris. Donec arcu leo, vehicula quis fermentum sed, feugiat vitae tellus.  
  </div>  
  Jetzt möchte ich in die mitte noch eine Box platieren, die in der Mitte die restliche Breite ausfüllt  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.  
 </div>  
</body>  
</html>
--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
Beitrag melden
–
Informationen zu den Bewertungsregeln