csspotatoo: Einfaches floaten mit 100% width

SELF-Forum

Einfaches floaten mit 100% width

csspotatoo
– Informationen zu den Bewertungsregeln

Hallo Liebe Freunde!
Ich hab schon Google durchsucht und zwar Lösungsansätze für mein Problem gefunden, doch diese haben bei mir nicht funktioniert.

Ich habe eigentl nur zwei DIV-Container, die nebeneinander angeordnet werden sollen. (siehe Bild).
Der linke, blaue Kasten hat eine feste Breite von 230px. Das weiße Div (Content) soll eine weite von 100% oder auto haben. Sprich, wenn der blaue Kasten wegfällt, soll der Contentbereich automatisch die gesamte Breite füllen.

Hier habe ich dem Content width:100% gegeben und nicht gefloatet. Floate ich das Content, rutscht es unter den blauen Kasten.
Beide Divs befinden sich nur nebeneinander, wenn ich dem Content eine feste Breite gebe.

Wo zum Geier liegt der Fehler? Jmd ne Idee wo der Bug ist?

Divs floaten

Vielen Dank im Voraus! :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Einfaches floaten mit 100% width

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@csspotatoo:

    nuqneH

    Wo zum Geier liegt der Fehler? Jmd ne Idee wo der Bug ist?

    In deinem Code. Solange du diesen nicht zeigst, lässt sich nichts weiter sagen.

    Verlinke deine Seite!

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Einfaches floaten mit 100% width

      csspotatoo
      – Informationen zu den Bewertungsregeln

      @@csspotatoo:

      nuqneH

      Wo zum Geier liegt der Fehler? Jmd ne Idee wo der Bug ist?

      In deinem Code. Solange du diesen nicht zeigst, lässt sich nichts weiter sagen.

      Verlinke deine Seite!

      Qapla'

      Hi! Danke für Deine schnelle Rückmeldung!
      Hier der Code:

        
#content {  
  width: 780px;  
  float:left;  
  position: relative;  
  background-color: #fff;  
  border-radius: 20px;  
  border-color: #CCC;  
  border-width:thin;  
  border-style: solid;  
  margin-top: 22px;  
}  
  
  
#infobox-container {  
	width: 230px;  
	height: 100%;  
	float:left;  
	margin: 22px 0 18px 0px;  
}  
  
		#infobox {  
		   background-repeat:no-repeat;  
		   width: 228px;  
		   height: 165px;  
		   float:left;  
		  
		  
		}  
		  
		  
		.infobox {  
		  width: 185px;  
		  font-family: Calibri, sans serif;  
		  font-size: 15px;  
		  padding: 10px 0 10px 23px;  
		  color: #fff;  
		}  
		  


        
<body>  
  
<div id="container" style="border-radius:8px">  
	<div id="topmenu">  
		<?php  
      		include 'topmenu.htm';  
            	?>  
          </div>  
  
	<div id="header"> <div id="logo"> </div></div>  
  
      <div id="menu">  
      	<?php  
      		include 'menu.htm';  
            ?>  
     </div>  
  
	<div id="infobox-container">  
	  <div id="infobox" style="background-image:url(images/box.png)">  
        	<div class="infobox"> HEADLINE 1<br /><br />  
      			Neue Schulungstermine, Quartal 4.<br />  
				<a href="#">weiterlesen....</a></div>  
      </div>  
  
        <div id="infobox">  
        	<div class="infobox-blue">HEADLINE 2</div>  
      </div>  
  
    </div>  
  
  
  
  <div id="content">  
    <h1> HEADLINE</h1>  
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at  
vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  
in  
  
  </div>  
  
  
</div>  
  
	<div id="footer">     	  
    	<div class="footer">Ich bin der Footer-Text</p>  
          <br />  
   	  </div>  
