Need help with image alignment in HTML

HTML-CSS
1

Hello
I am making website in HTML. I just wanted personal information appear below image. How can i do it
Please reply fast

Here is my website

dddd
dddd1346Ă—528 60.3 KB

Here is source code of HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CV By Muhammad Umer</title>
    <style>



        .top_left img {
            margin: 4px;
            border-radius: 50%;
        }
        .top_right {
            float: right;
            margin-top: 0;
        }

        .row_personal .top_left_personal {
            align: none;
            margin-top: 90px;
        }


    </style>






</head>
<body>

<div class="container">
    <div class="row">
        <div class="top_left">
            <img src="umer.jpg" align="left"/>
        </div>
        <div class="top_right">
            <h1>Muhammad Umer</h1>

        </div>
    </div>
    <div class="row_personal">
        <div class="top_left_personal">
            <h2>Personal Information</h2>
            <p>End of Street No 5, Attock, Pakistan</p>
            <p>03441183699</p>
        </div>
        <div class="top_right">
            <p>mumer3056@gmail.com</p>
            <p>www.facebook.com/muhammadumer</p>
        </div>
    </div>
    <div class="row">
        <h2>Profile</h2>
        <p>To seek a suitable position in an organization where mutual respect and recognition are based on professionalism. In a challenging opportunity, not restricted to what I already know but where I can acquire new knowledge in system development and implementation, apply it to provide best solution and to achieve the best result.</p>
        <hr/>
    </div>
    <div class="row">
        <h2>Experience</h2>
        <div class="experience_android">
        <h4>08 months</h4>
        <div class="experience_right">
            <ul class="exp_one">
                <h4>Ezion Tech Attock(Software house)</h4>
                <li>Proven software development experience</li>
                <li>Proven android application development experience</li>
                <li>Experience with Android SDK</li>
                <li>Design, build and maintain high performance, reusable and reliable Java code</li>
                <li>Strong knowledge of android SDK, different versions of android and how to deal with different screen sizes</li>
            </ul>
        </div>
        </div>
        <div class="experience_chamber">
            <h4>01 year</h4>
            <div class="experience_right">
                <ul class="exp_one">
                    <h4>Attock Chamber of Commerce and Industries</h4>
                    <li>Maintaining office work files</li>
                    <li>Arranging meeting schedules</li>
                    <li>Doing work of Scretary General</li>

                </ul>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <h2>Education</h2>
        <div class="education_01">
            <h4>2007-2009</h4>
            <div class="education_right">
                <ul class="education_one">
                    <h4>S.S.C</h4>
                    <li>Fazaia Degree College F.6 RF Kamra</li>
                </ul>
            </div>
        </div>
        <div class="education_02">
            <h4>2009-2011</h4>
            <div class="education_right">
                <ul class="education_one">
                    <h4>H.S.S.C</h4>
                    <li>Fazaia Degree College M.R.F Kamra</li>
                </ul>
            </div>
        </div>
        <div class="education_03">
            <h4>2011-2015</h4>
            <div class="education_right">
                <ul class="education_one">
                    <h4>B.S.I.T</h4>
                    <li>Arid Agriculture University, Rawalpindi</li>
                </ul>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <h2>Positve Traits</h2>
        <ul>
            <li>Can adjust according to circumstances</li>
            <li>Believe on teamwork</li>
            <li>Always try to learn from previous mistakes</li>
            <li>Hardworking</li>
            <li>Determinent</li>

        </ul>
    </div>
    <hr/>
    <div class="row">
        <h2>Interests</h2>
        <div class="interest_buttons">
            <p>Hiking</p>
            <p>Camping</p>
            <p>Playing cricket</p>
            <p>Playing hockey</p>
            <p>Computer games</p>
        </div>
    </div>
    <hr/>


</div>

</body>
</html>
4

Hey man! First off linking your website in code pen would be helpful.
If you don’t know about code pen it’s awesome for front end work.


Second: simply putting the personal info in the same div as the photo will do that.
You then can style it to were and what you want it to look like.
@camperextraordinaire mentioned you don’t have bootstrap being referenced so that may be
your issue.
1 Like
5

I am not using bootstrap @camperextraordinaire. I just named the class as “row”.

6

I’d consider using bootstrap or straight CSS Grid or Flexbox. They make what you want to do much easier.

However taking off the floats should push the content down. Right now the floats are putting the content side by side.

1 Like
7

It seems I have found the solution. Thanks @Tirjasdyn