I made footer, using absolute element, I created 3 group of links, that lay on top of each other.
my problem is when screen size is going down they mess up and the right side group is gone.
I am trying to use flex...
I did the same thing with the rest of the main page and it worked.
freecodewiki.com is the page if you want to see it.
I also tried float method but it is even worse.
* {
box-sizing: border-box;
}
#footer {
display: flex;
width: 100%;
flex-flow: row wrap;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
text-align: center;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
transition: all 0.9s;
left: 0;
bottom: 0;
width: relative;
}
.footer {
height: relative;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
}
.footer p {
text-align: center;
position: relative;
}
.footer a {
display: block;
padding-left: 350px;
position: relative;
}
.webdeveloper {
color: black;
}
.footerbox2 a {
position: relative;
}
.footerbox1 a {
position: relative;
}
.footerbox3 a {
position: relative;
}
.footerbox2 h3 {
padding-left: 350px;
position: relative;
}
.footerbox1 h3 {
padding-left: 350px;
position: relative;
}
.footerbox3 h3 {
position: relative;
padding-left: 350px;
}
.footerbox {
display: flex;
align-items: center;
padding-top: 20px;
}
.hr2 {
border-top: 0.1px #d8e3f5
}
<div class="footer">
<hr>
<footer>
<p>FreeCodeWiki.com © 2020, all right reserved </p>
<div class="footerbox">
<div class="footerbox1">
<h3>Learn programming</h3>
how to collection
learn html free
learn Javascript free
learn Python free
</div>
<div class="footerbox2">
<h3>About</h3>
Contact us
Report bug
About us
Check our live code editor
</div>
<div class="footerbox3">
<h3>Web development courses</h3>
Create buttons
Create sidebar menu
HTML Editors
Learn javascript concepts
</div>
</div>
<br>
</footer>
</div>
Welcome to SO!
You are using wrong approach like padding to create
space between item due to which layout messed up I updated the code
below Using margin on child elements please have a look
* {
box-sizing: border-box;
}
#footer {
display: flex;
width: 100%;
flex-flow: row wrap;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
text-align: center;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
transition: all 0.9s;
left: 0;
bottom: 0;
width: relative;
}
.footer {
height: relative;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
}
.footer p {
text-align: center;
position: relative;
}
.footer a {
display: block;
position: relative;
}
.webdeveloper {
color: black;
}
.footerbox2 a {
position: relative;
}
.footerbox1 a {
position: relative;
}
.footerbox3 a {
position: relative;
}
.footerbox2 h3 {
position: relative;
}
.footerbox1 h3 {
position: relative;
}
.footerbox3 h3 {
position: relative;
}
.footerbox {
display: flex;
align-items: center;
padding-top: 20px;
}
.footerbox > div {
flex:1 1 auto;
text-align:center;
margin:5px;
}
.hr2 {
border-top: 0.1px #d8e3f5
}
<div class="footer">
<hr>
<footer>
<p>FreeCodeWiki.com © 2020, all right reserved </p>
<div class="footerbox">
<div class="footerbox1">
<h3>Learn programming</h3>
how to collection
learn html free
learn Javascript free
learn Python free
</div>
<div class="footerbox2">
<h3>About</h3>
Contact us
Report bug
About us
Check our live code editor
</div>
<div class="footerbox3">
<h3>Web development courses</h3>
Create buttons
Create sidebar menu
HTML Editors
Learn javascript concepts
</div>
</div>
<br>
</footer>
</div>
Use bootstrap grid and remove padding-left: 350px from css
* {
box-sizing: border-box;
}
#footer {
display: flex;
width: 100%;
flex-flow: row wrap;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
text-align: center;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
transition: all 0.9s;
left: 0;
bottom: 0;
width: relative;
}
.footer {
height: relative;
background: linear-gradient(to bottom, #3781a4 0%, #4eb5e5 100%);
color: black;
}
.footer p {
text-align: center;
position: relative;
}
.footer a {
display: block;
// padding-left: 350px;
position: relative;
}
.webdeveloper {
color: black;
}
.footerbox2 a {
position: relative;
}
.footerbox1 a {
position: relative;
}
.footerbox3 a {
position: relative;
}
.footerbox2 h3 {
//padding-left: 350px;
position: relative;
}
.footerbox1 h3 {
// padding-left: 350px;
position: relative;
}
.footerbox3 h3 {
position: relative;
//padding-left: 350px;
}
.footerbox {
display: flex;
align-items: center;
padding-top: 20px;
}
.hr2 {
border-top: 0.1px #d8e3f5
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="footer container">
<hr>
<footer>
<p>FreeCodeWiki.com © 2020, all right reserved </p>
<div class="row">
<div class="footerbox1 col-sm-3">
<h3>Learn programming</h3>
how to collection
learn html free
learn Javascript free
learn Python free
</div>
<div class="footerbox2 col-sm-3">
<h3>About</h3>
Contact us
Report bug
About us
Check our live code editor
</div>
<div class="footerbox3 col-sm-3">
<h3>Web development courses</h3>
Create buttons
Create sidebar menu
HTML Editors
Learn javascript concepts
</div>
</div>
<br>
</footer>
</div>
Related
I'am beginner at frontend, and got some design-layout to train. Designer expects that on hover part of string or even letter will change color Example
I thought about CSS 'clip', but doubt
I change the snippet. Play with font-size.
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100vw;
height: 50vh;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-weight: bold;
font-family: sans-serif;
background-color: red;
}
.wrapper1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 50% 0 0);
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: inset(0 0 0 50%);
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="wrapper1">Hello World!</div>
<div class="wrapper2">Hello World!</div>
</div>
As G-Cyrillus has pointed out, background-clip with value text can be used, it will 'cut out' characters from the background.
In this simple snippet the background is half white, half black and the blue/white background is supplied in a pseudo before element.
Note that the property requires a -webkit- prefix in some browsers.
* {
margin: 0;
}
div::before {
background-image: linear-gradient(to right, blue 0 50%, white 50% 100%);
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
div {
position: relative;
width: 100vw;
height: 500px;
font-size: 50px;
text-align: center;
rmix-blend-mode: difference;
rcolor: white;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-image: linear-gradient(to right, white 0 50%, black 50% 100%);
}
<div>Hello how are you?</div>
So, Thanks for your help, A Haworth , G-Cyrillus! I think, I've found the solution. I experimented with background-clip:text, but in my case it was excess, but I used mix-blend-mode, thanks. I've found an article Taming Blend Modes: difference and exclusion, where explained filter:invert(1). Tried to show in snippet. When hover the cell part of title change color to white. But color of title and hovering background should be the same.My realized layout from designer
.block {
width: 100%;
height: 200px;
padding-top: 10px;
position: relative;
filter: invert(1);
}
h1 {
position: relative;
color: #091C91;
text-align:center;
font-size: 2rem;
z-index: 5;
mix-blend-mode:difference;
filter: invert(1);
}
.list {
display: flex;
justify-content: center;
border: 1px solid red;
height: 130px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.column {
color: white;
flex: 0 1 25%;
border: 1px solid black;
filter: invert(1);
}
.column:hover {
background: #091C91;
}
<div class="block">
<h1>Snippet for Inverting colores</h1>
<div class="list">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
</div>
</div>
I'd need to have two side-by-side Boxes, with background that is extended to full page width, but text content should be contained inside main container that is limited a specific size.
I tried the following HTML code:
<div class="wrapper">
<div class="container">
<section class="left">LEFT</section>
<section class="right">RIGHT</section>
</div>
</div>
and here the sCSS:
.wrapper {
background: lightgray;
padding-block: 10px;
overflow: hidden;
}
.container {
border: dotted 1px red;
display: flex;
max-width: 900px;
margin-inline: auto;
section {
padding-block: 100px;
border: solid 1px blue;
flex: 1;
position: relative;
isolation: isolate;
&.left {
background: green;
&:before {
content:"";
display: block;
background: green;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 500%;
z-index: -1;
}
}
&.right {
background: orange;
&:before {
content:"";
display: block;
background: orange;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 500%;
z-index: -1;
}
}
}
}
Here a working example. Have you any suggestion to have a better solution with almost the same result?
You could add an extra div inside your wrapper and use a linear gradient on it:
.wrapper {
background: lightgray;
padding-block: 10px;
overflow: hidden;
}
.background {
background: linear-gradient(to right, green, green 50%, orange 50%, orange 100%);
}
.container {
border: dotted 1px red;
display: flex;
max-width: 900px;
margin-inline: auto;
}
.column {
width: 50%;
}
<div class="wrapper">
<div class="background">
<div class="container">
<section class="column left">LEFT</section>
<section class="column right">RIGHT</section>
</div>
</div>
</div>
Could somebody explain why using display: flex; align: center; in the parent of this menu messes up the two absolutely positioned overlays in a child element?
Here's a fiddle where you can try it with and without align: center to get my meaning. (uncomment /* align: center; */ in .menu)
https://jsfiddle.net/Hastig/wmtr87gc/
body { background-color: gray;}
.menu {
display: flex;
justify-content: center;
/* align-items: center; */
width: 100%;
padding: 5px 0;
background-color: hsl(0, 0%, 30%);
}
.menu-item {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-size: 13px;
color: hsl(0, 0%, 70%);
}
.menu-item.progress {
background-color: gray;
}
.progress-bar {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 83%;
background-color: hsla(191, 58%, 46%, 1);
}
.progress-value {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: hsl(0, 0%, 90%);
}
<div class="menu">
<div class="menu-item">Stuff</div>
<div class="menu-item progress">
<div class="progress-bar"></div>
<div class="progress-value">83</div>
</div>
<div class="menu-item">Things</div>
</div>
Because the middle element contains only absolute elements so there is no in-flow content inside it to define its height. Then the default align-items is stretch so your element will get stretched by default and its height will be equal to its parent height BUT if you change the alignment the element will consider its content to define the height and since there no in-flow element it will have height:0 which means that the progress bar defined by top:0;bottom:0 will also have height 0.
To avoid this, keep at least one of the element not positoned (the one that contain the text) so that the middle element have some in-flow content and its height will be different from 0 whataver the alignment will be.
body {
background-color: gray;
}
.menu {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 5px 0;
background-color: hsl(0, 0%, 30%);
}
.menu-item {
position: relative;
z-index:0;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-size: 13px;
color: hsl(0, 0%, 70%);
}
.menu-item.progress {
background-color: gray;
}
.progress-bar {
position: absolute;
z-index:-1;
top: 0;
bottom: 0;
left: 0;
width: 83%;
background-color: hsla(191, 58%, 46%, 1);
}
.progress-value {
color: hsl(0, 0%, 90%);
}
<div class="menu">
<div class="menu-item">Stuff</div>
<div class="menu-item progress">
<div class="progress-bar"></div>
<div class="progress-value">83</div>
</div>
<div class="menu-item">Things</div>
</div>
I have implemented the Angular 2 progress spinner from the below link
https://github.com/angular/material2/tree/master/src/lib/progress-spinner
I would like to have it centered, however, the only way I can seem to get it to work is to remove the
display: block
from the CSS. However, this causes the spinner to appear huge on the page.
Any advice would be great.
just add margin rule:
<md-progress-spinner style="margin:0 auto;"
mode="indeterminate"></md-progress-spinner>
plunker: http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview
UPDATE
Just wanted to share and demonstrate 6 other general centering solutions
FLEX:
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
GRID:
.center {
display: grid;
place-items: center;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
LINE HEIGHT + TEXT ALIGN (will not work as desired for multiple lines, use white-space: nowrap; to ensure one line)
.center {
line-height: calc(100vh - 20px);
text-align: center;
}
/* +++++++ STYLES +++++++ */
.wrapper {
background: red;
white-space: nowrap;
}
.inner {
background: green;
color: white;
padding: 12px;
display: inline;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
USING ABSOLUTE, TOP, LEFT and TRANSFORM TRANSLATE
.center.wrapper {
position: relative;
}
.center .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
USING ABSOLUTE, TOP, LEFT, BOTTOM, RIGHT and MARGIN AUTO (mentioned by György Balássy). Note: inner div width needs to be set.
.center.wrapper {
position: relative;
}
.center .inner {
position: absolute;
inset: 0;
margin: auto;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
height: max-content;
width: max-content;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
Using TABLE
.center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* +++++++ STYLES +++++++ */
.wrapper {
height: calc(100vh - 20px);
width: calc(100vw - 20px);;
background: red;
}
.inner {
background: green;
color: white;
padding: 12px;
display: inline-block;
}
<div class="wrapper center">
<div class="inner">INNER CONTENT</div>
</div>
This CodePen helped me to create a page-centered spinner with Material Design in Angular 4: https://codepen.io/MattIn4D/pen/LiKFC
Component.html:
<div class="loading-indicator">
<mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
</div>
Component.css:
/* Absolute Center Spinner */
.loading-indicator {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading-indicator:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
The first answer doesn't work unless height is set in a parent element.
I fixed it using fxFlex
<div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
<mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
</div>
I am using angular 6 with material 2+ and used that CSS code:
.mat-spinner {
position: relative;
margin-left: 50%;
margin-right: 50%;
}
Source: Angular Wiki
For me, this worked the best:
Component:
<div class="center">
<mat-spinner> </mat-spinner>
</div>
Scss:
/** Can be used to center any element */
.center {
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
you can use with grid as well :
.wrapper {
display: grid;
place-content: center;
height: calc(100vh - 20px);
background: red;
}
how do I achieve this in CSS.
Currently I have tried everything I know but failed. My basic structure was like this.
<div>
<div class='pink-div'></div>
<div class='blue-cirle-div'>
<div> Some Text </div>
</div>
<div class='yellow-div'></div>
</div>
Thanks.
Here you go.
The HTML:
<div class="main">
<div class='pink-div'> </div>
<div class='blue-cirle-div'>
<div class="forsomeText">Some Text</div>
</div>
<div class='yellow-div'> </div>
</div>
The CSS:
.main{position:relative;}
.pink-div {
background: none repeat scroll 0 0 #feaec9;
height: 110px;
}
.yellow-div {
background: none repeat scroll 0 0 #b5e51d;
height: 110px;
}
.blue-cirle-div {
background: none repeat scroll 0 0 #3f47cc;
border-radius: 110px;
display: block;
height: 140px;
left: 50%;
margin: 0 auto;
position: absolute;
text-align: center;
top: 18%;
vertical-align: middle;
}
.forsomeText {
display: block;
margin: 0 auto;
padding: 60px 37px 37px;
text-align: center;
vertical-align: middle;
}
The live fiddle link:
WORKING DEMO
I hope this helps.
According to your tastes and needs, you may choose one of the 4 following templates:
#1 Center circle using position, top, bottom, left, right and margin properties
.main {
/* prepare .main to center .blue-circle */
position: relative;
}
.pink-div {
background-color: pink;
height: 100px;
}
.yellow-div {
background-color: yellow;
height: 100px;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* center .blue-circle inside .main */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* center .text-div inside .blue-circle using flexbox */
display: flex;
align-items: center;
justify-content: center;
}
<div class="main">
<div class="pink-div"></div>
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
<div class="yellow-div"></div>
</div>
#2 Center circle using position, top, left, margin-top and margin-left properties
.main {
height: 200px;
/* prepare .main to center .blue-circle */
position: relative;
}
.pink-div {
background-color: pink;
height: 50%;
}
.yellow-div {
background-color: yellow;
height: 50%;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* center .blue-circle inside .main */
position: absolute;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -70px;
/* center .text-div inside .blue-circle using display: table */
display: table;
}
.text-div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="main">
<div class="pink-div"></div>
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
<div class="yellow-div"></div>
</div>
#3 Center circle using position, top, left and transform properties
.main {
height: 200px;
/* prepare .main to center .blue-circle */
position: relative;
}
.pink-div {
background-color: pink;
height: 50%;
}
.yellow-div {
background-color: yellow;
height: 50%;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* center .blue-circle inside .main */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* center .text-div inside .blue-circle using display: table */
display: table;
}
.text-div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="main">
<div class="pink-div"></div>
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
<div class="yellow-div"></div>
</div>
#4 Center circle using Flexbox
Note that the following HTML snippet is different from the previous ones.
.main {
height: 200px;
background: linear-gradient(180deg, pink 50%, yellow 50%);
/* prepare .main to center .blue-circle */
display: flex;
align-items: center;
justify-content: center;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* prepare .blue-circle to center .text-div */
position: relative;
}
.text-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="main">
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
</div>
It depends on the rest of your page & layout, but basically you need a square element with border-radius:50%;
A rough example
.pink-div, .yellow-div {
width:100%;
height:100px;
background-color:#FEAEC9;
}
.yellow-div {
background-color:#B5E51D;
}
.blue-cirle-div {
text-align:center;
position:absolute;
left:150px;
top:60px;
line-height:100px;
height:100px;
width:100px;
border-radius:50%;
background-color:#3F47CC;
}
http://jsfiddle.net/9dhdd9ue/
Use one div with CSS gradient instead of two divs.
Also, I used display:table and display:table-cell for vertical align.
.parent{
height: 500px; /* some height */
background: #ff32e3; /* Old browsers */
background: -moz-linear-gradient(top, #ff32e3 0%, #ff32e3 50%, #ff32e3 50%, #ff32e3 50%, #9ddd77 50%, #9ddd77 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#9ddd77), color-stop(100%,#9ddd77)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff32e3', endColorstr='#9ddd77',GradientType=0 ); /* IE6-9 */
display:table;
width:100%;
}
.parent>div{
display:table-cell;
vertical-align:middle;
text-align:center;
width:100%;
}
.parent>div>span{
background:aqua;
border-radius: 50%;
padding: 50px;
}
<div class="parent">
<div>
<span>circle</span>
</div>
</div>
JSFiddle
Use Ultimate CSS Gradient Generator for gradients.
Here is the complete solution
HTML
<div class="wrapper">
<div class='pink-div'></div>
<div class='blue-cirle-div'>
</div>
<div class='yellow-div'></div>
</div>
CSS
.wrapper {
width:600px;
margin: 0 auto;
height:600px;
position:relative;
}
.pink-div {
width:600px;
height:300px;
background:pink;
float:left;
}
.yellow-div {
width:600px;
height:300px;
background:yellow;
float:left;
}
.blue-cirle-div {
width:300px;
height:300px;
border-radius:150px;
background:blue;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
}
Check the Demo