</div>  
  
  
 </body>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Einfaches floaten mit 100% width

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@csspotatoo:

        nuqneH

        Verlinke deine Seite!

        Hier der Code:

        Sagte ich nicht „Verlinke deine Seite“? Sollen sich jetzt alle die Mühe machen und deinen Code in eine Testdatei oder einen Service wie dabblet kopieren? Würdest du das bitte selbst tun?

          <?php

        include 'topmenu.htm';
                     ?>

        Sehr witzig. Nicht. Serverseitiger Code hilft hier kaum weiter.

        <div id="container" style="border-radius:8px">

        div-Container brauchst du nicht.

        Sämtliche Stilangaben solltest du im Stylesheet notieren; nicht inline in @style-Attributen.

        <div id="topmenu">

        Das wäre wohl besser ein nav-Element. Siehe neue Elemente für die Seitenstruktur.

        <div id="header"> <div id="logo"> </div></div>

        Und das ein header-Element. Ebenda.

        <div id="menu">

        Noch ein nav-Element.

        <div id="infobox-container">

        Vermutlich ein aside-Element. Siehe Inhalte strukturieren.

        <div id="content">

        Das main-Element. Siehe – ähm – Spec (und zwar die des W3C, nicht die der WHATWG!).

        <div id="footer">     
             <div class="footer">Ich bin der Footer-Text</p>

        Womöglich ein footer-Element. Ein Element mit der Klasse "footer" als Kind eines Elements mit der ID "footer" macht auch nicht wirklich Sinn. Ein div nicht zu schließen und ein p nicht zu öffnen auch nicht.

        <br />

        br auch nicht.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Einfaches floaten mit 100% width

          csspotatoo
          – Informationen zu den Bewertungsregeln

          Hmmm, unhöfliche Atmosphäre hier .......
          Ist noch kein Meister vom Himmel gefallen, oder kannst Du seid Geburt an programmieren??

          Danke dennoch für die Kommentare; haben mir kein Stück weitergeholfen.

          Beitrag kann geschlossen werden.

          Tschö tschö

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Einfaches floaten mit 100% width

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@csspotatoo:

            nuqneH

            Hmmm, unhöfliche Atmosphäre hier .......

            Ja, auf die Bitte, die fragliche Seite zu verlinken, einfach serverseitigen Quelltext zu posten, empfinde ich auch als unhöflich.

            Danke dennoch für die Kommentare; haben mir kein Stück weitergeholfen.

            Das ist schade, liegt aber nicht an mir. Du hättest eine Krokette werden können, willst aber lieber weiter Kartoffel bleiben?

            Beitrag kann geschlossen werden.

            Und was ist aus deinem Problem mit den Floats geworden?

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Einfaches floaten mit 100% width

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Aus dem Quellcode, den du gepostet hast, werde ich nicht schlau, weil wichtige Inhalte und Bilder fehlen. Die Bitte, den Code einmal als funktionsfähiges Beispiel hochzuladen, kam nicht von ungefähr.

    Wenn eine Spalte den restlichen Raum einnehmen soll, lässt man üblicherweise eine Spalte floaten, nämlich die mit der festen Breite. Die andere Spalte floatet nicht, hat auch keine with-Angabe, sondern bekommt margin-left mit jener Breite – oder sie wird ein »Block Formatting Context«.

    Siehe meinen Artikel Grundlagen für CSS-Spaltenlayout:
    Mehrspaltigkeit mit float

    Alternativ können beide Spalten floaten und Prozentwerte bekommen (z.B. 20% und 80%). Sie passen sich dann an die Viewport-Breite an. In dem Fall sollte man gegebenenfalls mit einer max-width für den Container arbeiten, damit der Inhalt auf großen Viewports nicht unlesbar wird. Für kleine Viewports kann man die Mehrspaltigkeit durch Media-Queries aufheben (float: none).

    In beiden Fällen solltest dem Footer clear: left oder clear: both geben oder alternativ einen Clearfix anwenden, damit der Footer immer unter den Spalten liegt (ich nehme an, das hast du vor).

    Grüße,
    Mathias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Einfaches floaten mit 100% width

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@molily:

      nuqneH

      Für kleine Viewports kann man die Mehrspaltigkeit durch Media-Queries aufheben (float: none).

      Sollte man aber nicht. Sondern für große Viewports die Mehrspaltigkeit erst erzeugen. Mobile first (unter „Style“).

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Einfaches floaten mit 100% width

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Für kleine Viewports kann man die Mehrspaltigkeit durch Media-Queries aufheben

        Sollte man aber nicht. Sondern für große Viewports die Mehrspaltigkeit erst erzeugen.

        Beides sind valide Methoden, die zum Ziel führen.

        Mobile first (unter „Style“).

        »Mobile first« ist, wie der Artikel auch zeigt, ein komplexer, ganzheitlicher Ansatz, den ich nicht en passant einführen wollte. Mobilbrowser können Desktop-Layouts besser darstellen als Desktop-Browser halbgare responsive Layouts, hinter denen keine durchdachte Strategie steckt. Bei »Mobile first« ist sehr viel zu beachten. Beispielsweise benötigt man einen Media-Queries-Polyfill, sonst bekommen älteren Browsern mit größeren Viewports ein unpassendes Layout vorgesetzt.

        Mathias

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Einfaches floaten mit 100% width

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@molily:

          nuqneH

          »Mobile first« ist, wie der Artikel auch zeigt, ein komplexer, ganzheitlicher Ansatz,

          … der kaum mehr verlangt als gesunden Menschenverstand. ;-)

          Mobilbrowser können Desktop-Layouts besser darstellen als Desktop-Browser halbgare responsive Layouts

          Das würde ich so pauschal nicht sagen.

          Beispielsweise benötigt man einen Media-Queries-Polyfill, sonst bekommen älteren Browsern mit größeren Viewports ein unpassendes Layout vorgesetzt.

          Welche Browser wären das? IE 8 abwärts? Die sowieso ein spezielles Stylesheet* vorgesetzt bekommen?

          Qapla'

          * aus derselben Quelle generiert: http://bittersmann.de/talks/csspreproc, Folie 33

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Einfaches floaten mit 100% width

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Gunnar Bittersmann:

            nuqneH

            * aus derselben Quelle generiert: http://bittersmann.de/talks/csspreproc, Folie 33

            Da hat mir die Seitenanzeige des PDF-Viewers einen Streich gespielt. 31 war gemeint.

            33 ist später. ;-)

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

        2. Einfaches floaten mit 100% width

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@molily:

          nuqneH

          Sollte man aber nicht. Sondern für große Viewports die Mehrspaltigkeit erst erzeugen.

          Beides sind valide Methoden, die zum Ziel führen.

          Von »mobile first« abgesehen gibt es noch einen Grund, Eigenschaften nicht erst zu setzen, um sie dann wieder zu überschreiben: Einfachheit. Eine Regel vs. zwei Regeln.

          Um den Hintergrund der Zellen im Tabellenkopf zu färben würde man auch

          thead th { background: silver }

          verwenden und nicht

          th { background: silver }  
tbody th { background: none }

          Einfachheit schlägt durch auf Wartbarkeit.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln