Tag Archives: css

CSS Flexible Box Layout Module Level 1

Leave a reply
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

CSS Flexible Box Layout Module Level 1

Leave a reply
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

display:table & display:table-cell not working in IE9

Leave a reply

Salam (means Hello) :)

I'm trying to implement a 3 column layout for my web page using display:table & display:table-cell. It works fine in firefox and chrome, and I know that this feature should be supported in IE 9, but all I achieved so far is no more than this screenshot:

enter image description here

how can I get this to work in IE 8+ ?

here is my complete code:

(JS Fiddle available)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width:100%;
            margin:0;
            padding:0;
        }
        .container{
            display:table;
            width:100%;
            border-collapse:separate;
        }
        .col{
            display:table-cell;
        }
        .side-1{
            width:200px;
            background: #efefef;
        }
        .side-2{
            width:200px;
            background: #f8f8f8;
        }
        .content{

        }
        #header,#footer{
            height:40px;
            background: #e4f3fd;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div class="container">
    <div class="col side-1">
        sidebar 1
        <br>.<br>.<br>.
    </div>
    <div class="col side-2">
        sidebar 2
        <br>.<br>.<br>.
    </div>
    <div class="col content">
        content
        <br>.<br>.<br>.
    </div>
</div>
<div id="footer">footer</div>
</body>
</html>

display:table & display:table-cell not working in IE9

Leave a reply

Salam (means Hello) :)

I'm trying to implement a 3 column layout for my web page using display:table & display:table-cell. It works fine in firefox and chrome, and I know that this feature should be supported in IE 9, but all I achieved so far is no more than this screenshot:

enter image description here

how can I get this to work in IE 8+ ?

here is my complete code:

(JS Fiddle available)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width:100%;
            margin:0;
            padding:0;
        }
        .container{
            display:table;
            width:100%;
            border-collapse:separate;
        }
        .col{
            display:table-cell;
        }
        .side-1{
            width:200px;
            background: #efefef;
        }
        .side-2{
            width:200px;
            background: #f8f8f8;
        }
        .content{

        }
        #header,#footer{
            height:40px;
            background: #e4f3fd;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div class="container">
    <div class="col side-1">
        sidebar 1
        <br>.<br>.<br>.
    </div>
    <div class="col side-2">
        sidebar 2
        <br>.<br>.<br>.
    </div>
    <div class="col content">
        content
        <br>.<br>.<br>.
    </div>
</div>
<div id="footer">footer</div>
</body>
</html>

Trouble with a simple display:table layout

Leave a reply

Salam (means hello) :)

I have the following simple layout, the problem is that adding content to right div makes content on left one come down:

JS Fiddle

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent{
            width:800px;
            height:100px;
            display: inline-table;
            border: 1px solid #e8e8e8;
            background: #fcfcfc;
        }
        .parent .right{
            width:90px;
            display:table-cell;
            padding-top: 10px;
            text-align: center;
            background: #f5f5f5;
            color:#666666;
        }
        .parent .left{
            width:710px;
            display:table-cell;
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        This cell has padding-top:0px
    </div>
    <div class="right">
        <img src="images/icon.png">
        <br>some text
    </div>
</div>
</body>
</html>

Trouble with a simple display:table layout

Leave a reply

Salam (means hello) :)

I have the following simple layout, the problem is that adding content to right div makes content on left one come down:

JS Fiddle

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent{
            width:800px;
            height:100px;
            display: inline-table;
            border: 1px solid #e8e8e8;
            background: #fcfcfc;
        }
        .parent .right{
            width:90px;
            display:table-cell;
            padding-top: 10px;
            text-align: center;
            background: #f5f5f5;
            color:#666666;
        }
        .parent .left{
            width:710px;
            display:table-cell;
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        This cell has padding-top:0px
    </div>
    <div class="right">
        <img src="images/icon.png">
        <br>some text
    </div>
</div>
</body>
</html>

HTML5 and CSS3 Advent 2011

Leave a reply
Welcome to our advent calendar. Every day in december 2011 (until the 24th) we will post new cool HTML5 and CSS3 techniques here. These techniques may not work yet in all browsers because they are part of not quite finished specs. This also means that you may not be able to view all of the examples, but we'll always tell you in which browser it actually does work.

HTML5 and CSS3 Advent 2011

Leave a reply
Welcome to our advent calendar. Every day in december 2011 (until the 24th) we will post new cool HTML5 and CSS3 techniques here. These techniques may not work yet in all browsers because they are part of not quite finished specs. This also means that you may not be able to view all of the examples, but we'll always tell you in which browser it actually does work.