CSS Margins And Different Screen Size

Discussion in 'CSS' started by saadi123, Jun 24, 2010.

0
  1. #1
    I have some questions about this code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">

    body {
    background-image: url('stained_paper.jpg'); /*#F0F8FF;*/
    width: 100%;
    margin: 0 auto;
    padding: 0;
    }

    #wrap {
    position: relative;
    margin: 0px auto;
    padding: 1px;
    }

    h1 {
    font-family: "Times New Roman";
    color: #cccccc;
    font-size: 35px;
    text-shadow:0 1px 0 #fff, 0 -1px 0 #000;
    margin-left: 30px;
    }


    #main_content {
    position: relative;
    float: left;
    background-color: #fff;
    border: 1px solid white;
    width: 53%;
    margin: 20px 0 20px 50px;
    padding: 1px;
    }

    html>body #main_content {
    margin-left: 98px;
    }

    #side_bar {
    position: relative;
    float: right;
    background-color: #FEF0DB;
    width: 25%;
    border: 1px solid #F4A460;
    margin: 20px 105px 20px 0;
    padding: 1px;
    }

    html>body #side_bar {
    position: relative;
    float: right;
    background-color: #FEF0DB;
    width: 29%;
    border: 1px solid #F4A460;
    margin: 20px 110px 20px 0;
    padding: 1px;
    }

    .clear {
    clear: both;
    }

    #footer {
    float: left;
    position: relative;
    width: 100%;
    margin: -22px 5px 0 -9px;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid black;
    }

    p {
    margin-left: 5px;
    padding: 2px;
    }

    </style>
    </head>

    <body>

    <h1>My Blog</h1>


    <div id="wrap">
    <div id="main_content"><p>The quick brown fox jumps over the lazy dog</p></div>

    <div id="side_bar">
    <script>
    var divHeight = document.getElementById('main_content').offsetHeight;
    divHeight = divHeight - 3;
    document.getElementById('side_bar').style.height = divHeight + 'px';
    </script>

    <p>The quick brown fox jumps over the lazy dog</p>
    </div>

    <div id="footer">
    <p>The Quick Brown Fox Jumps Over The Lazy Dog</p>
    </div>

    </div>


    <div class="clear"></div>




    </body>

    </html>



    Everything's OK but when I change the size of the browser window, the #side_bar and the #main_content change their positions. I want them to remain at the same place and adjust no matter what the size of the screen is.

    Any tip(s)?
     
    saadi123, Jun 24, 2010 IP
  2. riaviente

    riaviente Member

    Messages:
    164
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    48
    #2
    I am sorry. I am not really familiar with CSS. I use it sometimes, but I have not encountered a case like yours. Had you tried to search Google for an answer? Everything is there. Good luck saadi123. :)
     
    riaviente, Jun 24, 2010 IP
  3. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    Yeah I tried t search from the web. Got some people with the same problem, but the solutions recommended to them are not working for me.

    :-(
     
    saadi123, Jun 25, 2010 IP
  4. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #4
    So isn't there any body?????
     
    saadi123, Jun 25, 2010 IP
  5. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #5
    do you want them next to each other or centered? Not sure what you're trying to accomplish
     
    AtSeaDesign, Jun 25, 2010 IP
  6. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #6
    Next to each other.
    When the window is full sized, they both are next to each other but as the screen size is reduced, the side bar while being on the right, crawls under the main_content area.
    I don't want this to happen.

    I hope that clears it..!!!
     
    saadi123, Jun 25, 2010 IP
  7. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #7
    Hey!!!
    I figured it out. First have a look at the code.

    body {
    background-image: url('stained_paper.jpg'); /*#F0F8FF;*/
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: auto;
    }


    h1 {
    font-family: "Times New Roman";
    color: #cccccc;
    font-size: 35px;
    text-shadow:0 1px 0 #fff, 0 -1px 0 #000;
    margin-left: 30px;
    }


    #main_content {
    position: relative;
    float: left;
    background-color: #fff;
    border: 1px solid white;
    min-width: 670px;
    margin: 20px 0 0 50px;
    padding: 1px;
    overflow: hidden;
    }

    html>body #main_content {
    margin-left: 100px;
    }

    #side_bar {
    position: absolute;
    float: right;
    background-color: #FEF0DB;
    min-width: 370px;
    border: 1px solid #F4A460;
    margin: 20px 20px 0 750px;
    padding: 1px;
    overflow: hidden;
    }

    html>body #side_bar {
    position: absolute;
    float: right;
    background-color: #FEF0DB;
    min-width: 370px;
    border: 1px solid #F4A460;
    margin: 20px 20px 0 750px;
    padding: 1px;
    overflow: hidden;
    }

    .clear {
    clear: both;
    }

    #footer {

    position: relative;
    width: 1260px;
    margin: 0 0 0 0;
    padding: 5px;
    background-color: #ffffff;
    border: 1px solid black;
    overflow: hidden;
    }

    p {
    margin-left: 5px;
    padding: 2px;
    }

    The main problem was that I was positioning the side_bar "relatively". I just changed position, from relative to absolute and provided the margin so that it is absolutely positioned according to the co-ordinates/margins I've provided.

    Secondly, since the div size was also varying to accomodate the material in it when the screen size was being changed, I set the minimum widths of both main_content and side_bar to 670px and 370px respectively using the command "min-width"

    The rest of the other amendments are not related to my problem and are made to make the basic template structure more acceptable.

    In the end, I really learned a lot during this whole issue. If any one is facing the same problem, I think this thread can be helpful...

    :)
     
    saadi123, Jun 26, 2010 IP