I have a 3 DIVs like this
<div class="green">
<div class="red">
<div>......</div>
<div class="yellow">......</div>
</div>
</div>
Using this structure, I want to have an output similar to this:
Green DIV have set to its width 100% and red DIV have a fixed width and set to center of the page. So my problem is I want to get my yellow DIV to red DIV having align to right of the red DIV.
.red {
position: relative;
}
.yellow {
position: absolute;
top: 0;
right: 20px;
}
But it’s not my desired output.
here is a fiddle, http://jsfiddle.net/P77RB/ you can play with the width and height to accommodate your needs.
<div class="green">
<div class="red">
<div class="yellow">
</div>
</div>
.green{
width:500px;
height:300px;
background:green;
display:table;
}
.red{
width:80%;
height:270px;
margin:30px auto 0px auto;
background:red;
position:relative;
}
.yellow{
position:absolute;
background:yellow;
width:200px;
height:100px;
right:0;
top:50%;
margin-top:-40px;
}
Have you tried this?
.yellow {
float: right;
position: relative;
}
You have to use right: 0;
.yellow {
position: absolute;
top: 0;
right: 0;
}
I have tested this DEMO
Adjust the height and width as per your page.
.red {
position: relative;
width: 60%;
margin-right: auto;
margin-left: auto;
height: 100%;
background: red;
}
.yellow {
position: absolute;
right: 0;
background: yellow;
top: 20;
height: 80%;
width: 60%;
}
.green {
width: 100%;
background: green;
padding-top: 20px;
height: 200px;
}
Just put the yellow div into the red div in HTML and then set it to float: right;
Related
This, this, and this question were similar but did not help.
The goal is to center an element under its parent using percentages, not absolute values. This way, position values do not need to change if sizes change.
The hover element below is centered under outer, but positioning requires absolute values that depend on the sizes of hover and outer. If either change, the position values must change.
Can centering underneath a parent be achieved with percentages?
Codepen: https://codepen.io/anon/pen/dadjpg
<div id="outer">
<div id="hover"></div>
</div>
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
margin: auto;
left: 75px;
bottom: -50px;
}
You can also use top:100%; left:0px; right:0px; margin:0px auto;
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:0px;
right:0px;
top:100%;
margin:0px auto;
}
<div id="outer">
<div id="hover"></div>
</div>
You can use top:100% to move the element to the bottom then simply combine left:50% with translateX(-50%) to center:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
left:50%;
transform:translateX(-50%);
top:100%;
}
<div id="outer">
<div id="hover"></div>
</div>
Same logic considering bottom:0
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
position: absolute;
bottom:0;
left:50%;
transform:translate(-50%,100%);
}
<div id="outer">
<div id="hover"></div>
</div>
Another idea is to consider flexbox to center inside the element then translate to make the element outside:
#outer {
width: 200px;
height: 200px;
background: blue;
position: relative;
display:flex;
}
#hover {
width: 50px;
height: 50px;
background: yellow;
margin:auto auto 0;
transform:translateY(100%);
}
<div id="outer">
<div id="hover"></div>
</div>
I have the following code:
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
top: 10%;
left: 0;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 0;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
My question is why is the top:10% of .p1_1 affecting the position of .p1_2? I would have thought this was a really simple relative placing of the div following the second - unless I'm missing something blindingly obvious?
Ok - so the following code is nearer what I was expecting but how there is 15% of space not 10% (i.e. set margin-top:15% works fine) so I'm confused how 70 + 10 + 20 can't equal 100??
html,body {
padding:0;
margin:0;
height:100%;
position:relative;
}
.container {
width:30%;
margin:0 35%;
background:yellow;
position:absolute;
height:100%;
top:0;
}
.p1_1 {
position:relative;
width:50%;
height:70%;
margin-top:10%;
background-color:green;
}
.p1_2 {
position:relative;
width:100%;
height:20%;
background-color:blue;
}
I've also found http://www.barelyfitz.com/screencast/html-training/css/positioning/ on tab 2 explains how
"Notice the space where div-1 normally would have been if we had not
moved it: now it is an empty space. The next element (div-after) did
not move when we moved div-1. That's because div-1 still occupies that
original space in the document, even though we have moved it."
Here is one way how to push 2 div's down by 10%, based on their parent's height, keeping them 70% and 20% of parent.
body {
padding: 0;
margin: 0;
}
.container {
width: 30%;
margin: 0 35%;
background: yellow;
position: relative;
height: 900px;
}
.p1_1 {
position: relative;
width: 50%;
height: 70%;
left: 0;
top: 10%;
background-color: green;
}
.p1_2 {
position: relative;
width: 100%;
height: 20%;
border: 1px solid blue;
top: 10%;
}
<div class="container">
<div class="p1_1">
top box
</div>
<div class="p1_2">
hello box
</div>
</div>
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
I am trying to create HTML page shown in this sample image.
I want to place other component on top of this black and maroon circles. For this I am using tag Structure of div and span. And using span background-image to apply this image as background.
My problem is what will be structure of div and span to arrange black circle on radius of div/span tags containing maroon circle as background.
Till now I have center circle placed. I don't know how to arrange other circles around it
div.table-text {
position: fixed;
top: 20%;
left: 20%
}
span.table-text {
position: inherit;
display: block;
width: 60%;
height: 60%;
background-image: url(../images/table-text.png);
background-position: bottom;
background-repeat: no-repeat;
}
<div class="table-text">
<span class="table-text">
</span>
</div>
Im not sure I understood the question, but I'll try to answer.
You can't use something like cos() to arrange elements on HTML, you will have to use negatives margin-top: or position: absolute;
My advise: use negative margins, for the black dots on the left and right.
Edit: I did your job, now pay me! #:
.circle {
display: inline-block;
border-radius: 200px;
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
#bigCircle {
border-radius: 200px;
width: 400px;
height: 400px;
margin: 0 auto;
background-color: brown;
}
#bottom {
margin: 50px calc(50% - 50px);
}
#left {
margin: -50px calc(25% - 50px);
}
#right {
margin: -50px calc(75% - 50px);
}
<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>
JSFiddle - DEMO
Without knowing the rest of your document structure, I've thrown together this proof of concept for you using absolute positioning which should, hopefully, point you in the right direction.
If you need clarification on anything or any of it doesn't suit your needs, please let me know and I'll attempt to update it accordingly.
*{
box-sizing:border-box;
color:#fff;
font-family:sans-serif;
}
.top{
background:red;
border-radius:50%;
margin:-10% auto 0;
padding:0 0 75%;
position:relative;
width:75%;
}
div>div{
background:green;
border-radius:50%;
overflow:hidden;
padding:0 0 20%;
position:absolute;
width:20%;
}
div.one{
left:-10%;
top:80%;
}
div.two{
left:40%;
top:103%;
}
div.three{
right:-10%;
top:80%;
}
p{
text-align:center;
position:absolute;
margin:0;
width:100%;
}
.top>p{
top:15%
}
.top>div>p{
top:5%;
}
<div class="top">
<p>top</p>
<div class="one">
<p>one</p>
</div>
<div class="two">
<p>two</p>
</div>
<div class="three">
<p>three</p>
</div>
</div>
I think you want like here
for responsive you can use value in percentages or max-width.
<div class="maroon">
<div class="m-child m-child1"></div>
<div class="m-child m-child2"></div>
<div class="m-child m-child3"></div>
<div class="m-child m-child4"></div>
</div>
.maroon{
max-width: 300px;
max-height:300px;
background:maroon;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.m-child, .maroon{
position: absolute;
border-radius:100%;
}
.m-child{
background: #000;
width:100px;
height:100px;
}
.m-child1{
left: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child2{
right: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child3{
top: -50px;
left: 0;
right:0;
margin: auto;
}
.m-child4{
bottom: -50px;
left: 0;
right:0;
margin: auto;
}
I think you need something like following: You can make changes as per your requirement.
.middle_circle {
background: none repeat scroll 0 0 red;
border-radius: 100%;
height: 200px;
left: 220px;
position: absolute;
top: 60px;
width: 200px;
}
.circle{
position:relative;
width:5%;padding-bottom:50%;
margin-left:47.5%;
}
.circle div {
position:absolute;
top:0; left:0;
width:100%; height:100%;
-webkit-transform : rotate(24deg);
-ms-transform : rotate(24deg);
transform : rotate(24deg);
}
.circle:before, .circle div:before {
content:'';
position:absolute;
top:0; left:0;
width:100%; padding-bottom:100%;
border-radius: 100%; background:black;
}
<div class="circle">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
<div class="middle_circle"></div>
Check Fiddle.
This is the image I have:
How do I centre the black circle, I have tried a number of ways, best has been using absolute, but i cannot make it responsive.
Its on JSFIDDLE
And here is the code:
HTML
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
</div>
CSS
.main {
position:relative;
width:100%;
height:100%;
}
.rightTop {
float:right;
background-color:red;
min-width:50%;
height:250px;
}
.leftTop {
float:left;
background-color:blue;
min-width:50%;
max-width:50%;
height:250px;
}
.rightBottom {
float:right;
background-color:yellow;
min-width:50%;
height:250px;
}
.leftBottom {
float:left;
background-color:orange;
min-width:50%;
max-width:50%;
height:250px;
}
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
As I have said above, I have managed to centre it using LEFT, TOP but it is not responsive. Also it's not 50% as I would expect.
Any ideas what it is i am doing incorrectly ?
You could use positioning for this (getting rid of those inefficient and horrible float elements), in combination with the calc css3 property.
You may also be interested in using vw units, in which I have used to make the circle responsive to the width of the screen:
html,
body {
margin: 0;
padding: 0;
}
.wrap {
margin: 5vw;
height: 80vh;
width: 90vw;
display: inline-block;
position: relative;
}
.wrap div {
position: absolute;
height: 50%;
width: 50%;
}
.wrap .red {
background: tomato;
top: 0;
left: 0;
}
.wrap .yellow {
background: yellow;
top: 0;
left: 50%;
}
.wrap .green {
background: lime;
top: 50%;
left: 0;
}
.wrap .blue {
background: cornflowerblue;
top: 50%;
left: 50%;
}
.wrap .black {
background: black;
height: 20vw;
width: 20vw;
border-radius: 50%;
top: -webkit-calc(50% - 10vw);
top: calc(50% - 10vw);
left: -webkit-calc(50% - 10vw);
left: calc(50% - 10vw);
}
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="black"></div>
</div>
just add margin-left:-200px; in
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
margin-left:-200px;
}
here is the updated fiddle file
DEMO
Added:
top: 50%;, and left: 50%; to make it displayed relative to its parent: .main { position: relative
Added transform: translate(-50%, -50%) to center it. To center it on its own center point :D
You should be clearing the floats in your main container.
To do so add this to the main element:
<div class="main">
<div class="center"></div>
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBottom"></div>
<div class="rightBottom"></div>
<div class="clearfix"></div>
</div>
<style>
/* Add this to your CSS */
.clearfix{
clear:both;
}
</style>
This will make the main container expand to the height of those floaters. After that you can use:
.center{
margin-top:-200px;
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
}
**OR**
.center {
position:absolute;
left: 50%;
top: 50%;
height:400px;
background-color:black;
width:400px;
border-radius:50%;
transform:translate(-50%,-50%); /* This property doens't rely on pixels of the element, so the element can also be defined in percentages */
-webkit-transform:translate(-50%,-50%);
}
Add this css in your code:
.center {
background-color: #000000;
border-radius: 50%;
height: 400px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
top: 50%;
width: 400px;
}
See demo http://jsfiddle.net/JentiDabhi/gnhwork9/1/