How to set out css properly?


Tags: css,wrapper

Problem :

Hey could someone tell me if this part of my css is right or wrong?

I personally think it is wrong but this is the only way I can place content in the center of the screen, if I replace the 999px with auto everything goes to the left.

If anyone knows how to write it properly that would be great!

I have been making website for quite a while now but I need to learn the right way.

#wrapper {
    width: 999px;
    margin: 0 auto;
}

DEMO



Solution :

If you want that #wrapper stay in the center of your page your code is correct.

You can specify every width you want, but not auto.


If you are looking for Responsive Design, take a look at the @Media Queries

http://googlewebmastercentral.blogspot.co.uk/2012/04/responsive-design-harnessing-power-of.html


Example:

Write your css for normal style, then add:

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Here you can specify different size and style for browser with that min or max size.

A good tool for start using Responsive Design is: Bootstrap


    CSS Howto..

    How to print on a specific paper

    How to create vertical tabs in firefox addon?

    How to make input+label in a form appear one by one?

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How to clear the parent css

    Show only small portion of an image [closed]

    How to create such (see image below) effect using pure HTML JS and CSS?

    How to make a Elastic Vertical Layout?

    how to prevent css div popup from jumping back to the top of the page

    XPath how to find second element with CSS class name

    customize bootstrap widths do not know how

    How to fix specific div's position in CSS

    Using css modules how do I define a global class

    how to transform in both X & Y direction with CSS Only [duplicate]

    How to use Javascript to close css drop down menu on outside click?

    Rich HTML emails in Outlook 2007 and 2010… how do you remove the top margin?

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How to create a CSS shade effect with a faded sidebar

    How to retrieve the background image url defined in CSS?

    How to set select box height in jquery moblie?

    How do i split user inputed text into individual characters?

    How to place the block on the top of “second” screen using CSS?

    CSS(3): How to display elements after each other

    How to create a multiple columns with HTML CSS

    How do I change phpmyadmin font size for sql query box?

    How do I repeat select elements in HTML

    How to build a mobile responsive menu that will always have a 100% height and show all its list items

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How can i see or how do i know where to put the control according to the screen when using css?

    How to build a hover effect with css only, or css+jquery