I'm trying to play with positioning in css and I noticed something that confused me. It's probably a dumb question...but I'm having trouble understanding it.
I created three divs with the width and height of 50px with different background colors. When I position the third div up -60px using margin-top, the third div is on top of the second div. However, when I make the first and second divs inline elements, then both the first two divs are now on top of the third one.
Can someone please explain this concept to me?
<head>
<style>
<!-- Divs with the same width and height. Second one where both the first two divs are inline below this one. -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
<head>
<style>
<!-- First two divs are inline -->
#one{
background-color:red;
width:50px;
height:50px;
}
#two{background-color:blue;
width:50px;
height:50px;
}
#one, #two{display:inline-block;}
#three{background-color:green;
width:50px;
height:50px;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
I think there are two issues going on here. One is that by leaving the third div display:block it will naturally wrap the first two divs. For a quick primer on blockvs inline-block see here.
The second part of this is that you have margin-top: -60px while having height: 50px. The negative margin is basically moving it higher up the page. This means the green box will apear 10px higher than the red one (-60 + 50 = -10).
Example Fiddle - I've added margin-left: -5px; and you can see the third div peeking out from under the first.
Related
I need help with this simple example which I designed just to understand INLINE-BLOCK related layouts. It's simple:left and right parts, and inside right part there're up and down elements. I want the right part in the center of the [screen width minus left part], while inside right part h3 and p elements align left. I added a border just to understand if I've fully used space of the righthand screen. Sometimes my hands are tied so I can not change html, so I need pure css method.
I do have read some of the similar questions here, but after some tests I'm still lost ---- for example, giving a width:500px to right part? but I need right part CENTERED for different screens! Another problem: right part text-align:center will also influence inside elements; inside elements text-align:left will also influence right part.
Please note: this is about inline-block....and pure css.
Appreciate any response.
.left{
display:inline-block;
background:aqua;
}
.right{
border:solid;
display:inline-block;
}
<OCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="whole">
<div class="left"><p>lefter</p></div>
<div class="right">
<h3>upperright</h3>
<div class="lowerright"><p>sdfsdfsdfsdfsdfsdd</p>
</div>
</div>
</div>
</body>
</html>
The attached image shows my thought.
added
margin-left: 50%;
transform: translatex(-50%);
to .right. hope this helps. thanks
.left {
display: inline-block;
background: aqua;
}
.right {
border: solid;
display: inline-block;
margin-left: 50%;
transform: translatex(-50%);
}
<OCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="whole">
<div class="left">
<p>lefter</p>
</div>
<div class="right">
<h3>upperright</h3>
<div class="lowerright">
<p>sdfsdfsdfsdfsdfsdd</p>
</div>
</div>
</div>
</body>
</html>
Derived from an actual problem with borders and margin on my site I have made this test example which I think acts a little strange:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
}
.outer {
width:100px;height:100px;
}
.inner {
margin-top:40px;
height:20px;
border:1px solid red;
}
#outer-1 {
background-color:blue;
border-top:10px solid yellow;
}
#outer-2 {
background-color:green;
border-top:none;
}
#sep {
background-color:white;
}
</style>
</head>
<body>
<div id="outer-1" class="outer">
<div class="inner">
CONTENT
</div>
</div>
<div id="sep">TEST</div>
<div id="outer-2" class="outer">
<div class="inner">
CONTENT
</div>
</div>
</body>
</html>
Why does the top margin on ".inner" move "outside" when the border-top is removed in #outer-2? I would have thought the red border would have stayed inside the blue and green areas at relatively the same spot? but it doesn't.
Why? and is there a way to have it to look like I had imagined?
Because margins are evil (and tend to collapse -> is it a bug? margins of P element go outside the containig div). In your case you can simply add overflow:hidden; to .outer
http://jsfiddle.net/yhAaQ/
Your problem is that margins are exactly what the name states: they set margins to other elements, not positioning offsets. If two elements are next to eachother, with different margins, they will be placed the highest margin apart, that way both margins are satisfied. In this case, 2 margins are present with nothing separating them, so logically they collapse.
Using padding on the .outer should solve this, or relative positioning. Margins are stricly for maintaining distances to other elements.
The margin on the outer2 element is calculated from the bottom of the element above it with no top margin applied to the outer2 element. If you add border, however, it is calculated from the bottom of the border.
Also, when bottom and top margins are applied to elements that follow each other, they collapse, that is just the way the box model works.
If you want to control the offset of an element inside another element, use padding.
body{/* just a reset to simplify example */
padding:0;
margin:0
}
.inner {
margin-top:40px;
height:40px;
width:40px;
background-color:blue;
}
#outer{
background-color:green;
height:60px;
width:60px;
}
<div id="outer">
<div class="inner">
<div class="inner">
<div class="inner">
<div class="inner">
test
</div>
</div>
</div>
</div>
</div>
Above code is a more general case of the problem you mentioned. All .inner are having margin-top=40px in CSS. But in reality, since there is no border involved, all the margins just collapse down to one final margin of 40px which "bubble up" outside of root parent.
I am trying to create two <div>'s that overlap. The only problem is that the second <div> is in front of the first <div> and it has to be the other way around. I've tried setting the z-index of the first <div> to 1 but it still does not work.
Here is my code:
#content{
background-color:pink;
overflow:auto;
position:relative;
}
#content_1{
width:400px;
height:1600px;
background-color:#000099;
margin:0 auto;
z-index:1;
}
nav{
width:300px;
height:500px;
background-color:yellow;
position:absolute;
top:0;
right:200px;
z-index:0;
}
<div id="container">
<header> </header>
<div id="content">
<div id="content_1"></div>
<nav></nav>
</div>
<footer></footer>
</div>
How can I make the first div overlap the second?
z-indexing works when both elements share the same stacking context, both are positioned (relative or absolute), and both have a z-index attribute applied. In this case you've only applied the positioning and z indexing attributes to one.
add position absolute to content_1 or add position relative
I have no idea why, and this seems illogical, but for some reason the text in one div affects the position of another. The difference in the number of lines the text takes up offsets the height of a div with fewer lines. These divs are side-by-side inline boxes, so it really shouldn't do that period. Not only that, but they have fixed dimensions. I have no clue why this is happening but it ruins my design. Here's the code, stripped down to the problem without anything else in it.
<div class="box">
<div class="main">
<br><i>"Message"</i>
</div>
</div>
<div class="box">
<div class="main">
<br><i>"Message that is longer than the other message."</i>
</div>
</div>
<style>
table {
width:100%;
}
div.box {
background:#ccc;
border:1px solid #000;
display:inline-block;
height:100px;
padding:4px;
margin:4px;
width:100px;
}
</style>
My browser is Google Chrome, latest release.
You need to add vertical-align: top to div.box.
Demo without: http://jsfiddle.net/ucE8r/
Demo with: http://jsfiddle.net/ucE8r/1/
See here:
http://www.brunildo.org/test/inline-block.html
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
I'm a bit confused when to use overflow:hidden to make sure the the parent element wraps around other elements. I've always used the clear: both; div to do that, but it doesn't make a lot of sense semantically. Can anyone explain how overflow:hidden parent div does it's magic? And when should we prefer this technique over the clear:both method?
Cheers!
Overflow of anything but visible creates a new block formatting context which clears the floats.
When we use float : left , the problem with that is when there is enough space for the next element it will come next to the floated element to avoid that we use clear:both
eg:
<style>
#wrapper{
width:500px;
}
#one{
width:100px;
float:left;
}
#two{
width:100px;
float:left;
}
#three{
width:100px;
}
.clearfix{
clear:both;
}
</style>
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
In the above situation totaly there is 500px space out of that one, two divs took 200px space rest there is 300px space and dv three is just 100 px . So div three will go next to div two as there is enough space. To avoid that just put a div with clear:both after div two
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div class="clearfix"></div>
<div id="three"></div>
</div>