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>
The problem is that IE doesn't render the page as it's latest version, adding a X-UA-Compatible meta tag lets us to choose which version of IE should render the page, setting it to the latest (edge) version solves the problem:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Related
If I run this in Firefox or IE, I get a nice fullscreen layout with no scrollbars in the browser, however in Chrome, I get a vertical scrollbar which is adding the height of the top (green) row to the layout twice:
<!DOCTYPE html>
<html style="height:100%;width:100%">
<head>
<style media="screen" type="text/css">
* {
margin:0;
padding:0;
}
</style>
</head>
<body style="height:100%;width:100%">
<div style="display:flex; flex-direction:column; background-color:red; height:100%">
<div style="flex 0 0 auto; background-color:green; min-height:200px">a</div>
<div style="flex 1; background-color:yellow; height:100%;width:100%; display:flex; flex-direction:row">
<div style="flex 1; background-color:purple; height:100%;width:100%">a</div>
<div style="flex 1; background-color:white; height:100%;width:100%">a</div>
</div>
</div>
</body>
</html>
Why? How do I fix this in Chrome?
I have 3 columns in css aligned beside each other. I don't understand why when I zoom into the browser the UI becomes responsive? For example when I zoom in the browser, <p>helooooo<p/> will enlarge only in respect to the column. On zooming in notice how the columns remain at their specified width? why does that happen? shouldn't the columns also expand in respect to the text?
body, html{
width:100%;
height:100%;
margin: 0px;
padding:0px;
}
.col1{
min-width:30%;
height:100%;
background-color: gray;
float:left;
}
.col2{
min-width:40%;
height:100%;
background-color: blue;
float:left;
}
.col3{
min-width:30%;
height:100%;
background-color: red;
float:left
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="col1">
<p>heloooooooooooooo</p>
</div>
<div class="col2">
<p>heloooooooooooooo</p>
</div>
<div class="col3">
<p>heloooooooooooooo</p>
</div>
</body>
</html>
Your example doesn't show any change when zooming in or out. But anyway, when the browser zooms, it's essentially changing the width of the viewport.. so if you have media queries, they will come into play.
This because you have set the column lengths to a specific value.
min-width:40%;
height:100%;
So whether you zoom or not, it will be of the same percentage. meaning it wont be zoomed.
The code at the link below displays fine in Google Chrome and IE9. It displays terrible in IE8. Any ideas for how to make it display correctly in IE8? I would like to keep it as a 3-column layout with a fixed middle column and the sides fluid/liquid/flexible and also fill the vertical space to 100% full height of the web browser.
http://jsfiddle.net/STVinMP/eZ7Nb/
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">
.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}
.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}
#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/* ffff8b; */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">
<div id="leftcol" title="portage photo by Hans Solo"></div>
<div id="midcol" class="col col-2">
<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->
</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>
</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>
i think that background-size not supported in ie 8
You can try with sizingMethod attribute of filter property as proposed in this answer
If I am clear on what your goal is I think this will work.
<html>
<body style="margin:0px; padding:0px;">
<div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#333;">
<div style="width:80%; min-width:960px; margin-left:auto; margin-right:auto; background-color:#fff" height:100%;>
<p>info here</p>
</div>
</div>
</body>
</html>
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
I am trying to create a photo gallery grid layout using floats (3 per row), the image thumbnails seem that they align nicely in Firefox and IE across the wrapper but on Chrome there's a 1 pixel margin to the right, is there any way to fix this behavior?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrap{
width:900px;
background:red;
margin:0 auto;
overflow:hidden;
}
.wrap div{
float:left;
width:295px;
height:200px;
background:#333;
margin-bottom:5px;
margin-right:0.469em;
overflow:hidden;
}
.wrap div:nth-child(3n+3){ /* wont work in IE8 */
margin-right:0;
}
.clear:before, .clear:after{ content:""; display:table; }
.clear:after{ clear:both; }
</style>
</head>
<body>
<div class="wrap clear">
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
<div> </div>
<div> </div>
<div style="margin-right:0;"> </div>
</div>
</body>
</html>
Does not occur in latest version of Chrome (currently 23.0.1271.64 m - Windows), was possibly a rounding bug.