csswordpresswpbakery

CSS aligning boxes next to each other

I'm trying to do some changes in wordpress (wpbakery) with some css styling. However I'm not getting the results I expect.

I'm simply trying to show some boxes with text, like below:

<div style="float: left;">Test</div>
<div style="float: left;">This is a longer test. This is a longer test. This is a longer test.</div>

I would expect the two boxes to flow next to each other. But if the text in the second box is two long, the boxes goes to the next line.

I have recreated the problem with:

 <div style="margin: auto; width: 200px;">
 <div style="float: left;">Test</div>
 <div style="float: left;">This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

Is there a way to fix this? Setting the width is not an option for me.

Thanks in advance.

Solution

  • Instead of using float:left, you can use: "display:inline-block", this will put the div next to each other. I'll also recommend you to put some padding on each side of the divs.

    You can see your working code here, this is the most cleanest way I found:

    .nextto{
  display: inline-block;
  width: 30%;
}
    <div style="width:100%">
 <div class="nextto">Test</div>
 <div class="nextto">This is a longer test. This is a longer test. This is a longer test.</div>
 </div>