On other tags, using BFC can clear the float, why the body is not available.
As expected, add overflow: hidden on the body to form a BFC, which can achieve the effect of clearing the float, but this is not the case?
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
overflow: hidden;
border: 1px dashed skyblue;
}
.p {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div class="p">
<div class="f"></div>
<div class="f"></div>
</div> -->
<div class="f"></div>
<div class="f"></div>
</body>
</html>
because overflow has a special behavior when applied to body element and it get propagated to html element instead. You need to add overflow:auto to html to avoid this:
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
overflow: hidden;
border: 1px dashed skyblue;
}
html {
overflow: auto;
}
<div class="f"></div>
<div class="f"></div>
UAs must apply the overflow-* values set on the root element to the viewport. However, when the root element is an [HTML] html element (including XML syntax for HTML) whose overflow value is visible (in both axes), and that element has a body element as a child, user agents must instead apply the overflow-* values of the first such child element to the viewport. The element from which the value is propagated must then have a used overflow value of visible. ref
So you body element will have again overflow:visible after the propagation
To have it working on the body, you can use display:flow-root, I believe this is have to do with how the width of the content affects the body display/render, and by adding display:flow-root it will clear floated tag inside it.
div.f {
float: left;
width: 100px;
height: 100px;
background: red;
margin-right: 1px;
}
body {
display: flow-root;
border: 1px dashed skyblue;
}
.p {
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<div class="p">
<div class="f">AAAA</div>
<div class="">test</div>-->
</div>
<div class="f"></div>
<div class="f"></div>
</body>
</html>
Related
This question already has an answer here:
Why does 'overflow: auto' clear floats? And why are clear floats needed?
(1 answer)
Closed 1 year ago.
Recently I started learning css and while I was learning about float I didn't understand how overflow:hidden; Works with the float
I tried to go to w3schools and mdn
But I still don't understand how it works
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
}
.parent div{
background-color: #eee;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
overflow: hidden; is a css property which prevent scrollbars from appearing, even if its necessary...
I will give an example using floats to show how it works,
HTML
<div class='container'>
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
/* *{
overflow:hidden;
} */
.container{
width:108vw;
height:100vh;
background:red;
}
#div1{
width: 600px;
height: 400px;
background: blue;
float: left;
}
#div2{
width: 400px;
height: 600px;
background: green;
float: right;
}
here, I purposely made the container larger than the screen size(which, obviously is 100vh, 100vw), so the scrollbars appear. Now i have two divs with floats and different colors so you can identify them. To actually see those divs, one must scroll down and towards the right;
Here is the link to the pen i made
https://codepen.io/codebyrudra/pen/XWaBOJr
Now, uncomment the
*{
overflow:hidden;
}
now you can see that the scroll bars are gone and you can no longer scroll to see those divs completely.
You can also try this property with display:flex; or display:grid;, it will yield the same result.
Hope this helped :)
overflow: hidden; only has a visible effect if you define width and height for that element and its contents would normally go beyond that width and height:
(widthhas a default of 100%, so it doesn't necessarily have to be defined in all situations)
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
width: 200px;
height: 15px;
}
.parent div{
background-color: #eee;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
I wonder if it is possible to display an HTML element somewhere at the end of the DOM somewhere further up the DOM instead (using CSS).
The element should still be placed with position:relative!
I created a "possible solution" with flexbox below to give you an idea of what I'm trying to achieve, but
(a) it's not done with position:relative
(b) the caveat I see here is that it only works if the order property is assigned to every HTML element that is subject to display: flex. In reality, if I'd want to move an element from right before </body> to right after <body> I wouldn't want to assign order to every single element in the DOM.
I'm interested in a solution with position:relative, because I have to deal with an existing CSS setup based on this positioning paradigm.
.content {
display: flex;
flex-direction: column;
}
.content-piece {
width: 100%;
margin: 5px 0;
border-style: solid;
border-radius: 3px;
border-width: 1px;
}
#bot {
order: 1;
}
#top {
order: 2;
}
#mid {
order: 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move bot to the top of body</title>
</head>
<body>
<p>Goal: Make Bottom display above Top</p>
<div class="content">
<div class="content-piece" id="top">Top</div>
<div class="content-piece" id="mid">Middle</div>
<div class="content-piece" id="bot">Bottom</div>
<div>
</body>
</html>
defaut order is zero 0, to bring one at front, use -1 ;)
demo
.content {
display: flex;
flex-direction: column;
}
.content-piece {
width: 100%;
margin: 5px 0;
border-style: solid;
border-radius: 3px;
border-width: 1px;
}
#bot {
order: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move bot to the top of body</title>
</head>
<body>
<p>Goal: Make Bottom display above Top</p>
<div class="content">
<div class="content-piece" id="top">Top</div>
<div class="content-piece" id="mid">Middle</div>
<div class="content-piece" id="bot">Bottom</div>
<div>
</body>
</html>
or set the others to 1
.content {
display: flex;
flex-direction: column;
}
.content-piece {
width: 100%;
margin: 5px 0;
border-style: solid;
border-radius: 3px;
border-width: 1px;
}
.content [id]:not(#bot) {
order: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move bot to the top of body</title>
</head>
<body>
<p>Goal: Make Bottom display above Top</p>
<div class="content">
<div class="content-piece" id="top">Top</div>
<div class="content-piece" id="mid">Middle</div>
<div class="content-piece" id="bot">Bottom</div>
<div>
</body>
</html>
There is no need to reset order for each in your case.
For the fun and not with position:relative (nor translate()) , here is a float behavior that could be used before flex or grid shown up.
.content-piece {
border: solid;
box-sizing: border-box;
width: 100%;
}
.content::before {
content: '';
padding-top: 60px; /* equals height of #bot , can be retrieve via js and injected */
float: left;
}
#bot {
height: 60px;
overflow: hidden;
/* no float !! */
}
#top {
float: left;
clear: left;
/* set it below the pseudo */
}
#mid {
float: left;
clear: left;
/* if not wide enough to be to pushed below previous float */
}
<p>Goal: Make Bottom display above Top</p>
<div class="content">
<div class="content-piece" id="top">Top</div>
<div class="content-piece" id="mid">Middle</div>
<div class="content-piece" id="bot">Bottom</div>
</div>
or if you really want position:relative, mix it with position sticky in a funny tricky use again not to use in real :
.content-piece {
border: solid;
box-sizing: border-box;
width: 100%;
}
.content {position:relative;border:solid;overflow:auto;}
#bot {
position:sticky;
bottom:1500px;/* whatever is enough to push it up */
height:60px;
}
#top {
margin-top:60px;
}
<p>Goal: Make Bottom display above Top</p>
<div class="content">
<div class="content-piece" id="top">Top</div>
<div class="content-piece" id="mid">Middle</div>
<div class="content-piece" id="bot">Bottom</div>
</div>
Flex is really not bad here ;).
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward.
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward.
What is wrong? I need my div to be exactly 500px.
Thanks :)
From what I understand, you want to make the second div go down after resizing the browser. So you can use media queries for that:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
#media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
I separated the style of the two divs, and removed the float:left from the inline style. The <meta> is also important for the media query to work. I used clear:both to clear the float of the first div from the second, thus not affecting the second div.
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer
You have to set float in second div also. Or in media query you have to set the display: block in both div. check updated snippet below..
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div style="float: right">
bbb
</div>
</div>
</body>
</html>
I am planning to add colour to the center of the html page. I have tried this:
My html file
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="v">
</div>
</body>
</html>
My styles.css
#v {
background: red;
position: center;
}
You can set a height and a width to the div and add a margin like this:
#v {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
}
I would assume that you mean to center an element on the page and then add a background color to that element. Your CSS is not valid although you did come close. if you want to add a background then you need to use background-color instead. If you want to center that element then you can adjust the margin of said element here. is an example that may help.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div and add background color</title>
<style type="text/css">
.wrapper{
width: 100%;
height: 400px;
background-color: blue;
margin: 0 auoto;
}
.centered-element{
width: 50%;
height: 200px;
margin: 0 auto;
background-color: red;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="centered-element">
<p>this div is centered!</p>
</div>
</div>
</body>
</html>
what i have done is gave the div that i wanted to center align a margin of 0 auto; this will center align the div. I hope that helped!
I know this is a question that is asked a lot, but I couldn't find any solution at all to what should be a simple thing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<link rel="stylesheet" href="../cssReset.css" />
<style>
html, body {
height: 100%;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>
Prety simple, but I just can't make the last div extend to the bottom of the page. If I use "auto" it will not display anything, as there's no content. If I use 100%, it will use my browser height and create unecessary scrollbars.
What can I do?
Thanks.
You could always take the easy way out and use JavaScript. Here's a simple example.
<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
var menu = document.getElementById("menu");
var center = document.getElementById("center");
var main = document.getElementById("main");
var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>
may be the following markup code would be what you are looking for just add a "overflow:hidden" in your css style sheet will fix your problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
overflow: hidden;
}
#menu {
height: 100px;
background-color: red;
}
#center {
height: 250px;
background-color: green;
}
#main {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
I tested your markup, it shows the last div 'main' extend to the bottom of the page.... what is being displayed for you? And what styling info is there in the referred cssReset.css ( although this would be overridden by the style on the page html
Maybe the following is what you are looking for:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<!--CSS STYLING-->
<style>
*{margin:0;padding:0}
html, body {
height: 100%;
}
#menu {
height: 10%;
background-color: red;
}
#center {
height: 25%;
background-color: green;
}
#main {
height: 75%;
background-color: blue;
}
</style>
</head>
<body>
<div id='menu'>
</div>
<div id='center'>
</div>
<div id='main'>
</div>
</body>
</html>