How to Set HTML Body Into Two Parts with CSS Effects

How to set html body into two parts with CSS effect. In the first part we call it the menu features section, the second part is the post content section. In the previous post I wrote to create a data input form, we consider the data input form as post content.

Read also: How to Make a Simple HTML Data Input Registration Form Display

Make the nav menu (menu feature) on the body which we will put on the left. Here’s the Html Tag

We put the html code above in the container class, as below

Next, we write the right content post code next to the menu feature, here’s an example of the code:

We put the code just below the code. After we finish writing the code above sequentially we can give a touch of css so that it looks the way we want. First we will provide the css code for the container class

.container {
margin-bottom: 5px;
}

As usual, we will put the css code inside the tag …. the css code above serves to provide a distance between the container class and the footer with a distance of 5px. Next we will provide a css function in the menu features section (nav menu), here is the css code

We give the function float left to give the menu position to the left. function list-style-type: none, serves to remove the round symbol in the list function.

I give :hover as an effect when the mouse cursor is on the :hover function, it will give a display effect from the css codes in it, such as background-color: #fff, to give color effects. border-radius: 10px, serves to give a curved effect on the corners of the list menu box. Finally, we provide the css code for the post-content class, here’s the code:

.post-content {
margin-left: 170px;
border-left: 1px solid gray;
overflow: hidden;
}

If we have written all the code above correctly it will display a page like below

Thus my writing on how to set the body html into two simple parts. Hopefully useful for all friends. If my review is not clear, we can discuss it in the comments. Thank you