0

I try to float a picture next to some text and all centered. This is how far I got and the arrow shows where I actually would like to have the image placed.

enter image description here

HTML

<!DOCTYPE html>
  <head>
    <title>Simple Page</title>
    <link rel="stylesheet" type="text/css" href="css/test.css">
  </head>
  <body>    
    <div class="content">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
        <p>
          <a href="mailto:test@example.com">test@example.com</a>
        </p>
        <p>
          Download
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a>
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a>
        </p>
      </div>
      <div class="photo">
        <img src="image/dummy.png" alt="dummy">
      </div>
    </div>
  </body>   
</html>

CSS (I tried to follow some other stackoverflow answers, but seems like I could not understand what I am really doing)

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 150%;
  line-height: 1.6em;
}
.cv {
   display: table;
   margin: 0 auto;
}
.photo {
  float: right;
}

Any general critic is also welcome and I would also appreciate some words of background explanation rather than just a solution code snippet. Thanks.

hol
  • 8,255
  • 5
  • 33
  • 59

4 Answers4

3

Demo

According to the HTML spec, <span> is an inline element and <div> is a block element. Now that can be changed using the display CSS property but there is one issue: in terms of HTML validation, you can't put block elements inside inline elements so:

<span>...<div>foo</div>...</span>

is not strictly valid even if you change the <div> to inline or inline-block.

So, if your element is inline or inline-block use a <span>. If it's a block level element, use a <div>.

HTML

<div class="content"> 
    <span id="texxts">
      <div class="cv">
        <p>
          Some text<br>
          Some more text<br>
          etc etc<br>
        </p>
        <p>
          <a href="mailto:test@example.com">test@example.com</a>
        </p>
        <p>
          Download
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a>
          &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a>
        </p>
      </div>
   </span>
   <span>
      <div class="photo">
         <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy">
      </div>
   </span>
</div>

css

.content {
    margin-bottom:2%;
    text-align: center;
}
.content span {
    display: inline-block;
    vertical-align: middle;
}
.content #texxts {
    border: 1px solid red;
    /* to show the centering */
}
body {
    font-family:'Lato', sans-serif;
    font-weight: 300;
    font-size: 150%;
    line-height: 1.6em;
}
.cv {
    display: table;
    margin: 0 auto;
}
.photo {
    float: right;
}
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
  • I worked out for myself why this works. I was a bit clueless at the beginning because I did not understand what a `block` is and what the `display` property is and what `inline` means. Your answer and the other answers helped me sorting this out. I would like to accept your answer if there would be a bit of an explanation of why this work. I figured it out for myself by now but I think that would increase the value of your answer for everyone else. – hol Apr 21 '14 at 12:12
  • I suppose now it justifies..:) – 4dgaurav Apr 21 '14 at 12:21
  • `p` is actually a block level element, but does not allow block level elements to be nested within. Putting a `div` within a `div` and setting the outer `div` to `display:inline` will still validate the HTML without issues. I suggest you update your post to use `span > div` instead of `p > div`. – KrekkieD Apr 21 '14 at 12:44
2

Here's your HTML a little prettier

<div class="content">
  <div class="cv">
    <p>Some text</p>
    <p>Some more text</p>
    <p>etc etc</p>
    <p><a href="mailto:test@example.com">test@example.com</a></p>
    <p>Download
      <a href="example-eng.pdf" class="p-link">eng</a>
      <a href="example-deu.pdf" class="p-link">deu</a>
    </p>
  </div>
  <div class="photo">
    <img src="image/dummy.png" alt="dummy">
  </div>
</div>

and the CSS

