Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy [html] [css] Problem with 3 divs and image background

    Hello, I'm new here, so I will introduce myself. I'm Patrick, 22 from Poland. I love coding sites, but as you can see, I have some problems.

    My problem is that I have 3 DIVs, they're already centered (I made one more DIV and put them into it). But I'd like to have left and right column for 100% of height, depends on screen resolution and background of these column to be still (not scrolling).

    In css i wrote: height:100%; and min-height:100%; but it doesn't work (div even doesn't show in browser). When I set height/min-height for example to 500px it shows, but it's about half of my resolution.

    I used also " background-attachment:fixed; " for backgrounds in these columns, but it looks like that images starts on the left of site (and it should start on the left of DIV).

    Below i attach source codes and images with my problem (images are in polish, but it's almost everything I wrote here, I include them to show my problem).

    Images: here

    CSS source:
    Code:
        #strona {
        width:930px;
        min-height:100%;
        background-color:#a3a3a3;
        overflow:auto;
        }
         
        #lewa {
        width:115px;
        height:500px;
        background-image:url(obrazki/lewa.png);
        background-attachment:fixed;
        float:left;
        }
         
        #prawa {
        width:115px;
        min-height:500px;
        background-image:url(obrazki/prawa.png);
        background-attachment:fixed;
        float:left;
        }
         
        #srodek {
        width:700px;
        height:100%;
        background-color:#FFF;
        padding-top:180px;
        position:relative;
        float:left;
        }
    html file:
    Code:
        <div id="strona">
        <div id="lewa"></div>
        <div id="srodek">
        aaaaaaaaaaa<br />
        </div>
        <div id="prawa"></div>
        </div>
    I hope someone will be able to help me.
    Thank you,
    Patrick.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You might need to use the faux column technique, see http://www.alistapart.com/articles/fauxcolumns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you for your reply. I tried that, but it's not that I want get.
    I want to set left and right column to 100% of the window and center column(content) may be higher, but only center column will scroll.

    Any other ideas ?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •