CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anona
Anona

Reputation: 253

How to put a image div right next to a text div?

I'm trying to make the GTA Online Tips loading screen in HTML.

This is what I'm trying to make - http://prntscr.com/6n7txe This is what I have - http://prntscr.com/6n7w92

The problem im focusing on right now is to get the 2 dives rightnext to each other with the right width and height.

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>GTA ONLINE</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>

<div class="column">
    <div class="text">
        <p class="top">GTA Online</p>
        <p class="middle">First Person Mode</p>
        <p class="bottom">Lorem ipsum dolor sit amet, consectetu adipiscing elit. Maecenas sodales, velit sed dictum fermentum, ligula nunc  sodales magna, at convallis. </p>
    </div>
    <div class="picture">
        <img src="pics/Trevor.jpg"
    </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS:

body{
    background-image: url("../pics/background_1.jpg");
    background-size: cover;
}

.column {
    white-space: nowrap;
}

.column .picture img {
    width: 25%;
    height: 25%;
    vertical-align: middle;
    float: right;
}

.column .text {
    background:rgba(0,0,0,1);
    display: inline-block;
    vertical-align: top;
    float: left;
    width:50%;
}

.column .text p{
    color:rgba(255,255,255,1);
    width:50%;
}

Upvotes: 0

Views: 2176

Answers (4)

Latha
Latha

Reputation: 91

body{
    background-image: url("../pics/background_1.jpg");
    background-size: cover;
}

.column {
width:100%;/* you can give 1000px also */
    white-space: nowrap;
}

.column .picture img {
    width: 50%;
    height:auto;
    vertical-align: middle;
    float: left;
}

.column .text {
    background:rgba(0,0,0,1);
    display: inline-block;
    vertical-align: top;
    float: left;
    width:50%;
}

.column .text p{
    color:rgba(255,255,255,1);
    width:100%;
}

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

omit float:right and float:left but add display:inline-block to both divs.

    body{
        background-image: url("../pics/background_1.jpg");
        background-size: cover;
    }

    .column {
        white-space: nowrap;
    }

    .column .picture img {
        width: 25%;
        height: 25%;
        vertical-align: middle;
        vertical-align: middle;
        float: right;

    }

   /* new style start*/
    .column .picture {
    display:inline-block;
    }
   /* also set width to this div 
      otherwise it takes 100% and won't 
      stay inline with other elements.
      new style end */ 

    .column .text {
        background:rgba(0,0,0,1);
        display: inline-block;
        vertical-align: top;
        width:50%;
    }

    .column .text p{
        color:rgba(255,255,255,1);
        width:50%;
    }

Upvotes: 3

Latha
Latha

Reputation: 91

.column{float:left;width:100%;}
.text{float:left;width:48%;margin-right:2%;}
.picture{float:left;width:50%;}

Upvotes: 2

Tade&#225;š Pet&#225;k
Tade&#225;š Pet&#225;k

Reputation: 567

First of all, you have a few unclosed elements in your HTML - the first <div> in the body has no matching closing complement </div> and the img with Trevor is missing the ending bracket >. (It is also missing a required atrribute alt so ideally, it should look something like <img src="pics/Trevor.jpg" alt="Trevor" />.

Now to the point. It is rather simple, both divs need to be floated to the left, so in your .column .picture img, just replace float: right; with float:left, that will do it.

Upvotes: 1

Related Questions