Initial Layout

Question

I've been watching and reviewing the HTML and CSS Foundations videos - got all the way through the Box Model videos - but still haven't figured out how to do a basic layout. All I need is a basic layout of a navbar at the top and two columns that are able to be split about 50/50 horizontally. It doesn't seem like this should be all that difficult to create, but such a simple thing doesn't seem to be included in any of the videos... but maybe I'm missing something. If you have any guidance, that would be extremely useful. Can you please point me in the right direction? Thanks!!!

Answer 1 · 2014-02-05T01:51:51Z

February 5, 2014 1:51am

I think your looking in the right direction by considering starting with frameworks as mean support your layout goals. I would do the same. Foundation 5 has been recently released and Treehouse offers lessons with that. Foundation also provides at their site HTML templates which you can drop into your project that will give you a starting point.

Even if those layouts don't meet your exact needs you might consider choosing one that most closely resembles your vision and then delving into modifying it to do so exactly. That process I couldn't recommend more highly. You'll find the answers. Look at column widths and look at writing your site's HTML where it's div elements and content they contain are stacked the way they make sense to you

The Framework will provide the mean to set the horizontal structure as you are concerned with. Per page on your site you'll have the power to set width for all blocks of content. The CSS classes authored in Foundation will allow you to set widths of columns and containers according to your needs.

As I mentioned above I'd be happy to walk you through. Post back your progress/thoughts/questions. I recommend Foundation (or Bootstrap) as a framework. Also look at http://www.getskeleton.com/ as you might learn a lot in compariison of frameworks as to what a CSS framework actually can do for you as a structure building tool.

Answer 2 · 2014-02-05T02:40:43Z

February 5, 2014 2:40am

I've just earned the Introduction to Front-End Frameworks badge! In solidarity with Drew Gillet. :)

Answer 3 · 2014-02-05T01:24:34Z

February 5, 2014 1:24am

What are you building? Or, have you already prepared a lot of content?

I'd be happy to recommend some resources and I'd be happy to walk you through your question with some idea of what you are hoping to accomplish.

Answer 4 · 2014-02-05T01:33:37Z

February 5, 2014 1:33am

Hi! I'm also fairly new to this, but I thought I'd take a crack at it. Here's what I've come up with (someone feel free to correct me if I'm violating best practices or have done something wrong).

First, the HTML setup:

<div id="container">
    <div id="navbar"></div>
    <div id="left_column"></div>
    <div id="right_column"></div>
</div>

Now, the CSS:

#container {
    width: 800px;
    height: 1000px;
    border: 1px solid black;
}

#navbar {
    width: 800px;
    height: 125px;
    background-color: darkblue;
}

#left_column {
    width: 395px;
    height: 860px;
    background-color: lightblue;
    margin: 5px 5px 0px 0px;
    float: left;
    clear: both;
}

#right_column {
    width: 395px;
    height: 860px;
    background-color: red;
    margin: 5px 0px 0px 5px;
    float: right;
}

You can see the appearance of the result by checking out my jsfiddle here (click on "Run" if it doesn't show up in the bottom right window automatically): http://jsfiddle.net/retserrof84/5fTW6/

Obviously you can change the dimensions/colors however you want. I think the important thing is to make sure the divs don't float on top of each other. I used "float" for that, though I don't know if it's right. I'm also not sure why I had to use "clear" to get the left-column to go away from the navbar, but I didn't have to use "clear" for the right-column. I'm sure there's a reason. I'm not to the Box Model videos yet, so I may be doing some stuff wrong. Hope this is at least somewhat helpful though!

Answer 5 · 2014-02-05T02:03:04Z

February 5, 2014 2:03am

CSS Grids as Foundation sees it:

http://foundation.zurb.com/grid.html

You got a basic website indeed. Look at the structure of that download folder. You'll notice that the index or sample pages are referencing CSS files. Place your work in alongside that index file and reference the stylesheets in the head of your new documents in the same way that sample(s) does. Now you are accessing the power of Foundation's CSS. Start to look at Foundation's documentation for help on how to start laying out your content by giving class name to your block elements. I would consider this structure for your half and half idea.

<!-- .container hold rows essentially and within .row you can specify columns. In this case is 6 and 6 as Foundation provides a 12 wide pattern. This can be adjusted if needed. -->
<div class="container">

  <div class="row">
    <nav>All your navigation markup goes here</nav>
  </div><!-- end .row -->

  <div class="row">

    <div class="large-6 columns">
    Everything in the first column
    </div>

    <div class="large-6 columns">
    Everything in the right column
    </div>

  </div><!-- end .row -->

</div><!-- end .container-->

Answer 6 · 2014-02-05T01:29:34Z

February 5, 2014 1:29am

Sorry, this was meant to be a comment... ignore this.

Welcome to the Treehouse Community

Looking to learn something new?

Drew Gillett

Drew Gillett

Initial Layout

6 Answers

Joshua Vaage

Joshua Vaage

Drew Gillett

Drew Gillett

Drew Gillett

Drew Gillett

Drew Gillett

Drew Gillett

Joshua Vaage

Joshua Vaage

Drew Gillett

Drew Gillett

Joshua Vaage

Joshua Vaage

Drew Gillett

Drew Gillett

Stephen Snowder

Stephen Snowder

Drew Gillett

Drew Gillett

Stephen Snowder

Stephen Snowder

Joshua Vaage

Joshua Vaage

Drew Gillett

Drew Gillett

Drew Gillett

Drew Gillett

Drew Gillett

Drew Gillett