CSS - Fixed-Fluid-Spalten

Question

Im Körper meiner Website versuche ich zwei Spalten zu erstellen - eine ganz rechts mit einer festen Breite (300px) für Werbung etc, und eine auf der linken Seite, die die aufnehmen wird verbleibender Platz auf der Seite. Wie kann dies in CSS erreicht werden?

Answer 1

CSS:

#right-column{ 
width:300px; 
float:right; 
} 

#other-column{ 
float:left; 
width:100%; 
padding-right:20px; /*to prevent text overlap as suggested in the comment*/ 
} 

In HTML:

<div id='right-column'> 
<!-- ads here --> 
</div> 
<div id='other-column'> 
<!-- content here --> 
</div> 

Answer 2

Vielleicht möchten Sie auch die YUI: CSS Grid Builder überprüfen. Es ist ein einfaches Web-Interface, wo Sie angeben, nach welchem ​​Grid-Layout Sie suchen. Sie erhalten den HTML-Code, den Sie in Kombination mit YUI Grids CSS framework verwenden können, um das gewünschte Layout zu erhalten. Eine nette Sache über das YUI Grids CSS-Framework ist good cross browser support, die Ihnen Zeit spart, es über verschiedene Browser zu arbeiten. Sie können auch den Code, den Sie vom Grid Builder erhalten haben, zurückentwickeln, um einige Ideen zu erhalten, wie Sie dies selbst durchführen können. Die Einstellungen werden Sie mit dem YUI verwenden: CSS Grid Builder die gewünschte Layout zu erhalten, ist wie folgt:

1. Körpergröße: 100%
2. Körper Spalten: Sidebar rechts 300px

Answer 3

Hier ist ein Tool zu generate fixed liquid columns für die Platzierung von AdSense-Anzeigen.

Answer 4

Eine Lösung, die ich gefunden habe, ist die rechte Spalte nach rechts zu schweben und geben Sie der linken Spalte eine absolute Position mit links: 0 und rechts: 300px. Dadurch wird es flüssig, als ob Sie ihm eine Breite geben würden: 80%, aber es wird auf eine andere Weise relativ zum Eltern-Container sein.

Hier ist ein Beispiel: http://jsfiddle.net/tkane2000/dp9GZ/

Ein Problem, das Sie mit diesem finden könnte, ist, dass, da es absolut ist, wird es nicht von Natur aus den Elementen unten nach unten drücken.

Eine andere mögliche Lösung wäre, die linke Spalte Breite: 100% Padding-rechts: 300px;

und die rechte Spalte (feste Breite): Position: absolut: oben: 0; rechts: 0;

Sie müssen möglicherweise Box-Sizing: Border-Box in der linken Spalte festlegen.

Dies auch als einige Einschränkungen. Eine Sache, die Ihnen in den Sinn kommt, ist, dass die Grenze auf der rechten Seite der rechten Spalte liegen würde, wenn Sie möchten, dass die linke Spalte ein Trennungsrecht hat.

Answer 5

CSS:

.column-right { 
    float: left; 
    width: 100%; 
    height: 200px; 
    background-color: red; 
} 

.column-right .column-content { 
    margin-left: 250px; 
} 

.column-left { 
    float: left; 
    margin-left: -100%; 
    width: 250px; 
    height: 200px; 
    background-color: green; 
} 

HTML:

<div class="column-right"> 
    <div class="column-content"> 
     <strong>Right Column:</strong><em>Liquid</em> 
    </div> 
</div> 
<div class="column-left"> 
    <strong>Left Column:</strong><em>250px</em> 
</div>