CODEWITHSUNDEEP
htmlcssalignment
shubhamj
shubhamj

Reputation: 938

html css align text such that text is always on right of the image not below it

html css align text such that text is always on right of the image not below it.Thanks for the help!Css for img1 is down below.

enter image description here

  <img id="img1" src="../images/1.jpg">
 <div style="box-shadow: 0 0 15px #666;">
 <p style="text-align: justify;height: auto;min-height: 280px;font-  family: sans-serif,monospace;padding:10px;padding: 10px;box-shadow: 0 0 15px #666;font-size: 20px;color: #000;">
   <br>A photovoltaic system for residential, commercial, or industrial energy supply consists of the solar array and a number of components often summarized as the&nbsp;balance of system&nbsp;(BOS). The term originates from the fact that some BOS-components are balancing the power-generating subsystem of the solar array with the power-using side, the load. BOS-components include:<br>
    Power-conditioning equipment and 
    Structures for mounting, 
    Typically one or more DC to&nbsp;AC&nbsp;power converters, also    known    as&nbsp;inverters,
   An energy storage device, 
   A racking system that supports the solar array, 
   Electrical wiring and interconnections, 
   Electrical protection devices and 
   Mounting for other components.

   Optionally, a balance of system may include any or all of the    following:&nbsp;
   renewable energy credit&nbsp;revenue-grade meter,&nbsp;  
    maximum power point tracker&nbsp;(MPPT),&nbsp;
   battery&nbsp;system and&nbsp;charger,&nbsp;
    GPS&nbsp;solar tracker,&nbsp;
    energy management software,&nbsp;
    solar irradiance&nbsp;sensors,&nbsp;
    anemometer, or 
    task-specific accessories 

    designed to meet specialized requirements for a system owner</p>


 #img1 {
box-shadow: 10px 10px 50px #333;
float: left;
height: 280px;
margin: 0 20px 20px 0;
max-width: 300px;
width: 240px;

}

Upvotes: 0

Views: 136

Answers (2)

Anand
Anand

Reputation: 13

Use the css float property for the image and set the value as 'left'. For example:

image{
       float:left;
}

Now the text will flow around the image like how you showed in the image.

Upvotes: 0

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

You can use flex property for this, or you can set width for image container and text container(and of course, float property):

.main-container {
  display: flex;
}
p {
  margin-top: 0;
  margin-left: 10px;
}
<div style="box-shadow: 0 0 15px #666;" class="main-container">
<div class="image">
  <img src="data:image/jpeg;base64,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" alt="" >
</div>

 
  
  
  
  <div class="text-container">
  <p style="text-align: justify;height: auto;min-height: 280px;font-  family: sans-serif,monospace;padding:10px;padding: 10px;font-size: 20px;color: #000;">
A photovoltaic system for residential, commercial, or industrial energy supply consists of the solar array and a number of components often summarized as the&nbsp;balance of system&nbsp;(BOS). The term originates from the fact that some BOS-components are balancing the power-generating subsystem of the solar array with the power-using side, the load. BOS-components include:<br>
    Power-conditioning equipment and 
    Structures for mounting, 
    Typically one or more DC to&nbsp;AC&nbsp;power converters, also    known    as&nbsp;inverters,
   An energy storage device, 
   A racking system that supports the solar array, 
   Electrical wiring and interconnections, 
   Electrical protection devices and 
   Mounting for other components.

   Optionally, a balance of system may include any or all of the    following:&nbsp;
   renewable energy credit&nbsp;revenue-grade meter,&nbsp;  
    maximum power point tracker&nbsp;(MPPT),&nbsp;
   battery&nbsp;system and&nbsp;charger,&nbsp;
    GPS&nbsp;solar tracker,&nbsp;
    energy management software,&nbsp;
    solar irradiance&nbsp;sensors,&nbsp;
    anemometer, or 
    task-specific accessories 

    designed to meet specialized requirements for a system owner. 
    </p>
    </div>  
    </div>

Upvotes: 1

Related Questions