3div's each move below each other wheen scrolling website

Discussion in 'CSS' started by cameleon, Mar 29, 2010.

  1. #1
    Can you tell me how to make "centered" and "prawo" div's not falling under each other wheen resizing website ?. Wheen i did centered div width to % not px; size it seems to help, but since i need centered div as an static size i would need to have it defined.

    
    
    CSS CODE
    
    html, body {
       height: auto;
       margin: 0;
       padding: 0;   
    }
    
    div.container
    {
       height: auto;
       min-height:100%;
       width: 100%;
       clear:both;
       overflow:hidden;
       margin-top: 0px;
       margin-bottom: 0px;   
       margin-left: 0px;      
       margin-right: 0px;         
       padding: 0;   
    }
    
    div.lewo
    {
       float: left;
       height: 100%;
       width: 18.5%;
       margin-top: 0px;
       margin-bottom: 0px;   
       margin-left: 0px;      
       margin-right: 0px;   
       padding: 0;
          border: solid 1px #000000;
    }
    
    div.prawo
    {
       float: left;
       height: 100%;
       width: 18.5%;
       margin-top: 0px;
       margin-bottom: 0px;   
       margin-left: 0px;      
       margin-right: 0px;         
       padding: 0;
          border: solid 1px #000000;
    }
    
    div.centered
    {      
       float: left;
       height: 100%;
       width: 300px;
       margin-top: 0px;
       margin-bottom: 0px;   
       margin-left: 0px;      
       margin-right: 0px;         
       padding: 0;
       border: solid 1px #000000;
    }
    
    
    HTML CODE
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
       <div class="container">
         <div class="lewo">LEFT</div>
         <div class="centered">
         
        <div>CENTER</div>
     
         
         </div>
        
         <div class="prawo">RIGHT</div>
         </div>
         </body>
         </html>
    Code (markup):
     
    cameleon, Mar 29, 2010 IP
  2. jamessy

    jamessy Peon

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Have you tried giving your container class a fixed width?
     
    jamessy, Mar 29, 2010 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    1) try not using a broken/incomplete doctype.

    2) You may want to actually CLOSE all your div... or are they... You might want to try some formatting that makes actual sense.

    3) Scrolling shouldn't effect their position - do you mean resizing the page? If so, then DUH. You aren't doing anything with .container that warrants a wrapping div that you couldn't do on body, and you are using percentage widths alongside a fixed width - of course it's going to break. As a rule of thumb, % + WIDTH == MISERABLE *** /FAIL/. Especially with firefux being retarded about rounding off percentages.

    4) That inner div there just because you could add code or something?

    Not sure what you are trying to accomplish for a layout, though I can say with a degree of certainty whatever it is, it isn't going to work.
     
    deathshadow, Mar 30, 2010 IP
  4. cameleon

    cameleon Greenhorn

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    well, theres an example: www(.)strefacafe(.)pl/index.html

    in FF on 1280x1024 i got LEFT CENTER AND RIGHT in one line, wheen i scrool webrowser window to for example 1024x768 i get LEFT below CENTER and RIGHT under. I need to have like this. Wheen scrooling browser left need to scrool % till 0%, center need to stay the same, right need to have 300px; weight if it has more it need to decreases till 300px; - all divs need to be in one line, no one under another.

    doctype, cant use bcoz center div will have some fancy table and doctype is breaking it.
    sorry for my english :p
     
    cameleon, Mar 30, 2010 IP
  5. cameleon

    cameleon Greenhorn

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Ok i just did it :)
     
    cameleon, Mar 30, 2010 IP