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 append an icon to an input search?

    How to get an automatic effect of rosace in css ?

    How to dynamically create two rows of squares in html/css/javascript

    How to know from css if a select is opened

    How to get MathJax's HTML output just like Stackedit.io?

    how to change CSS priority (don't use !important)

    jQuery — how to animate a div using height:auto

    JQuery: How to add a CSS class to a HTML button?

    Sub menu wont show when menu item hovered over (css html)

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How to double an image size in HTML using only CSS?

    How to darken a background using CSS?

    How to place a button in the middle of the page using HTML and CSS

    How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

    Showing Div via CSS selector within a UL

    How to persist CSS changes with Chrome Developer Tools

    How to increase the gap between text and underlining on my navbar links

    How to add !important to every element in a CSS file [duplicate]

    How to create this quote box with (preferably) HTML5/CSS3?

    How to slow down the last few frames in a CSS sprite animation?

    CSS accordion menu - How to expand and hyperlink

    How to make jQuery css affect upcoming elements

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    How to set shadow on top of a CSS border?

    How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

    How to have a box increase its size based on its content?

    How to achieve this layout with CSS and div?

    How to make html elements fire effects on other elements using css

    How to apply same CSS property without overriding and multiple times using jquery?

    How do you create a scrolling window over a still background image with CSS?