Fluid layouts for your website

Fluid layouts for your website

1 34830
Fluid layouts for your website

Fluid layouts for your website

Maybe you have noticed that sometimes it is pretty difficult to adjust website content width in order to fit all the various devices (from small resolution mobile platforms to high resolution personal computers). I think that you have faced with this problem before. But it does not matter – fluid (or liquid) layout will come to the rescue. I prepared several fluid layouts for you which you can choose. All these layouts have several columns with some content inside. And, as little bonus – you can switch between layouts on-fly (without reloading of page) with using CSS3.

Live Demo
download result

So, lets start:


Step 1. HTML

index.html

<div class="layout">
    <h1>Variants</h1>
    <span id="var1"></span>
    <span id="var2"></span>
    <span id="var3"></span>
    <span id="var4"></span>
    <span id="var5"></span>
    <div class="variants">
        <a href="#var1" class="var1"></a>
        <a href="#var2" class="var2"></a>
        <a href="#var3" class="var3"></a>
        <a href="#var4" class="var4"></a>
        <a href="#var5" class="var5"></a>
    </div>
    <div class="columns">
        <div class="column" id="left"><img src="post.png" alt="" />Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
        <div class="column" id="right"><img src="post.png" alt="" />Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
        <div class="column" id="center">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <hr style="clear:both" />
            Demo text content, nothing to read here. demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content, nothing to read here, demo text content</div>
    </div>
</div>

You can see here little panel with variant switcher, and after – three columns with demo content. As content – it can be images, text, or other elements.

Step 2. CSS

Now we will stylize our page. As the first – we will prepare base styles for our three columns layout:

.columns {
    overflow: hidden;
    width: 100%;
}
.column {
    border: 1px dashed #CCCCCC;
    min-height: 150px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    /* CSS3 transition */
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.column img {
    float: left;
    margin: 0 10px 10px 0;
}
.column div {
    background-color: #888888;
    float: left;
    height: 80px;
    margin: 0 10px 10px 0;
    width: 80px;
}
#left {
    background-color: #C8FC98;
    float: left;
    width: 25%;
}
#right {
    background-color: #FDE95E;
    float: right;
    width: 25%;
}
#center {
    margin: 0 25%;
}

As you can see – by default left and right column have certain width (in percentages), but central column doesn’t have certain width. In this moment – all the columns are fluid. We will review another variants very soon, now, we should stylize variants buttons:

.variants {
    height: 32px;
    margin: 20px auto;
    width: 200px;
}
.variants a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px;
    width: 30px;
}
.variants .var1 {
    background-color: red;
}
.variants .var2 {
    background-color: orange;
}
.variants .var3 {
    background-color: pink;
}
.variants .var4 {
    background-color: green;
}
.variants .var5 {
    background-color: blue;
}

Everything is easy as you can see – just colored boxes. And finally – our other custom fluid layouts:

/* variant 1 */
#var1:target ~ .columns #left {
    width: 25%;
}
#var1:target ~ .columns #right {
    width: 25%;
}
#var1:target ~ .columns #center {
    margin: 0 25%;
}
/* variant 2 */
#var2:target ~ .columns #left {
    width: 50%;
}
#var2:target ~ .columns #right {
    display: none;
}
#var2:target ~ .columns #center {
    margin: 0 0 0 50%;
}
/* variant 3 */
#var3:target ~ .columns #left {
    width: 18em;
}
#var3:target ~ .columns #right {
    width: 18em;
}
#var3:target ~ .columns #center {
    margin: 0 18em;
}
/* variant 4 */
#var4:target ~ .columns #left {
    width: 18em;
}
#var4:target ~ .columns #right {
    width: 20%;
}
#var4:target ~ .columns #center {
    margin: 0 20% 0 18em;
}
/* variant 5 */
#var5:target ~ .columns #left {
    display: none;
}
#var5:target ~ .columns #right {
    width: 18em;
}
#var5:target ~ .columns #center {
    margin: 0 18em 0 0;
}

For the first variant – all the columns are fluid. For second variant – we have only two visible columns, third one is hidden. In third variant – first and third columns are fixed, and central column is fluid. Forth variant – only first column is fixed, both other – fluid. And finally – fifth variant, where we have only 2 columns again, central column is fluid and right column is fixed (left column is invisible).


Live Demo

Conclusion

That’s all, today we have prepared nice page with several custom fluid layouts. I hope that this material will be useful for our readers. Feel free to share our tutorials with your friends. Good luck!

SIMILAR ARTICLES


1 COMMENT

Leave a Reply