Fluid Layout CSS

Fluid layouts are nothing but using %’s(width and height) in a desired manner.

You can refer youtube here

Very simple and effective example is here

<div class=”container”>
<div class=”a”></div>
<div class=”b”></div>
<div class=”c”></div>
</div>

.a, .b, .c {
float: left;
height: 200px;
background: #f00;
width: 21%;
margin: 2%
}
.b {
width: 46%;
background: #0f0;
}
.c {
width: 21%;
background: #00f;
}
.container {
width: 100%;
overflow: hidden;
background: #aaa;
}

If you want to get your 3 side by side divs to div down by down while resizing..then you should use width: 123px; and float:left.

you wanna have your image or content in center?? try margin-left: auto and margin-right:auto and display:block

If you want your image to attach to div so that image in div should also resize along with window??

Nothing just use background-image,background-size like shown below..

#one{
background-image: url(../images/page1_img1.png);

width:400px;
height:400px;
background-repeat: no-repeat;
background-size: 50% 50%;

float:left;
}

similarly have #two and #three…you can see side by side divs with images fixed to it..if you resize window..automatically all divs and its images will be resized. if you wanna have it in fluid layout..use width as %’s. Thats it 🙂

Wanna have sticky header??

#navigation {

position: fixed;

z-index: 10;

}

#header {

margin-top: 50px;

}

Note: Always use this for better look without some gutter space around your website..

body{
width:100%;
margin: 0 auto;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s