|
||||
Responsive Width und float:right
Hallo Zusammen
Ich habe ein Problem beim Layouten einer Website. Ich wollte den Inhalt gerne "responsive" machen. Heisst, ich möchte, dass sich der bereich, wo der Text ist und der Bereich rechts sich der grösse des Browserfensters Anpasst. Nun bringe ich das irgendwie nicht hin, dass ich, wenn ich rechts am Inhalt einen Block fliessen lasse ich den Hauptteil flexibel habe. Momentan sieht das so aus: jsfiddle. Mein CSS Code: Code:
.content { float: left; width: 70%; margin: 20px; padding: 20px; border: 1px solid; } aside { display: block; overflow: hidden; float: right; width: 10%; min-width: 100px; margin: 20px; padding: 0 20px 10px; border: 1px solid; } aside h2 { border-bottom: 1px solid; } Danke und Gruss Toby
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ |
Sponsored Links |
|
|||
Hallo
Grundsätzlich sollten die Container in einer Reihe alle in die gleiche Richtung floaten. Wenn gefloatet wird muss auch gecleart werden. Zu deinem Problem: Die nebeneinanderstehenden Container dürfen nicht breiter als 100% werden. Um das zu erreichen gibt es zwei grundsätzliche Möglichkeiten: 1. Alle Angaben die Breite betreffend (width, padding, border-width, margin) werden mit der Einheit Prozent angegeben. Dann kannst du das direkt sehen. 2. Oder du benutzt calc und berechnest damit die Breitenangaben. Die Breitenberechnungen können vereinfacht werden wenn du zudem das Border-Box-Modell verwendest. Dann brauchst du dich nur um width und margin zu kümmern. padding und border-width werden automatisch vom width abgezogen. Statt float ist grade für solche Darstellungen aber Flexbox besser geeignet. Gruss MrMurphy Geändert von MrMurphy (14.02.2016 um 20:37 Uhr) |
Sponsored Links |
|
|||
border-width kann nicht in Prozent angegeben werden.
|
|
||||
Heisst für mich die einzigen Möglichkeiten sind:
Gibt es noch weitere Möglichkeiten (Preprocessors ausgeschlossen)? Danke und Gruss Toby
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ |
|
||||
Zitat:
Code:
box-sizing: border-box; Ich informiere mich gleich mal darüber und gebe bescheid, wenn ich's geschafft habe! Danke dir! @axelf: Mach mal das Browser-Fenster kleiner bei meiner Demo, dann siehst du was ich meine.
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ |
|
|||
Hi,
wenn der Platz nicht mehr ausreicht, springt der Container unter den Inhalt. In deinem Beispiel passiert das ja eh erst sehr spät und ich würde dann diesen Bereich generell unter dem Hauptinhalt anordnen. Wenn die Spalte zu klein ist, macht es ja eh keinen Sinn sie rechts zu behalten. Aber probier mal border-box aus, das wird deine Probleme lösen. |
|
||||
Okay, mit Border Box funktioniert das soweit, aber leider nur ohne Margin!
Beispiel ohne Margin Beispiel mit Margin Die einzige Möglichkeit, die ich hier sehe, wäre eine dritte "mittlere"-Box zu floaten. z. B. so: Links: 70% Mitte: 10% Rechts: 20% Der Mittlere Bereich wäre dann einfach eine leere Box. Gibt es noch eine andere Möglichkeit das zu lösen?
__________________
Nyaa~~ ------------------------------------------ http://www.codestyle.ch ------------------------------------------ |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Menü | FuFi | CSS | 1 | 05.01.2015 16:46 |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
Media Querys - Layout geht wird über den Displayrand angezeigt | DarkNemesis84 | CSS | 9 | 05.05.2013 23:00 |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße | Spencer | Javascript & Ajax | 3 | 19.09.2012 00:16 |