Search code examples
htmlcssimagealignment

I can't align my div's next to eachother

I have 2 div's, that are within a div. Like in the code:

Html:

    <div class="main" style="clear: both;">
        <div class="text">
        /text is here
        </div>    
        <div class="sponsors">
            <img src="images/Sponsors/asfalpan.png" alt="Asfalpan" width="285">
        </div>
    </div>

Css: 

.main {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    background-color:#232021;
    border-radius: 50px;
}
.text {
    width: 700px;
    padding-left:10px;
    padding-top: 20px;
    padding-bottom: 20px;
    position:relative;
    font-family: Gisha;
    color: white;
    font-size:14px;
 }
.sponsors {
    margin-left: 710px;
    margin-top: 20px;
    position: relative;
    font-family: Gisha;
    color: white;
    font-size: 14px;
    background-color: #E5173E;
}

So I want the .sponsors and .text to be next to each other in .main but for some reason, this doesn't happen. they appear under eachother. How can I solve this?

Solution

  • Add float:left; and perhaps a width, to each of them

    DEMO

    Learn more here....

    http://css-tricks.com/all-about-floats/