The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with 2 column site layout

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #157721

    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:

    Here is the HTML code for the index.html page

        <div id='wrapper'>
                    <div class="titles">
                        <h2>Windows Azure</h2>
                        <h1>Christmas Experience</h1>
                    <img class="tree-logo" src="/Christmas-Tree-BlancoNaranja.png">
                <ul id='gifts'></ul>
                <p id='summary'>Loading...</p>

    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; }

    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.


    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.

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

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


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


    Thanks Paulie for your time! Looks much nicer.

    I followed the tutorial ( and a friend gave me a hand with some styles. I came up with this:

    I’ll get better pics for the wishlist.

    Again, thanks for the help!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.