Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Thanked 0 Times in 0 Posts

    Move the Div individually?

    Hi to all,

    I want to achive below image...

    Below code is output for following image...

    when i try to move one div, another div is moving simultaneously... how to move individually?

    <style type="text/css">
    #circle { width: 150px; height: 150px; background: #000; -moz-border-radius: 75px; -webkit-border-radius: 75px; border-radius: 100px; margin-top:198px; }
    #circle1 { width: 50px; height: 50px; background: red; -moz-border-radius: 25px; -webkit-border-radius:25px; border-radius: 50px; margin-right:2px;}
      <div id="circle">
      <div id="circle1"></div>

  2. #2
    Registered User
    Join Date
    Jun 2011
    Thanked 241 Times in 240 Posts
    Remember that border-radius isn't supported in all browsers (IE): http://caniuse.com/border-radius.

    As you can see, I used border-radius: 100% for the circle and set it to a class .circle, since you are probably going to use it again.

    <!DOCTYPE html>
    			body {
    				width: 150px;
    				margin: 60px auto;
    			.circle:before {
    				-webkit-border-radius: 100%;
    				   -moz-border-radius: 100%;
    				        border-radius: 100%;
    			.circle {
    				position: relative;
    			.circle:before {
    				position: absolute;
    				content: "";
    				-webkit-box-sizing: border-box;
    				   -moz-box-sizing: border-box;
    				    -ms-box-sizing: border-box;
    				        box-sizing: border-box;
    			#circles {
    				width: 150px; height: 150px;
    				background: #000;
    			#circles:before {
    				top: -20px; left: -20px;
    				width: 50px; height: 50px;
    				border: 5px solid #000;
    				background: red;
    		<div id="circles" class="circle"></div>
    If these are vital to the page, you may want to consider using PIE .htc: http://css3pie.com/ which adds full support to IE.
    Last edited by Sammy12; 10-01-2012 at 04:35 AM.

  3. Users who have thanked Sammy12 for this post:

    formdev1 (10-01-2012)


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts