How to get picture to align with the left set of paragraphs/go to right of?

0

Issue

Here is a prototype of what I am trying to implement
enter image description here

Here is what I currently have : JsFiddle
enter image description here

I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components – Business Traveller, Office Supply Purchases, etc…

What I’ve tried is using Align attribute, changing my img src code to

<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />

but that didn’t have any effect.
I also tried Float but that messed up my margins and the organization of my left components.

Is there a way I can do this without floating?

Solution

See the fiddle

The HTML and CSS that i’ve used is as follows. Used float:left

HTML

<div class="container">
    <div id="choices">
        <p class="choice">Business Traveller</p>
        <p class="choice">Office Supply Purchases</p>
        <p class="choice">Stay at home parent</p>
        <p class="choice">Entertainment</p>
        <p class="choice">Profile 6</p>
    </div>
    <div class="image"></div>
</div>

CSS

html, body, .container {
    height:100%;
}
#choices {
    width:30%;
    float:left;
}
.choice {
    margin-top:0px;
    margin-left:20px;
    text-align:center;
    width:100%;
    background-image: url("https://i.imgur.com/H43sVoi.png");
    padding-top:15px;
    padding-bottom:15px;
}
.image {
    height:100%;
    width:65%;
    background-color:red;
    float:left;
}

You will have to work with the height and width of each divs. I just made it roughly.

Answered By – Lal

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More