Im trying to move a div inside another div down a bit, but when I use
margin-top: 10px;
It makes a white gap at the top. Heres the html:
<div id="topb">
<div id="selection">
</div>
</div>
And heres the CSS:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
margin-top: 40px;
}
And heres a screenshot of the website:
For this, you can use position: absolute. Here is the code:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
position: absolute;
top: 40px; /*This is where it is changed as well as the line above*/
}
Hope it helps! I think padding would still leave a background, so this is a better idea.
maybe you can modify the parent element by adding padding-top:10px; instead of modifying the child.
This is a "collapsed margin" problem.
It has been answered in this question :
Why would margin not be contained by parent element?
You would have to change the parent div to either (1) add a border, (2) position absolute, (3) display as inline-block, (4) overflow auto.
Refer to the posted link for more detail.
Here is the working fiddle Hope it may help.
position:absolute;
position:relative;
This is because when you have a block element (display: block) inside another block element, the margins will collapse. It will only be considered the largest margin.
So, in your example it will only consider one of the margins (40px).
See reference about collapsing margins.
There are a few workarounds. Choose any:
using padding instead of marginfor the component inside.
Change display type. e.g. display: inline-block.
Use absolute positioning.
Remove margin-top style in #selection, and apply padding-top to #topb
Related
http://codepen.io/basickarl/pen/Wrwdam?editors=110
html:
<div class="back">
</div>
css:
html,
body {
height: 100%;
}
div.back {
margin-top: 50px;
display: absolute;
width: 30px;
height: 30px;
background-image: url('http://simpleicon.com/wp-content/uploads/arrow-35.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
The scrollbar on the right displays. I have to have html, body at 100% because of a sticky footer I'm using. Any ideas?
the body element has a default margin: 8px; in most major browsers so first you have to remove that by resetting the margin property on the body element
body {
margin: 0;
}
Then, instead of using height: 100%; on the body use min-height: 100%; so that the body can also grow beyond 100% height when used in conjunction with overflow: hidden;
Since min-height doesn't work if the parent height isn't explicitly set, a height attribute has to be added to the html element as well.
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
overflow: hidden;
}
Also, your div.back selector has an invalid value on the display property. the display property accepts inline, inline-block, block, none, flex, inline-flex, grid etc... whereas the position property accepts static (default for every element), absolute, relative or fixed. This is not a problem but rather something the browser just ignores as it doesn't understand it.
div.back {
display: absolute; // <------ remove this line
//... snipped ...
}
It's partially because the default browser style sheets add some margins and/or padding. Resetting them to 0 will fix part of it (JSFiddle).
However you've also got a div with some margins applied (50px). The way the box-model works will mean you'll need to minus that from your 100%. You can use calc if you really need to (or just change it to padding):
height: calc(100% - 50px);
Example using the above code: http://codepen.io/anon/pen/mVPpYK
Example using padding: http://codepen.io/anon/pen/OMNzqB?
If you inspect element, you can see it because of back margin-top style.
Solution
Instead of margin-top, use top.
And then add margin: 0to your HTML/BODY.
There is another thought, even though some of these answers work. Set the body to have a margin of 0 and float the div to the left.
Example - Code Pen
html, body { height: 100%; margin: 0; }
div.back {
float: left;
margin-top: 50px;
width: 30px;
height: 30px;
background-image: url('http://simpleicon.com/wp-content/uploads/arrow-35.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
You should use overflow.
body {
height: 100%;
overflow:hidden;
}
Try using:
html, body {
height: 100%; overflow: hidden;
}
I've got a little css problem.
I got a div with a max-width. In this div there is a img that needs to be positioned outside his div (to the bottom). Unfortunately I can't use position absolute because of the max-width. When I would use position absolute, at some point the width of the screen reaches the max-width and the img with position absolute will go outside the div on the right side.
I know this must sound a little messy, so I've made a Jsfiddle:
https://jsfiddle.net/te93s8h1/
This JS Fiddle shows a example of the issue I got. I need the green block outside the div (at the bottom) but the green block can not go outside the div on the right side. How can I achieve this?
I prefer css only.
Never mind my question, I think I understand what you're trying to achieve. You should add a position: relative; statement to the style block of your .grid class as demonstrated in this JSFiddle.
Just simply try this without using position absolute.
.container {
background-color: #00f;
width: 98%;
height: 100px;
margin: auto;
max-width: 1300px;
}
.grid {
position: relative; /* Added Position */
background-color: #f00;
width: 50%;
margin: auto;
min-width: 600px;
height: 100px;
}
.block_outside_div {
position: inherit; /* Added Position */
background-color: #0f0;
height: 50px;
width: 50px;
left: 45%; /* 45% Percentage value for move from left */
top: 120px; /* 120px value for move from top */
}
<div class="container">
<div class="grid">
<div class="block_outside_div">
</div>
</div>
</div>
I'm having an issue with horizontally centering a fluid image in a fluid div. From looking high and low, the solutions others have found are not working for me, either I'm trying to do something too hard (I doubt it) or I'm working with different medium.
HTML:
<body>
<div id="BackgroudDiv">
<img src="images/NumberTwo.png" alt="" id="FSBG"/>
</div>
</body>
CSS:
body {
margin: 0px
}
#FSBG {
width: auto;
height: 100%;
min-width: 1040px;
position: absolute;
min-height: 585px;
}
#BackgroudDiv {
width: 100%;
height: 1080px;
text-align: center;
display: block;
background-color: #BF2527;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
"Margin: auto" does nothing as the width of everything is variable. In the code as it is, the left edge of the image "NumberTwo" is centered on the page. I want the center of the image to be centered. It behaves just as it should scaling-wise, but not in the middle of the page!
Any help would be much appreciated, it's been driving me up the wall. Let me know if more information is needed.
H
You only need to remove the position: absolute; in the img:
#FSBG {
width: auto;
height: 100%;
min-width: 1040px;
min-height: 585px;
}
DEMO: https://jsfiddle.net/3w5rqg3d/1/
As you are using position absolute, you need to set the top, right and left to 0px; and then you can add margin-left and margin-right auto.
Example - https://jsfiddle.net/zvbn2fak/
top:0px;
left:0px;
right:0px;
margin-left:auto;
margin-right:auto;
Please note that this is not best practice using position absolute on an image when its not need. Please read the comment by lmgonzalves, below with a better fix.
You can use flexbox, but be wary that flexbox is not supported on older browsers.
#backgroundDiv {
display: flex;
justify-content: center;
}
And that's it. justify-content aligns the items inside in the flexbox along the direction of the flex. I'm not sure if it works on position: absolute items, but you can check it out.
Note: I've left vendor prefixes for the sake of brevity, but you'll likely have to add those to get the desired effect across browsers.
I have seen people ask questions about how to get two divs to line up side by side. I can get mine to do that just fine.
My problem is that they will not smash up against each other. There always seems to be a gap.
For example, I have a wrapper div with a width of 500px. Inside that div I have two other divs with widths of 250px.
They will not line up next to each other because there is not enough space for each other.
When I set the width to 248px they do line up but with a 4px gap between each other.
I have an example of this code located here:
https://c9.io/riotgear66/day1/workspace/sams/html/index.html
Please feel free to take a look at it and try adjusting it with your browser's element inspector.
The layout problem is the result of applying display: inline-block to the div elements.
Any white space between those div elements are taken into account when laying out the content.
You could remove the white space (linefeed or carriage return) between the div's if you don't mind how your source code looks.
Since your parent container has specific dimensions (500px x 300px), I would use absolute positioning to place the child elements. This would make it easier to position your logo motif over the other images.
You could also use floats as stated in other responses, not any easier or harder.
In this application, the layout is fixed so there are no design considerations for a responsive or flexible design, so either approach is valid.
Demo
You can see how this might work in the following demo: http://jsfiddle.net/audetwebdesign/hZ5dB/
The HTML:
<div class="container">
<div class="panel ul"></div>
<div class="panel ur"></div>
<div class="panel ll"></div>
<div class="panel lr"></div>
<div class="overlay"><span>Cats</span></div>
</div>
and the CSS:
.container {
border: 1px dotted blue;
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
.panel {
width: 250px;
height: 150px;
position: absolute;
}
.ul {
background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
top: 0; left: 0;
}
.ur {
background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
top: 0; right: 0;
}
.ll {
background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
bottom: 0; left: 0;
}
.lr {
background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
bottom: 0; right: 0;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.overlay span {
display: block;
background-color: gray;
border-radius: 50%;
text-align: center;
vertical-align: middle;
width: 80%;
height: 80%;
margin: 10%;
line-height: 80px;
}
I also show how you can create the circular motif without having to modify the original background images, saves a bit of work with PhotoShop or similar.
You shouldn't be using
display: inline-block;
Make them:
float: left;
Here is a jsfiddle sample of how it should be.
http://jsfiddle.net/Tqdqa/
The problem lies in the white space in your HTML. When using display: inline-block, white space after elements is taken into account like Marc Audet said.
To fix it without changing your current method, you must remove that white space. The easiest way I've found to do so while still maintaining readability of the HTML is by commenting it out, or using <!-- after each element and --> before the next element. This prevents having to change the whole structure and you can make each one 250px again as well
You could also move the closing > to the next line, move everything after the opening <div> to the next line, or use margin-left:-4px; for each element after the first. Or use a method described by others here, floating it or using FlexBox
Here is the CSS Tricks page that references this situation and provides more detail
I'm working on a simple CSS and HTML website, trying stuff out.
I wanted to make an image float over a div. Something like so:
<div id="big_container">
<img id="img1" src="images/fun.png"/>
<div id="some_container"></div>
</div>
Here is the CSS for it:
#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}
#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}
#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}
What this does, is instead of placing the img over the some_container div, it places it FIRST and after the image, underneath it, it places the some_container div.
How can i get the image to float over the div? Firefox and Chrome display it correctly. IE8 does not.
EDIT
I tried removing relative and left, according to Kyle Sevenoaks. But it still displays it above the div, and does not overlap.
You can use position: absolute; to make it display over the div you require:
#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/
EDIT
I forgot to mention that with this you should add position: relative; to the parent div.
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/
Floating an element will not place it over the top of other elements within the same parent. You've also tried to use a "left" CSS value on a relatively positioned element. "float" works on relatively positioned elements, "left" works on absolute and fixed positioned elements.
Here is your CSS to position "img1" over the top of "some_container" (includes short hand for margin declarations). Note "position:relative;" applied to the parent "big_container".
#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }
You will now see that IE8 wasn't at fault here. Other browsers may have been kind to you and ignored any conflicting CSS declarations to give you the desired result. IE8, being less sophisticated, probably wasn't compensating and taking your CSS literally.