I can't make 2 column layout in css-CodePudding

Today I try to learn html and css. but when i try to make a 2 column layout in the body, i have a problem that i can't divide it into 2 parts even though i have given this code previously in the css section

.leftcolumn {
    float: left;
    width: 75%;
}

.rightcolumn {
    width: 25%;
    float: left;

}

when I debug this html what happens is that the right column stays under the left, but doesn't move to the top on the right

I'm confused why something like this can happen even though I have given the width value to each column before if you know the solution please help me

CodePudding user response：

You can add more css :

.leftcolumn {
  float: left;
  width: 75%;
  height: 50px;
  background-color: #ccc;
}

.rightcolumn {
   width: 25%;
   float: left;
   background-color: #ff9600;
   height: 50px;
}

exaple here: https://codepen.io/phm-tun-v/pen/rNJojbZ