Your issue with .chosenproducts {} is most likely a typo on your part. I’d need to see the complete code to advise further.
To your last issue about laying out
<div id="column2">ssefdfd</div>
<div id="column2">fddfdfd</div>
side by side:
First, you reuse an ID, which is absolutely not permitted. But I’m guessing that is a typo in your question at Sitepoint and the actual code is
<div id="column1">ssefdfd</div>
<div id="column2">fddfdfd</div>
so I will answer as though the latter is the case.
A div is a block element by default. Block elements stack vertically no matter how wide you make them. The width of .testimonials is not relevant (as long as .testimonials is wide enough to hold both column IDs side by side.
There are several ways to make block elements appear side by side. The two ways you would have learned 15 years ago are:
- Change the value of the display property from block to inline-block;
#column1, #column2 {
display: inline-block;
width: ; /* use any value less than half the width of .testimonials, allowing for padding */
}
- Float the columns
#column1, #column2 {
float: left; /* float; right will work but column1 will show up to the right of column 2 */
width: ; /* use any value less than half the width of .testimonials, allowing for padding */
}
.testimonials {
overflow: auto; /* this declaration should be added to your .testimonials rules */
}
The tricky thing with floats here is that the container must be able to accept floated content. If you float the container itself, that will work but may create issues between the container and its container. If you set the overflow property of the container, it then is able to accept floated content within.
These two methods were the way to go until about 3 to 5 years ago. The modern methods today are to use display: flex AKA “Flexbox” or display: grid; AKA “CSS Grid”.
The solution in flexbox looks like this:
.testimonials {
display: flex;
flex-flow: wrap;
align-content: flex-start;
}
h2 {
width: 100%;
}
#column1, #column2 {
width: ; /* use any value less than half the width of .testimonials, allowing for padding */
}
I realize this looks more difficult, but flexbox is so much more powerful than the older systems it is well worth learning.
