I broke my whole head already...It seems everything is correct, I can not find a mistake.These should be three blocks, the left and the right of them have a width of 30%.The average, in theory, should stretch to the remaining space.I always have the right picture in each line moving down(screen below)...As I just did not try already.The problem is clearly in the space between the chair and the monitor.

<div><img src="01.jpg">
<div><img src="02.jpg">
<br/>Chimborazo(6,300 m)</div>&nbsp;
<div><img src="03.jpg">
<br/>Kayamba(5800 m)</div>

<div><img src="04.jpg">
<div><img src="05.jpg">
<br/>Against the background of Chimborazo</div>&nbsp;
<div><img src="06.jpg">
<br/>Climb to Kayamba</div></div>


2 Answers 2

So I understand the second diva does not specify the width.I think it would be right for everyone to indicate float: left.
Between divas better to remove
  • Thank you, removed from the right float at all, added float: left to the middle one, more and more returned to normal.

    And do not explain why this is happening? It is logical, after all, that the middle element should not have float... In any case, it usually prokanvalo with two elements.
    – 8-Bit19 Jun 10 '14 at 23:13
  • 8-Bit19 float attaches to the flow around the block, there may be several reasons for this situation. I usually read what's what on htmlbook.ru/css. I almost always find there what I need. – Extreme9 Jun 11 '14 at 09:31
Read about inline, vertical-align
Check out this example codepen.io/iiil/pen/JljFn
In short, you use display: inline, turning block elements into embedded ones.And vertical-align is applied to them, which by default is baseline.Because of this, the picture goes up, as it is higher than the neighboring ones.

Yes, and inline elements do not need to hang around at all - adjust the text-align, the width of 30% does not affect them at all, as well as the specified percentage.You are obviously floating in html/css.