Two divs in a row CSS. When only one div in a row, align left

Question

Having a problem aligning my divs in a row. When there is two divs in a row, everything is fine, but wen only one div is in the row, this singular div sits funny. Any ideas? Thanks

My CSS:

div:nth-child(odd) {
 display: inline;
 float: left;
 width: 45%; 
}
div:nth-child(even) {
 display: inline;
 float: right;
 width: 45%;
}

Here is the screenshot:

As you can see, Test 1 doesn't sit right. I want it to sit left.

You would need to [`clear`](https://developer.mozilla.org/en-US/docs/Web/CSS/clear) the floating on every second element. But this is a really outdated way of layouting, you should look into flexbox and grid. — CBroe, Mar 14 '23 at 10:21
You should ask another question instead of modify an exist one to completely different thing if you are asking different things. — tsh, Apr 07 '23 at 07:15

score 0 · Answer 1 · edited Mar 29 '23 at 13:07

I think you mean that the you want the divs to align in one row. In which case, you should refer to this article: https://www.designcise.com/web/tutorial/how-to-force-html-elements-to-stay-on-the-same-line;

So your code would end up like this:

html {
white-space: no-wrap;
}

div:nth-child(odd) {
 display: inline-block;
 float: left;
 width: 45%; 
}
div:nth-child(even) {
 display: inline-block;
 float: right;
 width: 45%;
}

Two divs in a row CSS. When only one div in a row, align left

1 Answers1