This question already has an answer here:
Why is an element with position: fixed moving with a non-positioned sibling?
(1 answer)
Closed 5 years ago.
I have two div elements inside a my body.
The first div is position:fixed, but when I add a paragraph to the second div, the first div moves down from the top of the page by ~20px.
How is adding a paragraph to one div, affecting the positioning of a previous div on the layout?
In the following code, there is one paragraph in the second div. This is the paragraph I am referring to.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
It's because you're not positioning the element anywhere vertically, because you're not setting any of its top or bottom offsets, thus placing it where it would be positioned if it were part of the document flow. This means it will align itself with the first element in the document flow, according to its margin.
That first element in document flow happens to be <p>.
The proper fix for your problem is setting top:0; on the fixed element. For a more detailed explanation please read the accepted answer of the question yours duplicates.
Other possible (improper, IMHO) "fixes" are adjusting the first element in document flow to start from the top of the document, by overriding the default margins of <p> to 0, or setting it's display property to inline-block (or any other inline type of display).
It's because p tags has a margin by default, so you just have to reset this margin using p {margin: 0;}. Here is the working example:
p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
Related
I am learning CSS in Codecademy. I had already taken their HTML course so I knew about the center tag. However, now they introduced the CSS margin property. They also introduced the margin: 0 auto; property. From my knowledge, both do exactly the same thing. So is there any differences and when do I use each one or does it not matter? Thank You In Advance!
<center> is an depreciated tag. You should avoid using it. This tag is not supported in HTML5. CSS property is used to set the align of the element instead of the center tag in HTML5. An equivalent tag to <center> can be considered to be -
.center { margin: 0 auto; text-align: center; }
The main reason why <center> was depreciated was because it defines the presentation of its contents and not the contents itself. According to w3.org -
The CENTER element is exactly equivalent to specifying the DIV element
with the align attribute set to "center". The CENTER element is
deprecated.
So is there any differences and when do I use each one or does it not matter?
The above code snippet and <center> can be considered equivalent. Just using margin: 0 auto; can't always be considered the same though. See the below example -
<!DOCTYPE html>
<html>
<body>
<center>
<div>This is a div inside center</div>
</center>
<br>
<div>This is a div without any styling.</div>
<br>
<div style="margin: 0 auto;">This is a div with "margin: auto 0px;".Text not centered, doesn't work.</div>
<br>
<div style="margin: 0 auto;text-align:center">This is a div with "margin: auto 0px;".Text centered, works !</div>
</body>
</html>
Another point to consider is that The <center> tag is a block-level element, which means it can contain other block-level and inline elements and center them. Consider below example -
p {
width: 200px;
display: block;
}
<!DOCTYPE html>
<html>
<body>
<!--p has a width of 200px given through css-->
<center>
<p>centers the element to page center</p>
</center>
<center>
<div style="margin:0 auto;text-align:center;">
<p>This one doesn't work here same as center tag </p>
</div>
<div>
<p style="margin:0 auto;text-align:center;">This one does</p>
</div>
</body>
</html>
As the W3Schools wiki describes here, the <center></center> tag is not supported by HTML5, although browsers will still work with it because of backwards-compatibility. Your best bet is to use the margin: 0 auto property.
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.
I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding
You misunderstood me in my previous message so I post a new with an example.
Assume the following that you float for example an image left and some div to the right containing for example which browser you use and date + time and some other things perhaps.
Now you want also to display a name for the company centered between these two floats on the same row. The text of the company in between should always be centered even when you make the browser width smaller.
In this example I can't make the text to be placed centered between the two floats.
It doesn't matter if I put the text in inline element or block element.
I have tried both. In this example I have a p tag.
It doesn't work to use text-align:centered when you have elements that are floating.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style type = "text/css">
#imageone
{
float:left;
}
p#right
{
float:right;
}
div p
{
text-align : center;
}
</style>
</head>
<body>
<div style="background:red">
<p>My company</p>
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
</div>
</body>
</html>
This is relatively simple to do if any two of the elements are fixed-width. You can implement it by using position: relative on the containing element, and position: absolute on the children (the blocks to be aligned left, right, and center).
See this jsFiddle for an example.
You could put your company name after the floated elements in the html:
<body>
<div style="background:red">
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
<p id="name">My company</p>
</div>
</body>
Adding margin 0 to p#right also ensures it will appear vertically centered with the other elements:
#imageone
{
float:left;
}
p#right
{
float:right;
margin: 0;
}
div #name
{
text-align : center;
}
}
See a fiddle here: http://jsfiddle.net/WDrVK/1/
Can you style the center element as margin: 0 auto;?
As in this example: http://bluerobot.com/web/css/center1.html