css box 'skips' on second line [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Within a WordPress plugin (own creation) I want to position some WooCommerce category images... but there something strange happens.
Each category box is defined more or less in the following way :
<div class="edu-cat-item">
<img src="some-image.jpg>
Title of the cat
</div>
In the CSS the boxes are made to float to the left...
.edu-cat-item {
box-sizing:border-box;
width: 175px;
float: left;
padding:10px;
}
edu-cat-item img {
border-width:2px;
border-style:solid;
}
.edu-cat-item a {
text-align:center;
margin-left:auto;
margin-right:auto;
}
And -not really a surprise- it works... HOWEVER!
The customer wants the selected category to have an orange border.
So in the PHP code an extra class is added to one specific item... The HTML becomes :
<div class="edu-cat-item edu-sub-select">
<img src="some-image.jpg>
Title of the cat
</div>
And the CSS gets an additional :
.edu-sub-select img {
border-color: #ff9900!important;
border-style: solid;
border-width: 2px;
}
And now strange things happen... when it is more than one row, the second row 'indents' one position behind the selected cat... Would love to post images but I need 'reputation 10' to do so...
However willing to share them by mail.

Answer 1

You are missing a quotation mark:
<img src="some-image.jpg>
Maybe that's just an error in posting the question though. Could you create a jsfiddle showing the problem, it's hard to understand what you mean by "indent"
By the way, you might want to try getting rid of float:left; and replacing with display:inline-block;. I avoid the unpredictable behavior of float wherever possible.
Was curious so I made a simplified fiddle myself: http://jsfiddle.net/bca1m1n2/
What's happening is that the border causes the height of the orange element to be taller than the rest. When a floated element goes to the next line, it positions itself against the orange element because the orange element is taller. Behavior seems strange, but is correct - so don't use floats for alignment :)
So if you give .edu-cat-item a fixed height, that also solves the problem
.edu-cat-item {
width: 175px;
height:100px;
float:left;
}
Cool question OP

Answer 2

Alternatively to what Kurt Serge wrote, you could use an outline instead of a border. This way your "border" (outline) does not affect the flow of items.
Here's a little definition of CSS outlines from MDN / W3C (they write the same thing):
Outlines do not take up space
MDN adds the following detail:
they are drawn above the content.
So your css would look like this:
.edu-sub-select img {
outline-color: #ff9900!important;
outline-style: solid;
outline-width: 2px;
}