Layout questions with Style Elements and Elm - elm

Question

I am building my first app in Elm and decided to use Style Elements package instead of CSS.
This is the layout that I am attempting. Its a single page app that does not scroll.
here is some code
view : Model -> Html Msg
view model =
layout Styles.stylesheet <|
pageWrapper
pageWrapper : Element Styles variation Msg
column Page
[ width (percent 100), height (percent 100) ]
[ navMain
, contentArea
]
navMain : Element Styles variation Msg
navMain =
row Navigation
[ spread, padding 10 ]
[ el (Nav Logo) [ width (px 50)] (text "Logo")
, row (Nav Link)
[ padding 15, spacing 10]
[ el (Nav Link) [] (text "About")
, el (Nav Link) [] (text "Services")
, el (Nav Link) [] (text "Team")
, el (Nav Link) [] (text "Location")
, el (Nav Link) [] (text "Contact")
]
]
contentArea : Element Styles variation Msg
contentArea =
-- At this point I thought I would make a row with an el with the image
and a column containing the other two images. And other than creating heights with pixels I don't know how to extend the main content to the bottom of the page.
What are some good example apps I can look at to get a good idea of how to control the layout? I have looked through several, and I feel like I am just missing something very obvious because so far SE has been awesome to work with!

Answer 1

Here's a very basic example:
https://ellie-app.com/k25rby75Da1/1
I've left the heights of the elements undefined below but you should be able to figure that out to suit your needs. I updated the ellie link to a version that I think better approximates the height in your example.
module Main exposing (main)
import Html
import Html.Attributes
import Color
import Style
import Style.Font as Font
import Style.Color as Color
import Element exposing (..)
import Element.Attributes exposing (..)
main =
Html.beginnerProgram
{ model = model
, update = update
, view = view
}
type alias Model =
{ navbar : String
, leftcontent : String
, rightcontent : { top : String, bottom : String }
}
model : Model
model =
{ navbar = "This is the navbar"
, leftcontent = "This is the left column content"
, rightcontent =
{ top = "This is the right top content"
, bottom = "This is the right bottom content"
}
}
update model msg =
model
type MyStyles = Navbar | Left | RightTop | RightBottom | None
stylesheet =
Style.styleSheet
[ Style.style Navbar [ Color.background Color.red ]
, Style.style Left [ Color.background Color.blue ]
, Style.style RightTop [Color.background Color.purple ]
, Style.style RightBottom [Color.background Color.gray ]
]
view model =
Element.viewport stylesheet <|
(column None [] [
row Navbar [] [ text model.navbar ]
, wrappedRow None []
[ column Left [ width (percent 50)] [ text model.leftcontent ]
, wrappedColumn None [ width (percent 50)]
[ el RightTop [ width fill] (text model.rightcontent.top)
, el RightBottom [ width fill ] (text model.rightcontent.bottom)
]
]])