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

Question

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/

Answer 1

Erase these position: absolute settings and add clear: both to .order-now

https://jsfiddle.net/ovf8pdhm/1/

Answer 2

Is this what you have asking for ? You cant have position:absolute and float:left, it doesn't make sense. Float left doesn't work then

[Here updated fiddle][1]


  [1]: https://jsfiddle.net/jovanpoplasen/1boc96cq/1/

Answer 3

This is what I see on my screen.

If I read your question correctly this is what you wanted, right?

If you want the What are you waiting for? and Order Now! thing to go below the divs, remove both float left and position:absolute.

 .wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
/*position: absolute;*/
/*float: left;*/
}

Answer 4

1. change all position: absolute to position: relative
2. add a .spacer CSS definition (set height to expected result)

here's a fiddle

.wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
position: relative;
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: relative;
}
.spacer{
  clear: both;
  height: 50px;
}

<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>

Answer 5

You have float:left and position:absolute on the div.wed I think the position absolute is unnecessary.

If you are using float:left for layout you need to clear your floats.

I used Nicholas Gallagher'a microclearfix: http://nicolasgallagher.com/micro-clearfix-hack/

.cf:before,
.cf:after {
   content: " "; /* 1 */
   display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 .cf {
   *zoom: 1;
  }

Here's a pen : http://codepen.io/NeilWkz/pen/rLMpgZ

Answer 6

Remove position: absolute; on .wed class. See the code below:-

.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;
}