This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
When I use the margin-left it works. But the margin-top does not work. Anyone know why the on does work and the other doesn't?
Html code
<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © </p>
</div> <!-- END FOOTER -->
Css
#footer {
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
}
p.copyright {
margin-top: 10px;
margin-left: 120px;
}
It's called margin collapse. It happens when one block element is the child of another block element. here are a couple of methods to tackle the problem.
1- Add a border to the element
2- Add 1px of padding
3- change the position property. Margins of absolutely and relatively positioned boxes don’t collapse.
I've recently written a blog post about that to learn more refer here
try out this
#footer {
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
position:absolute;
}
p.copyright {
background-color:red;
margin-top: 10px;
margin-left: 120px;
}
Try this:-
#footer {
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
overflow:hidden; // add overflow
}
p.copyright {
margin-top: 10px;
margin-left: 120px;
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
How do I remove the top margin in a web page?
(18 answers)
How do I remove the space between div and top of page?
(5 answers)
Closed 4 years ago.
My black box in this example should be all the way to the left and all the way up. I don't want to see any white space left or above of it.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<div id="box"></div>
But that isnt the case! Can anyone tell me how I can achive this?
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
You need to give margin:0 to body like this
body,html {
margin: 0;
padding:0;
}
<body>
<div id="box"></div>
</body>
<style>
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
</style>
P.S Also set padding to 0 for both html and body
You need to add 0 margin to body and html as well
body, html{
margin:0;
}
#box{
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
<body>
<div id="box"></div>
</body>
You also need to remove the default margin on the body element.
#box {
width: 200px;
height: 200px;
margin-left: 0px;
background-color: black;
}
body {
margin:0;
}
<div id="box"></div>
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
If static positioned elements are not affected by the top, bottom, left, and right properties, why does the box move along with the container when I change the margin-top value of the box element?
I have kept my code at: https://jsfiddle.net/b9rtwkq7/5/
HTML:
<div class="container">
<div class="box">
</div>
</div>
CSS:
.container
{
width:500px;
height: 500px;
background-color: grey;
margin-top: 00px;
}
.box
{
width:100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
The margins are collapsed in the jsfiddle you posted: https://www.w3.org/TR/CSS2/box.html#collapsing-margins
Add overflow: auto/hidden to .container or use the following css which I've added in a class called .no-collapse myself:
.no-collapse:before {
content: "";
display: table;
}
This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
Closed 6 years ago.
I'm creating a div with 100% width of parent and now i want it to be 10% height of parent (no mater how long the content is).
I set height: 10% but it still didn't solve my problem.
Here is my css:
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header {
display: inline-block;
background-color: #008CDA;
width: 100%;
height: 10%;
margin: 0px auto;
padding: 0px;
}
All his parent must have height: 100%.
usually it looks like this:
html,
body {
height: 100%;
background-color:grey;
}
.wrap {
height: 100%;
background-color:yellow;
}
.your_div {
height: 10%;
background-color:red;
}
<div class="wrap">
<div class="your_div"></div>
</div>
Here's a quick JSfiddle showing a parent-child layed out as you describe:
https://jsfiddle.net/k0jur7yf/
{.child {
height:10%;
width:100%;
background-color: red;
}
Could you show us a snippet of your code if this doesn't solve your problem?
Check it, first make a div and its class parent.
enter image description here
Added the following class in your Css file or in head.
.parent {height:10%; width:100%;}
In div If you use width and height style in % then it will adjust according to content but when you use style in px then it will take according to size of the width and height.
example:
<div style="width:100%;height:10%;border: 3px solid red">FOr example</div>
<div style="width:100px;height:10px:border:3px solid red">
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 6 years ago.
I have a float: left siderbar <div> that has min-height set to 500px.
The content area <div> to the left of it also has min-height of 500px.
What I can't seem to figure out is this: if the height of the content <div> goes over 500px due to longer page content, how do I get the sidebar <div> to grow downward pixel-for-pixel, matching the height of the content <div>, so that it is still touching the footer <div> that is below both of those (it uses clear: both)?
I could use a table to do this, but I'd really rather find the CSS to do it more... "properly."
The current CSS for the content, sidebar, and footer <div>'s:
#ContentHolder
{
float:left;
padding-left: 10px;
width: 590px;
min-height: 500px;
}
#SideBar
{
float: left;
width: 200px;
min-height: 500px;
background-color: #4a4a4a;
border-top: 2px solid #404040;
border-top-left-radius: 7px;
background-image: url('Images/SideBar.gif');
background-repeat: repeat-x;
background-position: bottom;
}
#Footer
{
clear: both;
background: #404040;
font-size: 10px;
height: 30px;
text-align: center;
line-height: 30px;
color: #707070;
text-shadow: 0 1px 0 #202020;
}
I think you are searching for FlexBox
Here we go: CSS - Equal Height Columns?
I hope I helped ya,
good luck.
You just need some simple CSS, have two columns, set their width,float one side or the other, and then having a div tag to clear these columns will make sure anything that appears after that, gets rendered below.
.clr {
clear: both;
}
.column1 {
width: 500px;
}
.column2 {
float: right;
width: 300px;
}
<div class="column1">
no matter how big this, does nto matter
</div>
<div class="column2">
this does not matter
</div>
<div class="clr"></div>
<div class="footer">
This is my footer
</div>
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
CSS Centering a div in different Screens
I presume the answer to this question is really simple but i am stumped.
I am trying to get a website positioned in the center of the screen like the Guardian website - http://www.guardian.co.uk/. I assumed i was right to use a left and right border, however this has made positioning the footer difficult.
Having looked at the guardian website and using the firefox inspect element capability it appears they are using no divs on the left and right of the screen whatsoever. In fact there container appears to just be in the middle of the screen.
So i suppose my question is. How do you position a container like so?
.container {
/* remember to set a width */
margin-right: auto;
margin-left: auto;
}
Here's the fiddle: http://jsfiddle.net/d9yBs/
You can also combine to 2 margin properties, and use the shorthand:
margin: 0 auto;
This'll set the top & bottom margin to 0, and the left & right to auto.
quick way is:
#container
{
position: absolute;
left: 50%;
top: 50%;
height: 200px;
margin-top: -100px /* half of you height */
width: 400px;
margin-left: -200px /* half of you width */
}
another way for only centering only is
#container
{
width: 400px;
margin-left: auto;
margin-right: auto;
}
HTML
<body>
<div class="page_wrap">
</div>
</body>
CSS
.page_wrap
{
border: 1px solid black;
width: 250px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
body
{
text-align: center; /* required by some browsers */
}
http://jsfiddle.net/pc7AY/ check it out.
It's just a trick with CSS:
margin: 0 auto;
From the guardian site:
div.InSkinAlignCenter {
margin: 0 auto;
}
As far as I remember position property should be set to relative
Try this:
CSS:
.page {
width: 200px;
background: #FF0000;
margin: auto;
}
HTML:
<div class="page">
This is the content.
</div>
Also, check this jsFiddle!