This question already has answers here:
Why top margin of html element is ignored after floated element?
(10 answers)
Closed 2 years ago.
So I applied clear:left to a div and tried changing its top margin but it did not affect anything. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
clear: left;
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 320px; /* Why is margin not working?*/
}
</style>
</head>
<body>
<div class="div1">This is suppose to be a first div</div>
<div class="div2">Div2</div>
</body>
</html>
Here is the result :
Now the problem is that the result is same even if I add or remove the top margin. It would be great if you can show me the right answer and also explain why this is happening.
Use of one container like this :
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 100px;
}
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
<div class="div2">Div2</div>
Related
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>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I am trying to make a box like the following in HTML and CSS:
I have the following code:
orders.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Orders Page</title>
<link rel="stylesheet" type="text/css" href="orders.css">
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
orders.css:
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
I want the blue header to align with the top of the box. However, there is a white space between the blue header and the top of my box, as seen in the following image. I am not sure how to make the top of the header align with the top of the box. Any insights are appreciated.
Browsers have default styles that you have to override and the browser you are using is adding a margin to p element.
I recommend you use one of the header tags for your element (more semantic).
<h1 class="order-header">ORDER #10980<h1>
And remove margins
.order-header {
margin: 0;
...
}
You can use font-size to adjust text size and line-height to center the text vertically (you can remove height if you do this).
HTML has some default value like #khan said. Also you can try flex property in css, it will help u a lot when doing some element align operation.
<!DOCTYPE html>
<html>
<head>
<title>Making a box with a coloured header in HTML and CSS</title>
<style type="text/css">
.order-container{
border: 1px solid #999;
height: 200px;
width: 300px;
}
.order-header{
text-align: center;
height: 50px;
background: #81CCD3;
}
.order-header p{
margin:0 ;
}
</style>
</head>
<body>
<div class="order-container">
<div class="order-header">
<p>ORDER #10980</p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
</body>
</html>
Remove the default margin from the p tag. Here's a list of default values.
p {
margin: 0;
}
p {
margin: 0;
}
.order-container {
border-style: solid;
height: 400px;
width: 400px;
}
.order-header {
text-align: center;
background-color: #a9dbde;
height: 60px;
}
<div class="order-container">
<div class="order-header">
<p>ORDER #10980
<p>
</div>
<div class="order-list">
</div>
<div class="order-footer">
</div>
</div>
A picture = 1000 words so let me show you what I mean:
Div 1 is the common parent which is the container, Divs 2 are the unique parents which are columns and Divs 3 are the 2 children that I want to align horizontally.
Their size is dynamic and none of them have a fixed height, but if one of them is higher than the other I want both of them to be displayed with the same height.
I have used flexbox to align Divs 2 horizontally already and even if their size , here is how the HTML and CSS look for now:
HTML
<div id="div1">
<div id="div2">Text div 2
<div id="div3">Text div 3</div>
</div>
<div id="div">Text div 2
<div id="div3">Text div 3</div>
</div>
</div>
CSS
#div1 {
display:flex;
flex-direction: row;
}
#div2 {
border: 1px dotted black;
border-radius: 20px;
}
Could you help me to align Divs 3 horizontally and make them appear as same height please?
Thanks a lot!
you can use align-items:stretch on parent to achieve this
#div1 {
display:inline-flex;
border: 2px solid red;
}
#div3 {
width: 200px;
border: 2px solid lime;
}
#div3-2 {
width: 200px;
border: 2px solid lime;
}
#div,
#div2 {
border: 2px solid blue;
margin: 10px;
padding: 10px;
display: flex;
}
<div id="div1">
<div id="div2">
<div id="div3">Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text xt di</div>
</div>
<div id="div">
<div id="div3-2">Text div 3 Text di</div>
</div>
</div>
please try this code:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>test template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
#div1 {
display:inline-flex;
flex-direction: row;
align-items: stretch;
border: 2px solid red;
}
#div3 {
width: 100px;
border: 2px solid lime;
}
#div3-2 {
width: 100px;
border: 2px solid lime;
}
#div,
#div2 {
border: 2px solid blue;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">Text div 2
<div id="div3">Text div 3</div>
</div>
<div id="div">Text div 2
<div id="div3-2">Text div 3 lorem ipsum afda adsfa sdfa fdsa fdafdsa fda sdfa fd</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm trying to find where the white space below my blocks container is coming from. I can fix it by adding a negative margin-bottom, but I'm wondering where it is coming from in the first place. I want it to be on the very bottom border on the container div.
JSFiddle: https://jsfiddle.net/sv7eqoff/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<link rel="stylesheet" href="positioning.css">
</head>
<body>
<nav></nav>
<div id="container">
<div id="topbar"></div>
<div id="blocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<footer></footer>
</body>
</html>
CSS:
body {
margin: 0px 0px;
}
nav {
height: 100px;
background-color: blue;
width: 100%;
}
#container {
border: 2px solid black;
width: 90%;
margin: 40px auto;
}
#topbar {
width: 100%;
height: 200px;
background-color: lightgray;
}
#blocks div {
width: 200px;
background-color: lightgray;
height: 200px;
display: inline-block;
margin-top: 5px;
}
footer {
height: 100px;
background-color: blue;
width: 100%;
}
It's because those DIVs are inline-block; elements, which are aligned at the baseline (like text), meaning that some whitespace below that baseline is reserved for those parts of the letters which go under the line (like in letters g, j, p etc.).
You can avoid that by using vertical-align: top on inline-block elements.
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>