CODEWITHSUNDEEP
htmlcss
user3086732
user3086732

Reputation:

Image not properly positioned

The image starts 3/4 way down the div and I can't understand why - I want it to be at the top, the text should be on the left and the image on the right.

I've played around with float, clear and inline display but nothing changes it.

html

<div class="ipslist">

  <p><strong> Why choose IPS Fire & Security? </strong></p>
  <br />

  <ul>
    <li> Service 365 24/7 </li>
    <li> Engineer on site within 4 hours </li>
    <li> Insurance Approved </li>
    <li> Established over 10 years </li>
    <li> We are the UK's most loved security service! (thebestof)</li>
    <li> SSAIB & BAFE Accreditation </li>
    <li> 24 hour technical support</li>
  </ul>

  <img src="Images/vanbluefence.jpg"/>

</div>

CSS

.ipslist{
  height: 250px;
  width: 950px;
  margin-right: auto;
  margin-left: auto;    
  font-family: 'Open Sans', Arial, sans-serif;
}

.ipslist img {
  float:right;  
}

Upvotes: 0

Views: 90

Answers (4)

Aditzu
Aditzu

Reputation: 706

I think you want something like this http://jsfiddle.net/cv8M6/

Put image after ipslist and add

.ipslist{
    float:left;
}

#floatingImage{
    float:right; 
}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Add display:inline-block to ul

Ul is block element so it is occupying the entire space and pushing image to next line.

DEMO

Upvotes: 1

Sagar Patil
Sagar Patil

Reputation: 1948

You'd be better off wrapping all your text in a div and floating the div left.

HTML

<div class="ipslist">
    <div class='content-wrapper'>
        <p><strong> Why choose IPS Fire & Security? </strong></p>
        <br />
        <ul>
            <li> Service 365 24/7 </li>
            <li> Engineer on site within 4 hours </li>
            <li> Insurance Approved </li>
            <li> Established over 10 years </li>
            <li> We are the UK's most loved security service! (thebestof)</li>
            <li> SSAIB & BAFE Accreditation </li>
            <li> 24 hour technical support</li>
        </ul>
    </div>
    <img src="Images/vanbluefence.jpg"/>
</div>

CSS

.ipslist {
    height: 250px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;  
    font-family: 'Open Sans', Arial, sans-serif;
}
.ipslist .content-wrapper{
    float:left;
    width: calc(100% - <width of image>)
}
.ipslist img {
    width:<width of image>; height:auto; 
    float:right;
}

Additionally, you can also float:left both the .content-wrapper and image and then apply clear:both on the img.

Upvotes: 0

Reece
Reece

Reputation: 396

Try using absolute positioning on the image, but ensure the container isn't positioned as static (the default).

.ipslist {
   height: 250px;
   width: 950px;
   margin-right: auto;
   margin-left: auto;  
   font-family: 'Open Sans', Arial, sans-serif;
   position: relative;
 }

.ipslist img {
   position: absolute;
   top: 0;
   right: 0;
}

Upvotes: 0

Related Questions