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>
Related
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
I am trying to set the margin for multiple div elements inside a container div. Here is the HTML:
<div id="container">
<div id="square"></div>
<div id="square1"></div>
<div id="square2"></div>
</div>
Here is the CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
Now, say I want to edit the margin of square 1. Here is the updated CSS:
#container {
background: #ccc;
width: 200px;
height: 500px;
position: absolute;
overflow: initial;
}
#square {
margin-top: 10px;
height: 50px;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
background: black;
}
#square1 {
margin-top: 55px;
height: 50px;
background: red;
}
The margin of square 1 is correct. However, it messes up the margin of square2 because now the top margin is measured from square1 instead of the container div. How do I set the margins of all the sibling divs to where they are measured from the container, regardless of what the other sibling divs are added/removed? Any help would be greatly appreciated.
your will need to give position absolute and width 100%; you can check the js fiddle
Js fiddle
like this for every square
#square {
margin-top: 10px;
height: 50px;
background: green;
position:absolute;
width:100%;
}
You're better off dumping these square divs into a relative div and have an absolute position for each square div. You kind of lucked out because you know the height of each of your square divs.
So your HTML stays the same. The reason you put absolute within the relative is so that the absolute value plays into the #container field instead of body.
Your CSS changes however:
#container {
background: #eee;
width: 200px;
height: 500px;
position: relative;
border: 10px solid green;
}
#square {
margin-top: 10px;
position: absolute;
height: 50px;
left: 0;
right: 0;
background: green;
}
#square2 {
margin-top: 275px;
height: 55px;
position: absolute;
background: black;
left: 0;
right: 0;
}
#square1 {
margin-top: 55px;
position: absolute;
left: 0;
right: 0;
height: 50px;
background: red;
}
I have certain boxes which I want them to be side by side. I used float:left;margin-left:10px; and successfully achieve my aim.
But I want to lock their positions on screen i.e. fixed w.r.t to screen and no movements according to mouse. For that I tried to use `position:fixed', it too worked, but now it created a problem.
The problem is that the two boxes are now overlapping with each other and displaced with their location.
Her is the fiddle
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
float: left;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
You can set the fixed property to parent div. Try this fiddle.
CSS
.chatWindow-parent{
position: fixed;
}
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
HTML
<div class="chatWindow-parent">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
http://jsfiddle.net/2csBx/
You have to have 2 different classes. Otherwise by fixing the position you are telling them to be fixed in the same location.
Need to add a parent class
HTML
<div class="chatContainer">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
CSS
body{
height: 2000px;
}
.chatContainer {
position: fixed;
bottom: 10px;
}
.chatWindow {
display: inline-block;
position: relative;
float: left;
width: 250px;
height: 280px;
bottom: 10px;
margin-left: 10px;
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
Try this fiddle: http://jsfiddle.net/ETwEF/2/
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;
}
I'm scratching my head over this one. I would like for the green rectangle to be underneath the yellow topbar.
http://jsfiddle.net/PY9ss/1/
HTML:
<div class="body">
<div class="topbar">
<div class="mid">
<div class="attention"></div>
</div>
</div>
</div>
CSS:
.body { background: gray; width: 100%; height: 800px;}
.topbar { background: yellow; width: 100%; height: 50px; position: fixed; top:0; left:0; z-index: 10; }
.mid { background: red; width: 400px; height: 40px; margin: 10px auto 0; position: relative; }
.attention { background: green; width: 100px; height: 40px; border: 1px solid black; position: absolute; top: 30px; left: 0; }
EDIT:
This is fixed by using z-index:-1; on .attention as answered. However, my actual problem was that I had a transparent red background which fooled me, if anyone runs into the same problem.
Just give it a z-index of -1.
Here's the fiddle: http://jsfiddle.net/PY9ss/2/
Does .attention { z-index: -1 } do what you want?
http://jsfiddle.net/thirtydot/PY9ss/3/