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?
Related
I'm a new HTML5 coder. Please see the sceenshot below showing my issue
You can see the blue color drawed inside the circle in this picture.
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Tab Animation</title>
<link rel="stylesheet" href="index.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div style="width:100%; height:100%;">
<div style="width:100%; height:93%; background-color:gray">
<!--
<div style="width:100%; height:100%; background-color:orange"> </div>
<div style="width:100%; height:100%; background-color:blueviolet"> </div>
<div style="width:100%; height:100%; background-color:yellow"> </div>
-->
</div>
<div style="width:100%; height:7%; background-color:slateblue">
<div class="tabButton">
<div><p>Tab 1</p></div>
</div>
<div class="tabButton">
<div><p>Tab 2</p></div>
</div>
<div class="tabButton">
<div><p>Tab 3</p></div>
</div>
</div>
</div>
</body>
</html>
CSS file
body{
margin: 0;
padding: 0;
height: 100%;
}
body .tabButton {
width:33.33%;
height:100%;
background-color:pink;
float: left;
display:table;
}
body .tabButton div {
display:table-cell;
vertical-align: middle;
}
body .tabButton div p {
text-align:center;
width:100%;
}
How to solve this? Make sure clean tab size.
You actually specified yourself that the content is not to use 100% of the available with:
body .tabButton {
width:33.33%;
3 * 33.33% is 99.99%, which is not 100%. Try changing that to 33.34% and you will see that the gap is gone. See this jsfiddle to try it out yourself...
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">
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>
I have a website in which the layout look something like the following:
The css for the main content is as follows:
.home {margin:178px 0 0 100px;width:800px;padding:0 10px 0px 10px;float:left;height:auto!important;height:310px;min-height:310px;}
The problem is whenver I resize the browser, the main content div instead of staying there and the browser getting horizontal scrollbars
moves down automatically.
If I resize the browser back to its original size, the main div doesn't even come back to its original place. How do I correct this thing?
Add the two elements (left,right) inside a container div, and give this container a min-width
<head>
<style type="text/css">
body {
min-width:750px;
min-height:500px;
}
div.container {
min-width:600px;
min-height:450px;
}
div.left, div.right {
min-height:400px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
This is two column full screen layout with colorized column background (if necessary) & jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background-color:#ccc;
}
#header {
background-color:#ccf;
}
#container {
position:relative;
min-height:80%;
border:4px solid red;
overflow:hidden;
}
#left {
float:left;
width:200px;
background-color:#cfc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#main {
position:relative;
margin-left:200px;
background-color:#ffc;
padding-bottom:9999px;
margin-bottom:-9999px;
}
#footer {
background-color:#fcc;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
<div id="left">LEFT</div>
<div id="main">MAIN</div>
<div style="clear:both"></div>
</div>
<div id="footer">FOOTER</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.