mardi 21 juin 2016

How do I fix a div from going on the right of my other divs

So I am coding a website and I have three divs side by side. Now I want to add text underneath these three divs and they just go on the right side of them. I don't know if it is because of float or something. Please help me figure out why this is happening.

HTML:

        <div class="wed">
        <span style="color: #5a5a5a; font-size: 30px;">
            <h2>What Do We Provide</h2>
            <div class="spacer"></div>
        </span>
        <div class="img-three">
            <div class="img-left">
                <img src="../img/rocket.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>Lightning Speed</h3>
                <p>We make your custom software at <b>lightning</b> fast speeds. We <b>always meet your expectations.</b></p>
            </div>
            <div class="img-left">
                <img src="../img/key.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>DDos Protection</h3>
                <p><b>We block almost every ddos attact</b> to your software as possible. It is very hard to protect all of them.</p>
            </div>
            <div class="img-left">
                <img src="../img/disk.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>Hosting</h3>
                <p>We host your software if needed. This is not free, but we do give the option.</p>
            </div>
        </div>
    </div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="order-now">
        <h2>What are you waiting for?</h2>
        <div class="spacer"></div>     
        <a href="#order" class="btn btn-red">Order Now!</a>
    </div>

Css Code:

.wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
position: absolute;
float: left;
}
.img-three{
width: 100%;
margin: 0 auto;
}
.img-left{
margin-left: 10%;
float: left;
width: 20%;
margin-bottom: 10px;
}
.img-left p{
font-size: 15px;
color: #444;
}
.img-left h3{
font-size: 20px;
color: #444;
font-weight: bolder;
}
.order-now{
width: 100%;
margin: 0 auto;
position: absolute;
}

https://jsfiddle.net/1boc96cq/

Aucun commentaire:

Enregistrer un commentaire