Grow your CSS skills. Land your dream job.

Three DIV column with autosize columns

  • # January 5, 2009 at 9:52 am

    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:

    Code:
    #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:

    Quote:
    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

    Rob
    # January 5, 2009 at 10:00 am

    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 1024×768 – followed by 1280×1024… 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 :)

    # January 5, 2009 at 10:13 am

    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:
    [img]http://www.re-style.com/tf.jpg[/img]
    (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:

    Rob
    # January 5, 2009 at 11:03 am

    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

    # January 6, 2009 at 4:15 am

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".