Can someone help me create this UI in Tkinter

Question

UI I need to make

This is the UI I require. I have made the left side of the UI. However, I am unable to add the frame on the right. I think my inherent positioning of all elements is wrong and so I am unable to get the right side positions of a frame. Under the message board, I need a frame in which I can insert text that is all. Could someone help me with the code. My current code is:

from tkinter import *
from tkinter import ttk
import requests

class mainUI:

    def __init__(self, root, username, data):
        self.root = root
        self.root.geometry("900x700")
        self.root.title("Auto Login for " + username)

        print(data)

        # creating categories listbox
        Label(self.root, text='Categories', font=('Times 13'), fg="red", padx=20, pady=20).grid(row=0, column=0, sticky=W)
        self.categoriesListBox = Listbox(self.root, width=25)
        self.categoriesListBox.grid(row=1, column=0, padx=10)
        #adding the categories
        self.categoriesList = data['Categories']
        for item in self.categoriesList:
            self.categoriesListBox.insert(END, item['Name'])

        # binding double click event on categories
        self.categoriesListBox.bind('<Double-1>', self.categorySelect)


        # creating websites listbox
        Label(self.root, text='Websites', font=('Times 13'), fg="red", padx=20, pady=20).grid(row=19, column=0, sticky=W)
        self.wesbitesListBox = Listbox(self.root, width=25)
        self.wesbitesListBox.grid(row=20, column=0, padx=10)

        #creating the messages frame
        Label(self.root, text="Message Board", fg = "red",font=('Times 13'), padx=20, pady=0).grid(row=0, column=1)
        self.messageBoardFrame = Frame(self.root, width=200, height=200, background="white", pady=30).grid(row=1, column=1)
       # self.messageBoardFrame = LabelFrame(text="Message Board")
        Label(self.messageBoardFrame, text="Text").grid(row=1, column=1)



    def categorySelect(self, event):
        self.wesbitesListBox.delete(0,END)
        item = self.categoriesListBox.get('active')
        for name in self.categoriesList:
            if name['Name'] == item:
                websites = name['Websites']
                break
        print(websites)
        for website in websites:
            self.wesbitesListBox.insert(END, website)



if __name__ == '__main__':
    root = Tk()
    root.geometry('585x515+500+200')

    application = mainUI(root, "Name", {
        'Categories': [{'Name': '31West', 'Websites': ['a','a','a','a']}, {'Name': 'Book Domicile', 'Websites': ['b','b','b','b']},
                       {'Name': 'Crate', 'Websites': []}, {'Name': 'Electrosonic Inc', 'Websites': []},
                       {'Name': 'HostGenius', 'Websites': []}, {'Name': 'Insane Audio', 'Websites': []},
                       {'Name': 'Itsy Bitsy', 'Websites': []}, {'Name': 'Jobs', 'Websites': []},
                       {'Name': 'Kobe Steakhouse', 'Websites': []}, {'Name': 'MIS Computer Corp.', 'Websites': []},
                       {'Name': 'Natrinsic', 'Websites': []}, {'Name': 'Ramshyam', 'Websites': []},
                       {'Name': 'TEST CO', 'Websites': []}, {'Name': 'W-Appliance', 'Websites': []}],
        'isLoggedIn': True}
                         )
    root.mainloop()


    enter code here

Answer 1

class mainUI:

    def __init__(self, root, username, data):
        self.root = root
        self.root.geometry("900x700")
        self.root.title("Auto Login for " + username)

        print(data)

        master_frame = Frame(self.root)
        master_frame.grid(row=0, column=0)

        left_frame = Frame(master_frame)
        left_frame.grid(row=0, column=0, sticky='nswe')

        # creating categories listbox
        categories_label = Label(left_frame, text='Categories', font=('Times 13'), fg="red")
        categories_label.grid(row=0, column=0)

        categories_frame = Frame(left_frame)
        categories_frame.grid(row=1, column=0)
        self.categoriesListBox = Listbox(categories_frame, width=25)
        self.categoriesListBox.grid(row=1, column=0)
        # adding the categories
        self.categoriesList = data['Categories']
        for item in self.categoriesList:
            self.categoriesListBox.insert(END, item['Name'])

        # binding double click event on categories
        self.categoriesListBox.bind('<Double-1>', self.categorySelect)

        # creating websites listbox
        websites_label = Label(left_frame, text='Websites', font=('Times 13'), fg="red")
        websites_label.grid(row=2, column=0)
        self.wesbitesListBox = Listbox(left_frame, width=25)
        self.wesbitesListBox.grid(row=3, column=0)

        right_frame = Frame(master_frame)
        right_frame.grid(row=0, column=1, sticky='nswe')

        # creating the messages frame
        message_label = Label(right_frame, text="Message Board", fg="red", font='Times 13')
        message_label.grid(row=0, column=0)
        self.messageBoardFrame = Frame(right_frame, width=400, height=400, background="white")
        self.messageBoardFrame.grid(row=1, column=0)
        self.messageBoardFrame.grid_propagate(False)  # should delete later, it's only to show frame size, with this flag true frame will fit widgets inside it

        # self.messageBoardFrame = LabelFrame(text="Message Board")
        text_label = Label(self.messageBoardFrame, text="Text")
        text_label.grid(row=0, column=0)

Grid works not only in window but also inside frames. So inside window you can put something like master_frame with grid(row=0, column=0). Then make 2 frames, left and right with grid (row=0, column=0) and (row=0, column=1). It won't overlap because master_frame is inside root, left and right inside master_frame. Then it's just that idea repeated.

Thanks to that you can put as many widgets in one of the frames, no matter where left/right/below/over existing ones and it won't affect widgets in other frame, as they will be placed according to parent.