Div-Container floaten

Kategorie: HTML/CSS
Publikationsdatum: 29.03.2011
Vielfach ergibt sich der Wunsch, zwei Div-Container nebeneinander zu platzieren. Der erste Div-Container sollte eine fixe Breite besitzten und der zweite Div-Container soll den Rest des Platztes verbrauchen. Des Weiteren lässt dich dann noch definieren, ob der zweite Div-Container den ersten umfließen oder nur daneben platziert werden soll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.

Der allgemein Aufbau für die oben dargestellten Varianten sind im folgenden HTML-Code ersichtlich.
HTML
  1. <!-- linke Variante -->
  2. <div class="div-container">
  3. <div class="div-content_left"><img src="/userfiles/images/hilfe/wiki/div-container_floaten/div-container_floaten.jpg" width="200" height="100" alt="" title="" border="0" /></div>
  4. <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.</div>
  5. </div>
  6. <!-- linke Variante ENDE -->
  7.  
  8.  
  9. <!-- rechte Variante -->
  10. <div class="div-container">
  11. <div class="div-content_left"><img src="/userfiles/images/hilfe/wiki/div-container_floaten/div-container_floaten.jpg" width="200" height="100" alt="" title="" border="0" /></div>
  12. <div class="div-content_right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.</div>
  13. </div>
  14. <!-- rechte Variante ENDE -->
Als nächstes wird dann der CSS-Code in Angriff genommen. Hier ist zu beachten, dass nur das 1. Div gefloatet wird. Die letzte Klasse div-content_right wird nur für die zweite Varainte benötigt.
CSS
  1. /* Container */
  2. .div-container {
  3. overflow: hidden;
  4.  
  5. width: 430px;
  6. height: auto;
  7.  
  8. padding: 10px;
  9.  
  10. border: 1px solid #cacbcb;
  11. }
  12.  
  13. /* linkes Div */
  14. .div-content_left {
  15. overflow: hidden;
  16. float: left;
  17.  
  18. padding-right: 20px;
  19. padding-bottom: 20px;
  20. }
  21.  
  22. /* rechtes Div */
  23. .div-content_right {
  24. overflow: hidden;
  25. }
Stichwörter: HTML, CSS, Div-Container, float
 
 
NACH OBEN