Tag Archives: css
CSS Flexible Box Layout Module Level 1
In Pieces – 30 Endangered Species, 30 Pieces.
In Pieces – 30 Endangered Species, 30 Pieces.
Solution for Long Dropdowns
Solution for Long Dropdowns
display:table & display:table-cell not working in IE9
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:
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
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:
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
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:
<!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
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:
<!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>