CODEWITHSUNDEEP
htmlcss
Intisar Ratul
Intisar Ratul

Reputation: 37

How to properly right-align text to apeear next to an image using HTML and CSS

Before I get down-voted or marked for similar questions, I searched on stack but needed clarification as I am a beginner with web design and have some issues fully understanding the lingo. For background, I am creating a profile page where the users picture is to the left of the screen and to the right of the picture should be a section of information containing scrollbars. I used a div and I got the scroll bars but its appearing directly underneath the image. I need it to be next to it. I tried using classes, padding,and margin to try to center it but I could not move the subsection or the div itself. Similar to this(http://blogs.bournemouth.ac.uk/research/files/2013/09/SPP1.jpg) but with the information appearing to the direct right of the image. Please forgive and spare me for this lengthy question but I hope I was clear enough in what I was asking. Thank You. This is My Code :

body {
  background-color: rgb(5, 113, 176);
  font-family: arial;
  font-size: 15px;
}

h1 {
  background-color: rgb(24, 48, 100);
  color: #009999;
  font-size: 2em;
}

h2 {
  background-color: rgb(24, 48, 100);
  color: #009999;
}

img {
  filter: grayscale(1);
  width: 150px;
}

.Scroll-Paragraph {
  border: blue 8px solid;
  width: 30%;
  padding: 8px;
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}
<h1>Marzuq Mir</h1>
<ul>
  Home|About Me|More
</ul>
<h1><b>Journey Through The Life of Marzuq</b></h1>
<img src="https://i.imgur.com/Tgqh5Hn.jpg?1" alt="A picture of Marzuq" />
<div class="Scroll Paragraph">
  <h2>All About Marzuq Mir</h2>


  <div class="Scroll-Paragraph">
    <p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games
      on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for
      my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement
      but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p>
  </div>
  <div class=:Scroll-Paragrah>
    <h2>
      My Favorite Foods to Eat
    </h2>
    <div class="Scroll-Paragrah">
      <UL>
        <br>
        <li>Steak</li>
        <br>
        <li>Mash Potatoes</li>
        <br>
        <li>Chicken</li>
      </UL>
    </div>

Upvotes: 1

Views: 83

Answers (3)

Hussain Abdullah
Hussain Abdullah

Reputation: 43

I have modified your code. I enclosed the img tag in div tag and used float:left property on it. Similarly for paragraph, I have used float:right. Then created an empty div with clear:both property, so that remaining page is not disturbed by floaters. Hope this code works.

<!DOCTYPE html>
<html>

    <head>
        <title>Marzuq's Bio</title>
    </head>

    <style type="text/css">
        body{
            background-color: rgb(5,113,176);
            font-family: arial;
            font-size: 15px;
        }
        h1{
            background-color: rgb(24,48,100);
            color: #009999;
            font-size: 2em;
        }
        h2{
            background-color: rgb(24,48,100);
            color:#009999;
        }
        img{
            filter: grayscale(1);
            width: 150px;
        }
        .Scroll-Paragraph {
            border:blue 8px solid;
            width:30%;
            padding: 8px;
            max-height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
        }
        .imgdiv{
            float:left;
        }
        .paragraph{
            float:right;
        }
    </style>

<body>
   <h1>Marzuq Mir</h1>
   <ul>
       Home|About Me|More
   </ul>
   <h1><b>Journey Through The Life of Marzuq</b></h1>
   <div class="imgdiv">        
       <img src="Marzuq2.jpg"alt="A picture of Marzuq"/>
   </div>
   <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
        <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
      <div class=:Scroll-Paragrah><h2>
              My Favorite Foods to Eat
          </h2>
          <div class="Scroll-Paragrah"><UL>
               <br><li>Steak</li>
               <br><li>Mash Potatoes</li>
               <br><li>Chicken</li>
          </div>
        </UL>
        <div style="clear:both;"></div>
    </body>
</html>

Upvotes: 0

xDrago
xDrago

Reputation: 2052

Are you looking for something liek this? ofcourse it would need some changes to fit a bit better but that would be a solution using flexbox

You could also consider using a css framework like bootstrap. There you can use a grid system and flexbox by using predefined css classes.

body{
    background-color: rgb(5,113,176);
    font-family: arial;
    font-size: 15px;
}
h1{
    background-color: rgb(24,48,100);
    color: #009999;
    font-size: 2em;
}
h2{
    background-color: rgb(24,48,100);
    color:#009999;
}
img{
    filter: grayscale(1);
    width: 300px;
    padding: 0px 25px;
}
.Scroll-Paragraph {
    border:blue 8px solid;
    width:30%;
    padding: 8px;
    max-height:100px;
    overflow-y:scroll;
    overflow-x:hidden;


}
.container {
display: flex;
}
.left-box {
  
}
.right-box {
  align-self: start
}
<h1>Marzuq Mir</h1>
<ul>
Home|About Me|More
</ul>
<h1><b>Journey Through The Life of Marzuq</b></h1>
<div class="container">
  <div class="left-box">
    <img src="https://images.pexels.com/photos/963486/pexels-photo-963486.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"alt="A picture of Marzuq"/>
  </div>
  <div class="right-box">
    <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
    <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
    <div class=:Scroll-Paragrah><h2>
    My Favorite Foods to Eat
    </h2>
    <div class="Scroll-Paragrah"></div>
  </div>
</div>

Upvotes: 0

Mario
Mario

Reputation: 285

Put both (the image and the Block) into another div. set the img inside that div to float:left

<!DOCTYPE html>
<html>

    <head>
        <title>Marzuq's Bio</title>
    </head>

    <style type="text/css">
        body{
            background-color: rgb(5,113,176);
            font-family: arial;
            font-size: 15px;
        }
        h1{
            background-color: rgb(24,48,100);
            color: #009999;
            font-size: 2em;
        }
        h2{
            background-color: rgb(24,48,100);
            color:#009999;
        }
        img{
            filter: grayscale(1);
            width: 150px;
        }
        .Scroll-Paragraph {
            border:blue 8px solid;
            width:30%;
            padding: 8px;
            max-height:100px;
            overflow-y:scroll;
            overflow-x:hidden;
        }
        .wrap-around img {
           float:left;
        }



    </style>

    <body>
        <h1>Marzuq Mir</h1>
        <ul>
            Home|About Me|More
        </ul>
        <h1><b>Journey Through The Life of Marzuq</b></h1>
        
        <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
        <div class="wrap-around">
                <img src="Marzuq2.jpg"alt="A picture of Marzuq"/>
                
                <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
            <div class=:Scroll-Paragrah><h2>
            My Favorite Foods to Eat
          </h2>
            <div class="Scroll-Paragrah"><UL>
                <br><li>Steak</li>
                <br><li>Mash Potatoes</li>
                <br><li>Chicken</li>
                </div>
            </UL>
            </div>
    </body>





</html>

Upvotes: 1

Related Questions