CODEWITHSUNDEEP
htmlcss
Bob
Bob

Reputation: 23

CSS Putting a border around an image

I am new to HTML/CSS... Trying to do my college work

I am trying to put a border around an image, the border does the Left, bottom and top border, but the bottom and top border just carry on until the end of the page.

Here is the code: HTML:

.contentAbout {
  font-family: sans-serif;
  width: 50%;
  height: 100%;
  padding: 0px 10px 0px 10px;
  margin-top: -10px;
}
.aboutImages {} #imageOne {
  height: 250px;
  float: right;
  padding-right: 170px;
  margin-top: -150px;
  border: 1px outset white;
}
<div class="contentAbout">
  <h2>About us</h2>
  <p>Hey
  </p>
</div>
<div class="aboutImages">
  <img id="imageOne" src="http://i.imgur.com/6kbSaGL.png" alt="Car" />
</div>

Upvotes: 2

Views: 116

Answers (1)

kojow7
kojow7

Reputation: 11384

All you need to do is change the padding-right to a margin-right. So change:

padding-right: 170px;

to:

margin-right: 170px;

It works like this because borders are displayed outside of padding but inside the margins.

See http://www.w3schools.com/css/css_boxmodel.asp for information about how the CSS Box Model works.

Upvotes: 2

Related Questions