0

I'm trying to make a simple two-column layout in HTML/CSS; after consulting some resources, I'm still getting the two divs that should be side-by-side rendering as one below the other.

 <div id="columns" style="width: 100%;">
    <div id="left" style="float: left; width: 60%;">
      <button id="testBtn">show</button>
      <div id="output" style="white-space: pre-line">
        Content goes here
      </div>
    <div>
    <div id="right" style="float: left; width: 40%;">
      <div id="input">
        input displayed here
      </div>
    </div>
  </div>

These are some of the links I've consulted:

Simple two column html layout without using tables

https://www.w3schools.com/howto/howto_css_two_columns.asp

I've tried several variations, but so far I'm not getting a two-column layout. When I set the "input" div to "float:right", it appeared indented to the right but was still below the "output" div instead of beside it. Am I missing something?

Ashok Bhaskar
  • 361
  • 2
  • 16

2 Answers2

3

Your HTML is invalid. Instead of a closing </div> tag for #left, you have an opening <div> tag.

Try this:

<div id="left" style="float: left; width: 60%;">
    /* content goes here... */
</div>

Here is a fiddle demonstrating the modified markup: https://jsfiddle.net/djc87tLc/

Jonathan Nicol
  • 3,158
  • 1
  • 21
  • 22
1

Add display:inline-block; box-sizing:border-box; in both the divs and it will work. 

display:inline-block;

This will keep the elements inline and box-sizing:border-box; will keep the element's width to your defined width by including any padding or border inside it.

Hope this helps.

Rajan Benipuri
  • 1,772
  • 1
  • 9
  • 21