I am trying to to align one div below another and apply a margin top to the one below:
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
I applied a margin to the second div, but it is not working:
#divContainer {
pointer-events: none;
position: absolute;
top: 10px;
left: 10px;
}
#div1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
}
#div2 {
padding: 10px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
top: 10px;
width: 200px;
background: rgba(0, 0, 0, 0.1);
}
This results in the bottom div appearing below the first one. However the top: 10px; has no effect. I found online that to fix the margin problem, I should use display: inline-block; This however causes the two divs to appear next to each other rather than one being above the other.
How do I get the desired effect while keeping the second div below the first one?
top: 10px; works only for absolutely positioned elements. margin-top: 10px; will work after you set div2 position to relative.
You just need to set position: relative on #div2:
#divContainer {
pointer-events: none;
position: absolute;
top: 10px;
left: 10px;
}
#div1 {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
}
#div2 {
padding: 10px;
background: rgba(0, 0, 0, 0.1);
box-sizing: border-box;
border-radius: 5px;
top: 10px;
width: 200px;
background: rgba(0, 0, 0, 0.1);
position: relative;
}
You're not using margin-top but using top. And to the top,right,bottom, or left values need to be positioned. By default, position is static. So, those value for static position will not work:
position: relative;/*or absolute, or fixed*/
top: 30px;/*give your value*/
Now, this works.
We specially use them for positioning purposes. Thus, you may just use margin-top instead.
I'm not sure what you're after here, but I've created a fiddle with your code changing some colours for visibility and top to margin-top which is what I think you're after.
JSFiddle
Related
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 3 years ago.
i try to fit span in another span but for some reason it doesnt work.
I have already tried display: flex and display: flexbox.
JSFiddle
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: block;
position: absolute;
width: 90%;
height: 85%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
Expectation:
Content of span with green background should be inside the lightgray box.
Output:
Content of span with green background is outside of any box.
Can you try adding float:left; to both your #preview span and #cont span. Float left forces two elements to stay on the left side.
#preview, #cont{
float:left;
}
I updated your fiddle. Try the fiddle here:
https://jsfiddle.net/edy0whkp/
Short Answer
You're setting display: block to your span elements. This turns them into block elements which start on a new line and they expand the size of their parent container. Changing the display to dispay: inline-block will cause the elements to not start a new line and to only take up as much space as they need.
https://jsfiddle.net/xypntkc0/
More details
In the JSFiddle I changed the parent element to be a div instead. Setting it to a div makes it a block component so you also don't need the display: block when it's a div. It's bad practice to place block elements inside of inline elements (you have a paragraph tag as a child tag to your span tags) So I would actually change all your span tags to divs
I also changed the position to position: relative on the parent component. You typically only want to set absolute to the children elements inside of a parent component that has position: relative. The parent is set as relative so that their absolute positioned children get positioned relative to the parent.
Even more detail
If you want to align elements next to each other inside of a container, a good tool to use is flexbox. You can set display: flex to the parent element to mark it as a flex container. Then the children will automatically be set as flex items and will render side by side and boom, you're done.
https://jsfiddle.net/vkru8wg7/
It looks like you're trying to make #preview and #cont sit side by side within #midbox. If this is the case, simply make #midbox {display: flex;}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: flex;
position: absolute;
width: 90%;
height: 85%;
top:0; right:0; bottom:0; left:0;
margin:auto;
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
If you want to learn about flexbox there's a great article at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I Set display:Flex to the .container element. I had put two children on the element. and gave max-width to the child(.box) of second flex-Item. But it does not seems to work.
body {
font-family: sans-serif
}
.container {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
.par {
position: relative;
margin-left: 7px
}
.round {
height: 17px;
width: 17px;
background: #cacaca;
border-radius: 50%
}
.box {
padding: 10px 16px;
box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.2);
background: #fff;
position: absolute;
font-size: 14px;
color: #333;
max-width: 200px;
left: -11px;
top: 28px;
}
.box::after {
content: "";
position: absolute;
height: 10px;
width: 10px;
background: #fff;
box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.17);
transform: rotate(-137deg);
top: -5px;
left: 16px;
}
<div class="container">
<div>Title</div>
<div class="par">
<div class="round"></div>
<div class="box">This is a Paragraph Text</div>
</div>
</div>
Js Fiddle Link
The position: absolute child's width depends on it's position: relative parent.
In your case, .box's width depends on .par while .par is too narrow to contain the word "Paragraph". That's why the .box's width is depending to the its longest word in the content.
I don't think you can set dynamic width to .box while not exceeding 200px and also keep the current width of .par. There maybe 2 ways to solve your problem.
set .par's to width: 200px
set fixed width: 200px to .box
You need remove position: relative for .par and remove left and top for .box instead add styles for .box like margin: 8px 0 0 -11px;, than max-width will be work correct.
I have one problem with internet explorer about css div positioning.
I have created this DEMO from codepen.io .
If you check this demo with chrome or firefox then you can see the .test div positioning vorking correctly but when you open the demo with internet explorer then you can see the .test div shifted to the left side. How can i fixed this problem to work all browser anyone can help me in this regard ?
.test {
display: block;
position: absolute;
height: auto;
top: 0;
left: 0;
right: 0;
max-width: 580px;
min-width: 300px;
margin-top: 64px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
padding-top: 2px;
background-color: #f7f7f7;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
min-height: 840px;
}
.header {
height: 12rem;
background: #009688;
}
<div class="test"></div>
position : absolute
The element is positioned relative to its first positioned (not static) ancestor element.
So you need to specify position (position:relative | fixed | absolute i.e. any position apart form static) to the parent (this case body or html)
It works fine without position: absolute;
https://jsfiddle.net/agnmx7s6/1/
To center align the DIV below code enough.
body{text-align:center}
Remove the below code in .text class
position: absolute;
You can achieve this without absolute positioning.
Please check the fiddle - https://jsfiddle.net/afelixj/agnmx7s6/4/
Also added negative margin-top to the center div.
I'm working on a creative project whereby I want to add 'triangles' to box elements to get a speech bubble effect and still apply an opacity to each element as shown below:
I can get the blocks to display correctly with a 1px boarder on the right and bottom of each element. This, however, does not include the arrows on the heading element. When I add the arrows, using .heading:before, the result is as shown below:
As you can see, the original border remains, breaking the arrow and its corresponding element.
My HTML is as follows:
<li class="heading">
<div class="text_contain_head">
<h1>Heading</h1><p>Subheading</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 1</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 2</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 3</h2><p>Description</p>
</div>
</li>
<li class="options">
<div class="text_contain">
<h2>Option 4</h2><p>Description</p>
</div>
</li>
and here's the CSS for .options:
.options {
position: relative;
padding-bottom: 25%;
height: 0;
width: 25%;
background-color: rgba(0, 0, 0, 0.25);
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
and here's the CSS for .heading:
.heading {
position: relative;
padding-bottom: 25%;
width: 75%;
background-color: rgba(0, 0, 0, 0.6);
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 40px;
padding-right: 40px;
float:left;
}
.heading:before {
content: "\0020";
display: block;
border: solid 20px transparent;
border-right-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 50%;
right: -40px;
margin-top: -20px;
z-index: 1002;
transform:scale(1,1.5);
-ms-transform:scale(1,1.5);
-webkit-transform:scale(1,1.5);
}
P.S. I use :after to add a white triangle with a 1px offset underneath the :before to replicate the border around the triangles.
In the end, I want to be able to keep the elements' opacities (due to the background image) and still be able to 'remove' the original border where the arrows overlap.
I'm stumped, as such any and all advice would be most apreciated
here is a jsfiddle of what I have so far: http://jsfiddle.net/N2nZ6/1/
I have put up a fiddle of my own: http://jsfiddle.net/Pevara/8WBcQ/
It was not easy, but i think i got away with it, but with some limitations:
- I had to add two empty nodes inside your .heading for the arrows. I know it isn't pretty, but I tried without them and just couldn't get it to work.
- I had to set a fixed width. It might be possible to do with percentages, but as it requiers very exact positioning, I did not even try... (percentages and exact postioning are a no go in my experience)
How does it work:
- I turn the extra nodes into a square and rotate them 45deg to make them look like an arrow point
- I position them absolute over the edge of the .heading, to cover up the border.
- I set them to overflow hidden to prevent the :after and :before overflowing
- I set the background image on the :before, counter rotate 45deg, and position exactly to line up with the background image of the ul
- I add another :after with a the same semi-transparent background color as the .heading to make the backgrounds match exactly.
It is not exactly clean, and it will take some fiddling with the positioning, but it works (in chrome, other browsers might need some prefixes). I don't dare to look at the result in older IE's. Might not be useable in a real life website, but as a proof of concept...
In real life I would probably go for a sprite image with the borders and arrows already in place, and position the li's on top of them.
And because SO insists, here is a part of the css:
.arrow-down {
position: absolute;
display: block;
overflow: hidden;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
top: 200px;
left: 300px;
background-color: rgba(0, 0, 0, .5);
margin-left: -25px;
z-index: 5;
border: 1px solid #fff;
border-left: none;
border-top: none;
}
.arrow-down:after {
content:' ';
display: block;
width: 300px;
height: 300px;
-webkit-transform: rotate(-45deg);
background-repeat: no-repeat;
background-image: url(http://www.placekitten.com/900/600);
background-position: -114px -77px;
z-index: 1;
position: absolute;
top: -100px;
left: -150px;
}
.arrow-down:before {
content:'';
background-color: rgba(0, 0, 0, .5);
z-index: 2;
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
I think that achieving this effect is a bit complicated which can be done by making the triangle opaque and keeping the same background image(using appropriate position) for the triangles which would cover the border.
I have one article tag, inside a php code that generate articles from wordpress. They are not all the same height ofc, it depends on the content. They are organised in two columns by float.
If a article in the first line is not the same height as the other one in the same row, the second row is aligned to the bottom of the biger div. Now I want to align them without any spacing.
Here is some css:
#container {
width: 1000px;
margin: 0px auto;
}
article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
Edit jsFiddle (now with content to demonstrate the problem): http://jsfiddle.net/4PMj5/6/
You can use even and odd chilren pseudo selection in your CSS.
article:nth-child(even) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: right;
}
article:nth-child(odd) {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}
The result will be like: this updated fiddle.