Adding border moves next column to below bordered column

Question

Learning the basics of HTML and CSS. When I add a border to div column in red, div column in green goes below column red? Before: before adding border

After: after adding border

Tried removing padding or margins but the result is the same.

Below is CSS for column1 and column2.

 .details {
     float: left;
    width: 20%;
    overflow-wrap: break-word;
    background-color: lightcoral;
}

.workhistory {
    float: left;
    width: 80%;
}

Hello, welcome to Stackoverflow. I suggest you improve your question by submitting a minimum viable working code. In addition, https://stackoverflow.com/help/minimal-reproducible-example refer to here for more information. To further get information, you can also quickly read this: Please refer to how to ask: https://stackoverflow.com/help/how-to-ask — dev-cyprium, Apr 06 '21 at 14:32
use `box-sizing: border-box;` - and better also dont use `float` for styling pupose. Use flexbox instead. Float is not intended for styling pupose. Its a mis-used hack. — tacoshy, Apr 06 '21 at 14:38

score 1 · Accepted Answer · answered Apr 06 '21 at 14:43

Add box-sizing: border-box; to both elements. That way the box-width is taking paddings and border thickness into effect aswell.

body {
  margin: 0;
}

.details {
  float: left;
  width: 20%;
  overflow-wrap: break-word;
  background-color: lightcoral;
  border: 5px solid red;
  box-sizing: border-box;
}

.workhistory {
  float: left;
  width: 80%;
  border: 5px solid green;
  box-sizing: border-box;
}

div {
  min-height: 100vh;
}

<div class="details"></div>
<div class="workhistory"></div>

float is a mis-used hack. There is no reason to use it anymore since 2015. float was never intended for styling pupose but floating images within a paragraph (like in newspapers).

Wrap the elemnts and use display: flex; instead like in the sample below.

body {
  margin: 0;
  display: flex;
}

.details {
  width: 20%;
  overflow-wrap: break-word;
  background-color: lightcoral;
  border: 5px solid red;
  box-sizing: border-box;
}

.workhistory {
  width: 80%;
  border: 5px solid green;
  box-sizing: border-box;
}

div {
  min-height: 100vh;
}

<div class="details"></div>
<div class="workhistory"></div>

Thanks a lot. it works now. I've been trying to figure it out if it was a margin or padding issue. — DexterBoyGenius, Apr 06 '21 at 14:52

score 1 · Answer 2 · answered Apr 06 '21 at 14:44

1

in order to understand what is happening you need to understand the css box-model , so long story short if you add a border that is 1px to an element it will be added to the elements width and will result to element width + 2px (1px for left and right border)

To avoid having problem with moving elements you could add the border initially and set it's color to the color of the element or transparent if you want.. the other option is to use outline instead of border

answered Apr 06 '21 at 14:44

Kolyo Peev

145
2
11

what do you mean with `use outline instead of border`? – tacoshy Apr 06 '21 at 14:46
https://www.w3schools.com/css/css_outline.asp outline does not affect the layout of elements as border does – Kolyo Peev Apr 06 '21 at 15:38
I know what at outline is but how does an outline replace a border? Youc an use a broder-radius for example. And the outline works same as shadows, they dont influence the width but will be hidden by other elements. Outline is not even closely a replacement for a border. Why trade in so many downsides if the solution to the issue can eb solved way easier. – tacoshy Apr 06 '21 at 19:17
well it depends on the use case and looking at the question that was asked the first problem I had with borders when I was learning was hovering and displaying a border which resulted in wobbling of the element, so in that case I would say an outline is waaaay simpler and results in less code than using border =] – Kolyo Peev Apr 06 '21 at 20:25
Look at my solution. It's just one line your have to add can't get more simple then that. The issue is, that W3School teaches many overcomplicated and outdated solutions instead of teaching modern and efficient methods. You mentioned that the boxçmodell is the issue. If you know that, then why not change the box model from content-box to border-box? Issue solved... So why go for hacky methods that have many downsides? – tacoshy Apr 06 '21 at 21:51
1

dude, why do you want to argue? The guy that has asked the question obviously hasn't seen a lot of css, he needs to read more about it, just writing "here is solution" will not result in helping him, yes he will get the desired effect but he probably won't understand it. Also it is nice to know there is an alternative way.. there is no best way, it all depends on the case and the demands. And yes I've put a link to box-model that includes box-sizing so he can see how it works not "here add this there".. – Kolyo Peev Apr 07 '21 at 07:26

Adding border moves next column to below bordered column

2 Answers2