Fluid Layouts with CSS

Fluid layouts with CSS

The stylesheet contains different rules for when the screen is less than 800px wide. If you look at the stylesheet for the page the on line 983 there is a @media rule as follows:

@media screen and (max-width: 800px) {
  /* Alternate rules here*/
}

This is a CSS3 feature so I guess that the site does not restyle as nicely for older browsers. Details of media queries can be seen at http://www.w3.org/TR/css3-mediaqueries/#width

Fluid 3-Column Layout in HTML & CSS

You can use

body {    width: 90%;    max-width: 1000px;    margin: 0 auto;}#col1, #col2, #col3 {    float: left;    width: 30%;    margin: 10px;    min-width: 200px;}@media (max-width: 768px) { /*set here you specified width*/    #col1, #col2, #col3 {        width: 100%;    }}

<div id="col3">    <p>3333We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whle swamp.</p></div><div id="col2">    <p>Quick win face time goalposts wheelhouse mobile friendly. Pixel pushing. On your plate. Who's responsible for the ask for this request?. <a href="">Market-facing</a> drink from the firehose, or table the discussion , we need distributors to evangelize the new line to local markets. Baseline the procedure and samepage your department. Are we in agreeance cross sabers timeframe, so productize baseline the procedure and samepage your department. Not the long pole in my tent not the long pole in my tent red flag.</p></div><div id="col3">    <p>We need to leverage our synergies three-martini lunch not the long pole in my tent, yet cloud strategy. Killing it where do we stand on the latest client ask curate sacred cow, so drop-dead date herding cats. I just wanted to give you a heads-up win-win-win get all your ducks in a row action item not enough bandwidth. Closer to the metal i don't want to drain the whole swamp.</p></div>

css fluid layout with fixed column

ok. i found a quite nice solution: http://jsfiddle.net/yyAFq/

with table and table-cell. perfect browser-support!

section {
    width: 100%;
}
#wrap {
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    display: table;
}
#col1 {
    width: 100%;
    height: 100px;
    background: lightblue;
    display: table-cell;
}
#col2 {
    width: 200px;
    height: 100px;
    background: lightgreen;
}
h1 {
    height: 40px;
    width: 50px;
    background: red;
}
h1, p {
    display: inline-block;
    vertical-align: bottom;
}
p {
    display: inline-table;
    width: 100%;
}
@media only screen and (max-width: 400px) {
    #col1 {
        display: block;
    }
    #col2 {
        width: 100%;
    }
}

How is a css layout made fluid?

Fluid layout is when everything resizes to fit the window.

.container {
  width: 100%;
}

Fixed layout is when widths of container elements are fixed (don't change).

.container {
  width: 800px;
}

The @media() tag is used for responsive design. Which usually mixes fixed and fluid layouts. Eg. fluid for small devices, fixed for large screens.

/* all screen sizes */
.container {
  width: 100%;
}

/* screens 1000px and up */
@media(min-width: 1000px){
  .container {
    width: 1000px;
  }
}

W3CSS: fluid layout to center the page?

You need to use .w3-content class for a selected parent element and then you should set max-width for it like 1200px or so. Inside of it you can use your 12-column grid as wanted. Check here

---

Related Topics