CODEWITHSUNDEEP
htmlcss
Amy
Amy

Reputation: 946

Unable to produce padding between divs using css circles

UPDATE

Arnab Chatterjee, Vikram, sbeliv01 were all correct. Another thing I did wrong was positioning the icon text with top rather than margin-top. Luke pointed out that using top positioned it outside the container.

I have a set of divs that contain a circle drawn by CSS. The divs automatically realign themselves depending on the width of the browser (I'm using the mix it up library). However the text I've written underneath the Circles overlap the circles beneath them when aligned on top of each other. I attempted to add padding to the circles but that just managed to make the circles bigger. Is there a way I can add padding to each of these divs so they do not overlap themselves when positioned on top of each other?

Here is my attempt below

https://jsfiddle.net/p5moyg6g/2/

HTML

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="mix iconcircle"><div class="icontext">Icon 1</div></div>
        <div class="mix iconcircle"><div class="icontext">Icon 2</div></div>
        <div class="mix iconcircle"><div class="icontext">Icon 3</div></div>
        <div class="mix iconcircle"><div class="icontext">Icon 4</div></div>

    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.container').mixItUp();
        });
    </script>
</body>

CSS

body{
   background:black;
}

.container{
   padding:50px;
}
.container:after{
   content: '';
   display: inline-block;
   width: 100%;
   padding-bottom:50px;
}
.mix{
   color:white;

}

.iconcircle{
   background-color: rgba(204, 0,102,0);
   border: 4px solid #FFF;
   height: 180px;
   width: 180px;
   border-radius: 50%;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
}

.icontext{
   position:relative;
   width:180px;
   text-align:center;
   top:200px;

}

Upvotes: 0

Views: 619

Answers (3)

sbeliv01
sbeliv01

Reputation: 11820

Just add margin-bottom to the .iconcircle class to add some spacing between the circles.

https://jsfiddle.net/p5moyg6g/4/

.iconcircle{
    background-color: rgba(204, 0,102,0);
    border: 4px solid #FFF;
    height: 180px;
    width: 180px;
    margin-bottom: 4em;
    border-radius: 50%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

Upvotes: 1

Vikram
Vikram

Reputation: 3351

You should use margin/margin-bottom as padding is space between border and content. and in your case you are using border and border-radius to make it circular which means whatever you use in padding you are just expanding you boundaries not spacing between elements

you should use following instead 

.iconcircle{
    background-color: rgba(204, 0,102,0);
    border: 4px solid #FFF;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    margin-bottom : 15px;
}

Upvotes: 1

arnabkaycee
arnabkaycee

Reputation: 1644

Just add the class:

    .mix.iconcircle {
        margin-bottom: 20px;
    }

Upvotes: 1

Related Questions