The code below works properly in all browsers but IE.
The overflow doesn't work. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#scroll {
width: 500px;
height: 250px;
overflow: auto;
}
.box {
position: relative;
height: 100px;
}
</style>
</head>
<body>
<div id='scroll'>
<div class='box' style="background-color: red;"></div>
<div class='box' style="background-color: black;"></div>
<div class='box' style="background-color: yellow;"></div>
<div class='box' style="background-color: blue;"></div>
<div class='box' style="background-color: green;"></div>
</div>
</body>
</html>
Is this what you are looking for? http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
If you remove the "position:relative;" from the .box CSS definition, I believe it'll work in FF and IE 6.0.
Edit: I've tested it - and it works in FF 3.6.8 and I.E. 6.0.28 (i.e. keeps the 100px boxes within the scroll div).
Related
I want to hide a div outside the screen but the screen size changes when I try.
For example:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
When I tried this code
I don't want the slider to appear.
Using css overflow: hidden property in the body tag, you can get rid from that slider easily. I have attached the code below, run explore. However you can explore more about overflow property. Read the article I have linked below to explore clearly.
W3 School - css overflow
<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow: hidden">
<div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
<div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>
short question: how does one center a responsive set of dynamic height div blocks on a page. see simplified code below:
long: i have a set of data that goes into each block. tables, graphs, etc. the data is all mysql driven and dynamically changes all day long so the height of these blocks is not determined and is dynamic. I want the blocks to auto position themselves as they do in the example code. basic responsive page layout. example: the pink table could be 50px or 5000px. the float left is critical so that multiple block stack to the right as needed.
the challenge is for the blocks to be in the center of the page. i can not seem to be able to figure that one out.
i have tried and research everything. Flex does not seem to support this concept.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.statusC, .statusC2 {
float: left;
}
</style>
</head>
<body>
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</body>
</html>
make a wrapper around the blocks and give it a width:
<div class="wrapper">
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
and the CSS:
.wrapper {
margin: 0 auto;
position :relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
the float of the blocks is granted.
https://jsfiddle.net/Marouen/0s2pwz5t/
i found a TOTAL HACK that shows what i am trying to produce but not in a elegant way at all. i hope there is a better solution. there must be a solution that does not require setting the width...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
.statusContainer2 {
display: flex;
justify-content: center;
}
.statusContainer3 {
}
#media screen and (max-width: 1999px) { .statusContainer3 { width:1500px; } }
#media screen and (max-width: 1499px) { .statusContainer3 { width:1000px; } }
#media screen and (max-width: 999px) { .statusContainer3 { width:500px; } }
.statusC {
float: left;
}
</style>
</head>
<body>
<div class="statusContainer2" >
<div class="statusContainer3" >
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
</div>
</body>
</html>
In IE-11 when the typed text string is longer in the input box, the blinking cursor of input box moves over the div having id "Second".
Please suggest how I can stop this.
Refer "http://jsfiddle.net/rhcpz4uq/"
OR
<!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=iso-8859-1" />
<title>Z-Index Problem</title>
</head>
<body>
<div id="first" style="width: 500px; height: 500px; display:inline; position:absolute;">
<input id="input1" type="text" value=""></input>
</div>
<div id="second" style="width: 200px; height: 100px; left: 50px; background-color: pink; display:inline; position:absolute;">
</div>
</div>
</body>
</html>
Try setting the z-index to something like
<div id="second" style="width: 200px; height: 100px; left: 50px;
background-color: pink; z-index:100; display:inline; position:absolute;">
</div>
This markup shows my problem:
Webkit browsers seem to create an erroneous width on floated parent elements with floated/overflow:hidden elements inside, when their width is set to 0. Is there a known workaround?
<!DOCTYPE html>
<html>
<head>
<title>float & width</title>
<style type="text/css">
div {
float: left;
height: 50px;
}
div.section {
background-color: green;
}
div.section div.content {
background-color: red;
overflow: hidden;
}
p {
clear: both;
}
</style>
</head>
<body>
<p>width: 0 => Bug</p>
<div class="section">
<div class="content" style="width: 0;">some content that should not affect the parent div's width.</div>
</div>
<p>width: 1px => good</p>
<div class="section">
<div class="content" style="width: 1px;">some content that should not affect the parent div's width.</div>
</div>
</body>
</html>
Do you have a doctype enabled? Page is in quirks mode as of now.
One can get consistent behaviour (at least between webkit and gecko) by giving the outer element some width. Bit of a drag, but doable.
Ive been banging my head with why MSIE8 doesnt overlap the floating div just as webkit a mozilla both do. I hope you guys can help me out with this one.
I have the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="style" href="style.css" type="text/css" />
</head>
<body style="margin: 0px; background: #3b0404;">
<div align="center">
<div id="top" style="height: 100px; background: yellow; width: 100%;max-height: 100px; ">
<div style="overflow: visible; width: 800px; height: 100px; max-height: 100px; background: aquamarine;">
<div id="logo" style="float: left; margin-left: -3px; width: 203px; height: 201px; background: pink; overflow: visible;"></div>
<div id="menu" style="float: right; width: 595px; height: 100px; background: blue;"></div>
</div>
</div>
<div id="content" style="width: 800px; margin-left: auto; margin-right: auto;">
<div style="background: purple; height: 215px;"></div>
<div style="background: green; height: 350px;"></div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
I need the pink div to overlap the purple one while maintaining dimensions, however MSIE8 keeps expanding the containing divs so it pushes everything down instead of the desired behaviour.
I hope my question is clear, I dont know if Im doing something wrong and should take a different approach.
Thanks for your help!!
It was the transitional DOCTYPE .. it looked fine on JSFiddle cause it added the strict dtd.
Thanks to everyone for your time.