.content {
  background: #fefefe;
  width: 600px;
  margin: 20px auto 0; /* margins - top | left/right | bottom */
  padding: 10px;
  text-align: center;
  border: 1px dashed #bbb;
}
.cv {
  display: inline-block;
  margin: 0 20px;
}
.photo {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 200px;
}
.photo:after {
  background: rgba(100,100,100,0.5);
  position: absolute;
  content: "Image description";
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding: 10px;
  color: #fff;
  opacity: 0;
  transition: all 0.4s linear;
  box-sizing: border-box;
}
.photo:hover.photo:after {
  height: 100%;
  opacity: 1;
}
.photo img {
  width: 100%;
  height: 100%;
}
p {
  text-align: left;
  line-height: 23px;
}
.p-link {
  margin-left: 10px;
}

If you want block level elements like div to be side by side (inline) you must assign them CSS propery display: inline-block; or you can leave them to be displayed block and float them to the left or 1st to left 2nd to right and their width combined with margins, padding and borders can not cross container inner width or they be stacked again one on top of the other. Anyway here's a FIDDLE

Milan and Friends
  • 5,560
  • 1
  • 20
  • 28
  • Thanks so far. But how to center it text and image? – hol Apr 21 '14 at 10:09
  • By setting width to the .content and adding `margin: 0 auto`? – Artur K. Apr 21 '14 at 10:14
  • @hol I've updated the fiddle with `.content` on the center with elements centered inside ;) – Milan and Friends Apr 21 '14 at 10:17
  • I think it would be good if you could update your answer from the fiddle. I learned a lot from your answer also in the `p-link` class taught me how to code the indent more elegant. The key point was that class `.cv` and `.photo` will appear next to each other if defined `inline` and to not lose the height I want it be a `inline-block`. To make the two divs centered I need outside to be `text-align: center` which is not very intuitive because when I think of text I do not think of whole blocks. So in short: Well done and would be nice if you could update answer with fiddle solution. – hol Apr 21 '14 at 12:18
  • CSS has inline and block elements. Think of inline elements as text elements (i.e. `span`, `strong`, `em`) and block elements as actual blocks that by default take full available width and take up the whole 'line' (i.e. `p`, `div`, `ul`). The use of `display: inline-block` then makes it a block element, that behaves as though it's a piece of text. Therefore the `text-align` property is working on these elements. – KrekkieD Apr 21 '14 at 12:42
  • @hol I've updated my answer to be exact like in the fiddle. And about `.p-link`, sometimes when you got just one line of text or multiple lines but you just want to indent the first line you can use e.g. `p:first-letter { margin-left: 10px; }` ;) – Milan and Friends Apr 21 '14 at 18:46
1

You are floating the photo to the right, but only after the .cv element was rendered. Therefore the float kind of behaves as though you have an 'enter' behind the .cv element, placing it on a new line, and floating it to the right on that line. That is what you're seeing, the photo is below the .cv element, but properly floated right.

To fix, you can either float .cv left (which will break your current horizontal center alignment of the .cv element), or you could put the photo element before the .cv element in the HTML. This way it'll float right on the first 'line', and rendering the .cv element on the same line.

Note that the display: table on the .cv element is of no use and should probably be removed, unless in your real code you're also using table-rows and table-cells within the .cv element. What use would it be otherwise :)

Chetan Gawai
  • 2,361
  • 1
  • 25
  • 36
KrekkieD
  • 967
  • 9
  • 23
  • The `display: table` I took from here http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally – hol Apr 21 '14 at 10:03
  • I see, you're using it for a dynamic width. Note though that if it gets to wide, you won't be able to fit anything (i.e. the photo) next to it. You might want to consider adding `max-width` to prevent that. – KrekkieD Apr 21 '14 at 10:10
  • Thanks for the answer. It were all the answers combined that pointed me into the right direction for the solution. What I liked on your answer was explaining about the "new line" which is a bit of the language that I understood. The eventual solution been to make both divs next to each other and make the "outer" div text align to center. – hol Apr 21 '14 at 12:22
0
**Try this** 

.cv {
   display: table;
   margin: 0 auto;
   float:left;
}
.photo {
   float: left;
   margin-top:80px;
}
Raman Mandal
  • 276
  • 1
  • 6