.leftbody { width:225px; height:350px; border:1px solid black; float:left; } .centerbody { width:450px; height:350px; border:1px solid black; margin-left:225px; } .rightbody { width:225px; height:350px; border:1px solid black; margin-left:675px; }

When writing this line the third block (rightbody), it moves down

https://pp.vk.me/c637716/v637716995/f270/AUPGsgfh9F4.jpg

  • You forgot to add a border to the margin-left, because of him moving - anton
  • I need it in one line, when writing the border, it rises down - Livacher
  • Add html code to the question. - edem
  • I solved the problem, thank you all, I did not write in .centrbody float: left; - Livacher

1 answer 1

Now there is a more modern method of positioning blocks on the page, this is flexbox . Below, I will give an example and a link to jsfiddle and an article about flexboxes. At first, it will seem confusing, but in an hour or two you will understand. If they decided to do it with floats, then all right. The main thing you need to do is make sure that you really know the width of each block, considering all the indents. For more precise and convenient control over this, I always write

 div { border-box: box-sizing; }

Now, if with floats, and a static page width, you need to do this:

 div { box-sizing: border-box; } .mainDiv { overflow: hidden; width:900px;//допустим, такая ширина всей страницы/ сумма всех блоков } .mainDiv > div{ float: left;//чтобы не писать для каждого отдельно } .leftbody { width:225px; height:350px; border:1px solid black; } .centerbody { width:450px; height:350px; border:1px solid black; } .rightbody { width:225px; height:350px; border:1px solid black; }

Well, the example with flexboxes:

HTML

 <div class="mainDiv"> <div class="leftbody"></div> <div class="centerbody"></div> <div class="rightbody"></div> </div>

CSS

 div { border-box: box-sizing; } .mainDiv { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .mainDiv > div { width: 50%; } .leftbody { height:350px; border:1px solid black; } .centerbody { height:350px; border:1px solid black; } .rightbody { height:350px; border:1px solid black; }

https://jsfiddle.net/9arL2cj4/

Forgot to add an article, Flexbox