Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Question about rezising browser!

I was just wondering, how do you make so your website stays fixed, when rezising the browser,

like twitter, when you resize it, you get scrollbars on the left and bottom and all the elements are fixed, and doesnt shrink down as the browser becomes smaller.

do you guys have any idea?

// erdrag

jonathankavalos
jonathankavalos
3,523 Points

A good way to center a "fixed" element would be to make a "center" element as fixed and with 100% width, and everything in it will be in the center of the 100% width "center".

The CSS:

#center{
    position:fixed;
    width: 100%; //this basically stretches all over the window as fixed
}

The HTML: 

<html><head></head>
<body>
    <center id='center'>
        ...elements
    </center>
</body></html>

You can create a centered div element to hold your design and leave the margins to be fluid.

1 Answer

Baruch Velez
Baruch Velez
275 Points

If you have % on your widths it will resize according to the browser size, now if you want it to stay a fixed width or height just add a width: or height: in your CSS.

Example

div{
width:500px;
}

This will make that div 500px regardless of browser size. Now you can also set a min and max width/height and this will make it shrink or expand until that size is reached and then stop. So for example, if the browser is 300px and the min-width is 500px then the div will be 500px but if the browser is scaled up, the div will scale up in size too until reached a max-width/height (if set).

Example

div{
max-width:1024px;
min-width:512px;
}

This will make the div not grow larger than 1024px and won't shrink smaller than 512px

Edit--

In a more advanced CSS, you can set the child's width to be relative to the parent. So if the parent is 1000px wide, the child can be 60% wide making it 600px (yay math) and the child won't resize lower than that since the parent won't resize either.

However, if you want to have a mobile-ready layout best thing to do is have % in your width and have your main container with a max-width. This will allow the layout to be visible in all browser sizes by just changing some CSS media queries (a bit more advance).

In your twitter example, they can have a fixed width on their computer layout cause they have a mobile layout as well and they also have a mobile APP for their website, same thing goes to facebook and many other social media apps.

Hope this helps.

Cheers