CODEWITHSUNDEEP
htmlcss
Wp3Dev
Wp3Dev

Reputation: 2079

Keeping all my divs fixed, regardless of browser window size

So I am pretty new to web design/development and have been working on a simple website that doesn't do much, just to get the hang of it. I made a webpage look pretty good when my Browser is at max screen but when I shrink the window all my divs and everything shifts around and all of a sudden it looks like a total mess. How would I make this not happen.

Here is the code just in case... It probably looks like a mess to the experienced but here it is anyway:

THE STYLE.CSS FILE

   body{
    background-image:   url(Images/background.gif);
    background-repeat:repeat-x;
    background-size: cover;
    }
    .topBar{
    width: 100%;
    top: 0;
    height: 50px;
    position: fixed;
    right: 0;
    -webkit-box-shadow: 0px 0px 8px 0px #000;

    background-image:url(Images/topBar2.gif);
    }
    #logoImage{
    float: left;
    width: 180px;
    height: 50px;
    top: 0;
    margin-left: 380px;
    background-image: url(Images/images/topBar_02.gif);

    }

    .topBar h1{
    float: left;
    margin-left: 400px;
    color: white;
    top: 0;
    font-family: Tahoma, Geneva, sans-serif;
    text-align:justify;
    text-shadow: -1px -1px 1px #000;

    }
    .logoImage {
    top: 0;
    float: left;
    margin-left: 100px;
    }
    #btn{
    cursor:pointer;
    border-radius: 4px;
    border: 1px solid #039;
    font: 16px bold  Tahoma, Geneva, sans-serif;
    color: white;

    background-color: #0499ff;

    padding 4px;


    }
    .searchBox {
    float: right;
    margin-top: 7px;

    padding-right: 500px;


    }
    .searchBox input{
    border-radius: 5px;
    padding:4px;

    color:#666;
    font:  "Times New Roman", Times, serif;

    }

    .topBar img{
    width: 40px;
    height:20px;
    margin: 20px;
    margin-left: 400px;
    }
    .mainLogin{
    border: 1px solid  #999;
    border-radius: 6px;
    width: 300px;
    height: 100px;
    margin-top: 300px;
    float: right;
    margin-right: 500px;
    position: fixed;
    background-image:url(Images/login_back2.gif);
    padding: 20px;



    }
   .mainLogin input{
    border-radius: 5px;
    padding: 4px;

    }
    .username{
    width: 300px;

    }
    #rmbrme{
    float:right;
    color: #999;
    text-shadow:-.3px -.3px .3px #000;
    margin-right: 110px;
    margin-top: 3px;
    font: 10px Georgia, "Times New Roman", Times, serif;

    }
    #rmbrme a{
    text-decoration: none;
    color: #999;
    text-shadow: -.3px -.3px .3px #000;
    }

Upvotes: 1

Views: 6101

Answers (4)

Sakthivel
Sakthivel

Reputation: 1938

Using float:left and float:right isn't a better way. I guess position:fixed tag and float tag are messing with your site.

Use seperate alignment classes like:

.leftalign
 { 
   float:left;
   position:static;
 }

Upvotes: 0

Hussain Akhtar Wahid 'Ghouri'
Hussain Akhtar Wahid 'Ghouri'

Reputation: 6617

i would suggest simply make ur outmost div to have position attribute as relative

style="position:relative"

then simply position the rest inner elements accordingly , i hope your prob will be fixed

Upvotes: 1

Achint
Achint

Reputation: 817

Well, I'm new to web dev as well, you can use an outercontainer that would fix the size of your 'view window', so that on resizing of the browser, all your divs would remain fixed, and scroll bars would appear to show all of the data.

For example, you can try something like:

<body>
     <div class="outercontainer">
           <div class="innercontainer">
            Do all you stuff here
           </div>
     </div>
</body>

and in the css sheet:

.outercontainer{
      height:100%;
      width:100%
}
.innercontainer{
      height:800px;
      width:1200px
}

Or something like that.

Upvotes: 0

Gal Margalit
Gal Margalit

Reputation: 5844


Responsive design, Media Queries & Fluid layouts are what you're after (:

CSS: Align an element based on screen size

Upvotes: 2

Related Questions