MyBB Community Forums

I have two questions.

How do I prevent my divs to move all over the place when I resize my browser?







How can I make my forum keep its width in big screens, for example in a big screen it looks like this (not the images or text, just the width):



I want it to look like this on bigger screens and rest just background.



Thanks in advanced and sorry for posting too many big images :/

you need to change container width to fixed px instead of %

If you want the divs to stop moving about and set a fluid width then you can set a max width and min-width on the container (in pixels)

I have my board set to fluid with a min and max width. Ideally, to have a truly responsive site you could use alternate style sheets for the expected screen size.

http://www.alistapart.com/articles/respo...eb-design/

(2012-05-09, 08:54 PM)brad-t Wrote: [ -> ]you need to change container width to fixed px instead of %

Thanks I completetly forgot about this.

(2012-05-09, 09:06 PM)Leefish Wrote: [ -> ]If you want the divs to stop moving about and set a fluid width then you can set a max width and min-width on the container (in pixels)

I have my board set to fluid with a min and max width. Ideally, to have a truly responsive site you could use alternate style sheets for the expected screen size.

http://www.alistapart.com/articles/respo...eb-design/

I didn't know about max and min width. So does that mean I have to set all my divs into a big container?

It should already be contained within a container class?

Sorry to be unclear - it is the same div that Brad is referring to. You can set a fixed width - that is easiest.

The min-width is used to stop the page divs folding up under a certain screensize if you have a fluid width on the container div (that is, set in percentages) and the max-width stops your forum from becoming absurdly wide on BIG screens.

(2012-05-10, 02:23 AM)brad-t Wrote: [ -> ]It should already be contained within a container class?

Well just the everything underneath the header. I tried wrapping the index with a new container div and it seems to work just for the header, even though the right side looks bad when resizing it. For the forum container (Underneath the header) I added max an min width and seems to make the width wider for some reason.

Edit: LeeFish I just added the CSS I'd appreciate if you can inspect the elements really quick to see what is wrong. Thank you so much for the help this has been bugging me for a while now.
Edit2: Wow this is wierd... it's only making changes on google chrome.

Well, I can look, but you should have a container div in your css anyway. Site link?

(2012-05-10, 03:20 AM)Leefish Wrote: [ -> ]Well, I can look, but you should have a container div in your css anyway. Site link?

bobbaxtrade.com thanks man I really appriciate it. I tried adding min and max width on my container, but didn't work at all might be becouse I'm using % for the width?

I took a look. The header and the welcome panel are outside your #container div, so of course changing the width properties of the div will not affect them. You need to set a fixed width in the container and work up the HTML to make it match.