Tkinter formatting multiple frames next to each other
<p>so I am creating a GUI and I essentially want to have two different "toolbars" at the top of the GUI, similar to <img src="http://i.imgur.com/NZByh97.png" alt="this">.<br>
Currently, I have the respective buttons for each toolbar placed into two different respective frames called Toolbar and Selectbar. On each button I call .pack() to format them within the toolbars, and then on each toolbar I call<br>
    <code>toolbar.grid(row=0, column=0, sticky='NW')</code><br>
    <code>selectbar.grid(row=0, column=1, sticky='NE')</code><br>
However, I don't believe this is right because they're two different "grids" that it is trying to place in the respective columns. It still gives me something close to the desired product in this: <img src="http://i.imgur.com/Kviqrl8.png" alt="this">.<br>
However, I was wondering how I would "combine" these two frames into a larger respective frame so that I could possibly use <code>.configurecolumn(0, weight=1)</code> to get the first toolbar to stretch out farther along the screen.  </p>

<p>In essence, I was wondering how I would be able to have these two "toolbars" next to each other, but have the first one extend with the blank space.  </p>

<p>Edit: Here is the code with some parts omitted.  </p>

<pre><code>  from tkinter import *  
  from MenuBar import *  
  from ToolBar import *  
  import tkinter.ttk

class App(Tk):
def __init__(self):
    Tk.__init__(self)


    #Creates the MenuBar
    menubar = MenuBar(self)
    self.config(menu=menubar)

    #Creates the ToolBar
    toolbar = Frame(bg="#f2f2f2", bd=1, relief=RAISED, width=1000)

    newUndIcon = itk.PhotoImage(file="Icons/newUndirected.png")
    newDirIcon = itk.PhotoImage(file="Icons/newDirected.png")
    b0 = Button(toolbar, text="Create a new undirected graph", image=newUndIcon, relief=FLAT)
    b1 = Button(toolbar, text="Create a new directed graph", image=newDirIcon, relief=FLAT)
    b2 = Button(toolbar, text="Open an existing graph", image=openIcon, relief=FLAT)
    b3 = Button(toolbar, text="Save graph", image=saveIcon, relief=FLAT)
    b0.img = newUndIcon
    b1.img = newDirIcon
    b2.img = openIcon
    b3.img = saveIcon
    b0.pack(side=LEFT, padx=2, pady=2)
    b1.pack(side=LEFT, padx=2, pady=2)
    b2.pack(side=LEFT, padx=2, pady=2)
    b3.pack(side=LEFT, padx=2, pady=2)       

    #toolbar.pack(side=TOP, fill=X)
    toolbar.grid(row=0, sticky='NW')
    toolbar.columnconfigure(1, weight=1)

    selectBar = Frame(bg="#f2f2f2", bd=1, relief=FLAT)
    c0 = Button(selectBar, image=newUndIcon, relief=FLAT)
    c1 = Button(selectBar, image=newDirIcon, relief=FLAT)
    c2 = Button(selectBar, image=vertexIcon, relief=FLAT)

    c0.img = newUndIcon
    c1.img = newDirIcon
    c2.img = vertexIcon

    c0.pack(side=LEFT, padx=2, pady=2)
    c1.pack(side=LEFT, padx=2, pady=2)
    c2.pack(side=LEFT, padx=2, pady=2)

    selectBar.grid(row=0, column=1, sticky='NW')
    selectBar.columnconfigure(1, weight=1)



  app=App()
  app.iconbitmap('Icons/titleIcon.ico')
  app.title("GMPX")
  app.geometry('900x600')
  app.config(bg="#FFF")
  app.mainloop()
  app.destroy()
</code></pre>

<p>You can try putting the <code>toolbar</code> and <code>selectBar</code> inside a <code>Frame</code>, and use <code>pack()</code> instead of <code>grid()</code>:</p>

<pre><code>topbar = Frame(self)
....
toolbar = Frame(topbar, ...)
toolbar.pack(side=LEFT, fill=X, expand=True)
...
selectBar = Frame(topbar, ...)
selectBar.pack(side=RIGHT)
...
topbar.pack(fill=X)
</code></pre>

python python-3.x user-interface tkinter