Help with 2 column site layout

[hernanmj]

Hi everyone!

I’m trying to build a very basic web site using a sample I found on the internet. The goal is to build a “wishlist” where people can vote the best gifts from a list, giving the user an idea of what to buy.

I would like to create a 2 column layout, having a top bar with the logo and title of the page, the list of gifts as a sidebar to the left and a main column where the details of the gift are displayed (currently under development). I’m having issues with CSS, a friend told me to use “float layout” but my current HTML code is awful and I’m having trouble to define the 2 columns.

I’ve deployed the sample site here: http://myazuregifthmeydac.cloudapp.net/

Here is the HTML code for the index.html page

    <div id='wrapper'>
        <article>
            <header>
                <div class="titles">
                    <h2>Windows Azure</h2>
                    <h1>Christmas Experience</h1>
                </div>
                <img class="tree-logo" src="/Christmas-Tree-BlancoNaranja.png">
            </header>

            <ul id='gifts'></ul>
            <p id='summary'>Loading...</p>
        </article>
    </div>

And here is the main CSS classes for the current layout:

    wrapper { max-width: 800px; margin: auto; padding: 20px; position: absolute; top: 0; left: 0; }

    article { background-color: white; box-shadow: 0 0 12px rgba(0, 0, 0, 0.75); border-radius: 10px; }

    header { background-color: #1aad2d; padding: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; height: 218px; }

    header h1 {
    text-transform: uppercase;
    font-weight: bolder;
    color: #e86d0c;
    font-size: 40px;
}

    header h2 {
    text-transform: uppercase;
    font-weight: bolder;
    color: white;
    font-size: 50px;
}    


    /* List of items */ gifts li { list-style-type: none; padding: 0px 70px 0px 90px; border-bottom: 1px solid #dadada; overflow: hidden; clear: both; position: relative; min-height: 90px; }

[Paulie_D]

Can you link the sample site you found?

To be honest…at the moment, I think you may be going about this the wrong way.

[hernanmj]

Actually the sample comes with the Azure Mobile Services site, they have some templates for Web, iPhone, Windows Store, etc.

This is the tutorial I followed to download the sample app, then I tweaked it to read data from a table.

http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-html/

Yeah, so far I think it’s better to redo my entire html. In the other forum they told me to go to http://learnlayout.com/ first and practice a little bit.

I’ll give it a try and update the site. Thanks!

[Paulie_D]

Here’s something I knocked out when I had a few minutes this afternoon.

http://codepen.io/Paulie-D/pen/nkLAv

[hernanmj]

Thanks Paulie for your time! Looks much nicer.

I followed the tutorial (http://learnlayout.com) and a friend gave me a hand with some styles. I came up with this: http://myazuregifthmeydac.cloudapp.net/

I’ll get better pics for the wishlist.

Again, thanks for the help!

[Author]

Posts