DIV after position:absolute - css

i put div with class="inner-box2" after div with class="inner-box".
HTML:
<div class="box">
<div class="inner-box"></div>
<div class="inner-box2"></div>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box {
border: solid 10px blue;
position: absolute;
height:150px;
width:380px;
}
.inner-box2 {
border: solid 10px green;
}
Now, I need to show div(inner-box2) after div(inner-box) but in my Code div(inner-box2) show in under div(inner-box). how to fix this? See Online Demo

If you are putting an element below the absolute position, you can add a margin to bump down your next element the distance required to "skip" the absolute item's space and presence. That way in the code, the item is still below your absolute item, but still visually appears below it.

Absolutely-positioned items need to have top|bottom + left|right defined.

Is this what you are shooting for http://jsfiddle.net/4bqzz/22/? I've modded your css a bit, and then floated the boxes left. You can play around with the sizes, borders, etc... But I assume they were so thick just to demonstrate where they were. Like so:
.inner-box {
border: solid 5px blue;
float:left;
height:150px;
width:360px;
}
.inner-box2 {
border: solid 5px green;
float:left;
height:150px;
width:20px;
}

if you want to use absolutely positioned elements in this example, this would be how to do it: http://jsfiddle.net/4bqzz/106/
.box
{
position: relative;
width: 400px;
height: 400px;
border: solid 10px red;
}
.inner-box
{
border: solid 10px blue;
position: absolute;
height: 150px;
width: 380px;
}
.inner-box2
{
border: solid 10px green;
position: absolute;
top: 170px;
height: 210px;
width: 380px;
}

Related

Why is text contained in div that follows a floated div appearing out of place?

I have 4 divs in this order : #header , #content, #navigation, #footer.
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
float: left;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content".
The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.
After going through this question Text in floated div I learnt that content in following div will float around this floated div.
Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?
display:inline-block is a better way to use float
inline-block is better than float, The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes
Yo can do this, first remove
float: left;
in #content and add
display: inline-block;
and add
display: inline-block;
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
display: inline-block;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
display: inline-block;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>

How to wrap an inner div with relative position?

I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>

Inner border that does not push contents

I'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>

How to a add box inside the div with different background color?

My scenario here:
Inside the div which is mentioned below I need to add Find Out More link in right bottom of the div which should contain different bg-color in other words a box structure with an arrow image at the last.
.answerbox
{
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}
How It should look :
Do you mean like this? Here's a jsfiddle
By setting the parent (.answerbox) to position: relative, I'm able to set .more to position:absolute and position it wherever I like in that box; In this case, bottom right of the container.
HTML
<div class="answerbox">
Find out more
</div>
CSS
.answerbox {
height: 150px; /*Specify Height*/
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
}
.more {
background: red;
position: absolute;
bottom: 0;
right: 0;
padding: 0 10px;
height: 30px;
}
Edit - In case you want an arrow image on the button
Updated Fiddle
CSS
.more {
background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
position: absolute;
bottom: 0;
right: 0;
height: 30px;
padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}
Edit - Let the box grow with the content
Updated Fiddle
CSS
.answerbox {
width: 150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
position: relative;
padding: 10px 10px 40px;
}
did you mean something like this:
<div class="answerbox">
<a href='#' class="findout">
find out more..
</a>
</div>
and
.findout
{
position:relative;
top:120px;
left:20px;
background-color:white;
color:Red;
}
see fiddle

Fours boxes equally separated, but one doesn`t listen

Here is a fiddle of the problem. http://www.jsfiddle.net/PL6KX/
I do not know where the problem is. Would appreciate help.
Thanks.
I want to center everything proportionally from the edges. Horizontal center.
HTML:
<div id="firstleft-box"></div>
<div id="secondleft-box"></div>
<div id="firstright-box"></div>
<div id="secondright-box"></div>
CSS:
#firstleft-box {
position: absolute;
display:block;
left: 20%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#secondleft-box {
position: absolute;
display:block;
left: 40%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#firstright-box {
position: absolute;
display:block;
left: 60%;
border: 2px solid black;
width: 100px;
height: 100px;
}
#secondright-box {
position: absolute;
display:block;
left: 80%;
border: 2px solid black;
width: 100px;
height: 100px;
}
Use float to get divs next to each other, margin to make space between them and then wrap one div around them and center it with margin: 0px auto; your approach is too complicated
See the following JS Fiddle for a demonstration on why your code is not producing the output you are expecting.
http://jsfiddle.net/PL6KX/2/
Basically, you are aligning the left side of each box at 20, 40, 60, 80 etc. You are assuming that it would align the center of your boxes. What I have done in the above fiddle is to create 5 boxes 20% wide so that the points where they meet and touch each other represent 20%, 40%, 60% and 80%. As you can see your boxes at the top are aligning their left edge to those percentages.
What you need: (third set of boxes in the fiddle)
http://jsfiddle.net/PL6KX/4/
HTML:
<div class="container">
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
<div id="new-box"></div>
</div>
CSS:
.container {
margin: 0 auto;
width: 450px;
border: 1px solid red;
overflow: hidden;
clear: both;
margin-top: 20px;
}
#new-box {
box-sizing: border-box;
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid black;
}

Resources