CODEWITHSUNDEEP
htmlcss
user3750069
user3750069

Reputation: 15

I can't get a div next to another

I want to class="contactvlak" to get next to class="middentextvak", I've tried a lot of things like changing positions etc. but it doesn't seem to work at all. I'm sorry if this sounds like a really stupid question.

<div class="midden">
    <img class="logo" src="images/logo.png">
    <div class="middentextvak">
        <h1>Welkom bij autorijschool NRV! </h1>
        <p>In Veldhoven en omgevingen verzorgen wij uw complete rijopleiding in onze volkswagen.
            <br>Een rijopleiding met oog voor detail. U en uw behoefte staan hierbij steeds centraal.
            <br>Onze ervaren instructeur geeft u een moderne rijopleiding geheel afgestemd op uw aanvangsniveau. Zo ben u altijd verzekerd van het zo mogelijk behalen van uw rijbewijs tegen een zo laag mogelijke prijs.
            <br>
            <br>
            Klik <a href="http://www.rijschoolgegevens.nl/index.asp?pageid=2&examenplaats=75&rijschoolid=5285&fromsearch=1">hier</a> voor de meest recente slagingspercentage.
        </p>
    </div>
    <div class="contactvlak"></div> 
</div>

css:

.midden
{
    clear:both;
    width: 100%;
    height: 400px;

}
.middentextvak
{

    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 43%;
    height: 50%;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 7%;

}

.contactvlak
{
    width: 100px;
    height: 100px;
    background: white;

}

.middentextvak h1
{
    padding-top: 2%;
    padding-left: 5%;
    font-family:Arial;
    color: #0671ca;
    font-size: 23px;
}

.middentextvak p
{
    padding-left: 5%;
    font-family:Arial;
    margin-top: -2%;
}
.logo
{
    position: absolute;
    display: block;
    margin-left: 15%;
    margin-right: auto;
    width:70%;
    z-index: 0;
    opacity:0.5;
    clear: both;
}

Jfiddle: http://jsfiddle.net/H5LmF/9/

Edit: Sorry posted the wrong fiddle!

Upvotes: 0

Views: 54

Answers (2)

Ansuraj Khadanga
Ansuraj Khadanga

Reputation: 128

The classes middentextvak and contactvlak are the children of class midden. Right?

So add display: inline; position: relative properties to the midden class and you will get the two divs side by side.

Upvotes: 0

j08691
j08691

Reputation: 207861

Add position:relative to .midden, and position:absolute and top:0 to .contactvlak.

jsFiddle example

Upvotes: 1

Related Questions