Can't Align div(with image inside only) and div(with text)

Question

What i want is that my pic be aligned with my skills list, skills on the left, pic on the right.

So what i have done is, put the list and the pic inside separate "div". Used the "display: inline-block;" property in the CSS.

Note, both the div's have "width: 50%;"

    .divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
    }

    #imag {
        width: 100%;
        height: auto;
    }

    <div id="top" class="divIN">
        <div class="both">
            <h1>Present Skills</h1>
            <ul>
                <li>C/C++</li>
                <li>Python</li>
                <li>HTML(CSS, Bootstrap)</li>
                <li>Java(Not Right Away!)</li>
            </ul>
        </div>
        <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
        </div>
    </div>

You need to surround both the list and the image in only 1 div, not two. — notphilphil, Aug 06 '17 at 11:14

Alvaro Menéndez · Answer 1 · 2017-08-06T12:20:40.653

When You use display:inline-blockthere's always a small space between elements. Basically it is the space between characters the browser adds. there's many tricks you can find in stackoverflow to avoid this if the use of inline-block is imperative like add a small margin left to second div, the use of font-size:0; or even a hack adding a return on the div tag in the html as the example below.

the easy way should be the use of float insteed of inline-block

.divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
    }

    #imag {
        width: 100%;
        height: auto;
    }

<div id="top" class="divIN">
        <div class="both">
            <h1>Present Skills</h1>
            <ul>
                <li>C/C++</li>
                <li>Python</li>
                <li>HTML(CSS, Bootstrap)</li>
                <li>Java(Not Right Away!)</li>
            </ul>
        </div
        ><div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
        </div>
    </div>

How to remove the space between inline-block elements?

score 0 · Accepted Answer · answered Aug 06 '17 at 11:15

you can just add float:left to both divs

    .divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
        float:left;
    }

    #imag {
        width: 100%;
        height: auto;
    }

    <div id="top" class="divIN">
        <div class="both">
            <h1>Present Skills</h1>
            <ul>
                <li>C/C++</li>
                <li>Python</li>
                <li>HTML(CSS, Bootstrap)</li>
                <li>Java(Not Right Away!)</li>
            </ul>
        </div>
        <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
        </div>
    </div>

Thank you very much,it worked, but can you offer an explanation of what happened after i added "float: left;" — Vishwad, Aug 06 '17 at 11:18

score 0 · Answer 3 · answered Aug 06 '17 at 11:37

You can use float along with dividing the screen into two halfs and later on customize it based on your requirement.

   .divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
        float: left;
    }

    #imag {
        width: 80%;
        height: auto;

    }

  <div id="top" class="divIN">
            <div class="both" style="width:50%">
                <h1>Present Skills</h1>
                <ul>
                    <li>C/C++</li>
                    <li>Python</li>
                    <li>HTML(CSS, Bootstrap)</li>
                    <li>Java(Not Right Away!)</li>
                </ul>
 </div>
            <div class="both" style="width:50%"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
            </div>
        </div>

score 0 · Answer 4 · answered Aug 06 '17 at 11:58

You can use also flex layout.

.divIN 
{    
  margin: 25px 0px 25px 0px;
  display:flex;
}

    .both { 
        flex:1;
    }

    #imag {
        width: 100%;
        height: auto;
    }

<div id="top" class="divIN">
        <div class="both">
            <h1>Present Skills</h1>
            <ul>
                <li>C/C++</li>
                <li>Python</li>
                <li>HTML(CSS, Bootstrap)</li>
                <li>Java(Not Right Away!)</li>
            </ul>
        </div>
        <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
        </div>
</div>

Can't Align div(with image inside only) and div(with text)

4 Answers4