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.
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I have a simple page with one main div that contains two divs (left_menu and content) and another div outside the main div that contains the footer.
The actual page appearance is the following:
As you can see, there is a white space between the footer and the other divs. My question is how to remove it.
I tried some solutions presented in other questions (as add vertical-align: top; to the footer's CSS, but it didn't work).
You can find the whole HTML and CSS code below.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
height:100%;
width:95%;
margin:0px auto;
border: 1px solid black;
}
#main {
background-color:#f0f0f0;
height:80%;
}
#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}
#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}
#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
}
</style>
</head>
<body>
<div id="main">
<div id="left_menu">
<p> Something in my left menu</p>
</div>
<div id="content">
<p> Some content </p>
<br />
<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
height:100%;
width:95%;
margin:0px auto;
border: 1px solid black;
position:relative;
}
#main {
background-color:#f0f0f0;
height:80%;
}
#left_menu{
background-color:red;
width:25%;
height:100%;
float:left;
}
#content {
background-color:blue;
width:75%;
float:right;
height:100%;
}
#footer {
vertical-align: top;
background-color:green;
width:100%;
height:20%;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="main">
<div id="left_menu">
<p> Something in my left menu</p>
</div>
<div id="content">
<p> Some content </p>
<br />
<p> More content </p>
</div>
</div>
<div id="footer">
<p> My footer.</p>
</div>
</body>
</html>
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'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...
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>