CODEWITHSUNDEEP
csshtmlspacing
user1944305
user1944305

Reputation: 153

Floating 3 divs within a container div

I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.

CSS:

#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}

.circle{width:200px;height:200px;border-radius:100px; 
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8); 
margin:auto; display:inline-block; vertical-align:middle;
 }

enter image description here

Thanks in advance

Upvotes: 0

Views: 1506

Answers (2)

Fabian Lauer
Fabian Lauer

Reputation: 511

What Mr.Alien said isn't wrong, but

I'm having difficulty keeping them evenly spread apart

If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:

.container {
    width: 300px;
    height: 100px;
}

.container div {
    width: 25%;
    height: 100%;
    background: blue;
    border-radius: 100%;
}

.inner-left {
    float: left;
}

.inner-middle {
    float: none;
    margin: auto;
}

.inner-right{
    float: right;
    position: relative;
    bottom: 100%;
}

See the jsfiddle.

EDIT: updated fiddle - didn't save...

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157384

Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.

Demo

<div class="wrap_me">
    <div></div>
</div>
<div class="wrap_me">
    <div></div>
</div>
<div class="wrap_me">
    <div></div>
</div>

CSS

.wrap_me {
    width: 33%;
    border: 1px solid #f00;
    float: left;
}

.wrap_me div {
    width: 150px;
    height: 150px;
    border-radius: 100px;
    border: 1px solid #ddd;
    margin: auto;
}

You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width

Upvotes: 2

Related Questions