treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Three DIV column with autosize columns

  • Anxiro
    Permalink to comment #
    Hi there!

    First of all, I'm new and I would like to introduce myself quickly.
    - Frank, 23 and from The Netherlands. :mrgreen:

    After a day or two I'm still stuck at a, maybe, simple CSS problem.
    I have a CSS-box with three columns (the code below) and the center column will be 1000px.
    The left and right column should auto-align, but they don't:


    #container{width:100%;margin: 0px auto;}

    #main {width:100%;}

    #col_Left {float:left;background-position:right; background-color:#F00;}
    #col_Center {width:1000px; float:left; text-align:center;background-color:#FC0;}
    #col_Right {float:left;background-position:left; background-color:#F00;}
    div.clearing {clear:both; display:block; height:15px;}


    The problem is that the Left and Right column don't auto-size with the 100% container.
    I would like to have this fixed if this is possible :oops:

    Example:

    Screensize: 1680px

    Center column: 1000px;

    1680px -1000px (center column) = 680px left.

    So that would be 440px on Left and Right column.

    Any ideas?

    Thanks for any reply!

    - Frank
  • Robskiwarrior
    Permalink to comment #
    wow thats a big centre column - do you have any code up live for us to see?

    Normally you would be looking to develop a site that most people would see... the most used resolutions are 1024x768 - followed by 1280x1024... people going to your site will have issues in viewing the whole page, and would have to scroll left and right... thats not too much of an issue if you make a design feature out of it... but the standard would be to scroll down - and to fit within a 1024px window...

    I mean you could be developing something very bespoke for a certain purpose so tell me to shut up if you are :D

    Anyway - live code is always useful, most people on here use firebug so we can poke code live :)
  • Anxiro
    Permalink to comment #
    Hehe. It's not that big. The whole website will be 1000px wide.
    But because the top of the website has "waves", I want it to keep waving over the whole top. The center of the top will always be in the center.

    Look at the sample.
    The quality is very very low and the effects are removed:
    http://www.re-style.com/tf.jpg
    (edit: the image is resampled in this post)

    The page itselfe will be around 800px wide. The images displayed above will be in Flash. On the left and right of the Flash Object, the waves will continue. That's what I ment.

    I hope you understand a bit more? :oops:
  • Robskiwarrior
    Permalink to comment #
    Ahhh yes I see what you mean now :)

    Although - a live site would be better to pick at if you have one :D

    I love the wavey stars :) looks like an interesting design :D
  • Anxiro
    Permalink to comment #
    Hey there!

    Thanks for the positive comment! I appreciate!

    I guess that's a problem :(. There is not a live-site running, except than on our local webserver. I was just starting and this was the first (and I hope the last) part I got stuck. I can't get the waves to continue.

    Normally you would add a background-image on the webpage and repeat that. But the logo and other buttons should be exact on the wave. That's why I need the left and right column; they autosize with a repeating background and in the middle will be the Flashmovie.

    - Center-column is always 1000px wide. This will be the main website
    - Left and Righcolumn will be 0px wide, except when the screensize is over 1000px.
    - Width:auto won't work. And Display:table-cell won't either :(

    Any clue?

    Thanks!
    - Frank
Add a Comment