CODEWITHSUNDEEP
css
Cineno28
Cineno28

Reputation: 909

Page elements moving on window resize

Being new to CSS, I have looked at similar posts on stackoverflow regarding this issue, but none of the resolutions seem to help with my site.

I am using a template for the site and trying to edit the CSS so that the page will maintain one width, and not shift it's elements when the window is resized.

An example page can be found here: (removed link for client)

The content is contained within a wrapper currently set to relative position:

#page_wrapper 
{
    position: relative;
}

I tried to change it to this:

#page_wrapper 
{
min-width: 960px;
}

This doesn't seem to be doing the trick though. When I resize the window, everything still shifts. Any ideas what else I need to change?

Upvotes: 1

Views: 995

Answers (3)

Aviwe
Aviwe

Reputation: 21

your elements are probably moving around because you have them in the same

tag so if you want your elements to hold their positions you need to use a different

for each element and align them to your preference perhaps on css or inside the tag(that's up to you). Otherwise in a div tag if you follow the same procedure

for each element you shouldn't have any problems. That goes for sentences too... you need to make each word in a sentence be in between individual

Upvotes: 0

Shauna
Shauna

Reputation: 9596

There are a few things going on here:

  1. The navigation has float: right on it somewhere. This means that when its width, plus the width of anything it sits next to is wider than its container, it's going to shift so that it can fit.
  2. Your min-width is too narrow If your min-width is 960px, but the width of your navigation, plus the width of your logo (the two elements that sit side by side), plus any margins, paddings, and borders, add up to anything more than 960px, then it's not going to sit in line. You need to either adjust your min-width, or adjust the calculated width of the elements to fit within that 960px minimum. This can be done either by making margins/paddings smaller, decreasing the text size, setting explicit widths, or any combination thereof.

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

Your site is using Twitter Bootstrap: twitter.github.com/bootstrap/

It won't be a totally simple process to do what you want but a starting point would be going to this page:

http://twitter.github.com/bootstrap/customize.html

There you could uncheck the "Responsive" checkboxes and change the Grid System elements to be whsatever you want. It may however be best to leave those as they are.

Then download the css files and replace the ones on your site and see if that helps (ensure you make a back-up of your current files first).

Upvotes: 1

Related Questions