Need an another help in using CSS with PHP File I created a Php File to create Div's (three blue boxes) in the same row of the webpage. but when I zoom the webpage for 3 or 4 times, the boxes go one below another. My Php File is "index.php" <!doctype html> <head> <title>Test</title> <link rel="stylesheet" href="stylesheet.css"/> </head> <body> <div id=”Container” align="center"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html> My CSS File is "Stylesheet.css" #Container{ margin: 0 auto; width: 1200px; } #left{ background-color: blue; height:300px ; width: 100px; display:inline-block; } #center{ background-color: blue; height:300px ; width: 100px; display: inline-block; } #right{ background-color: blue; height:300px ; width: 100px; display: inline-block; } How to make website contents stay in the same row no matter how much we zoom the browser window Please help. Thanks in advance.
Generally speaking you are asking for the opposite of what accessible layout is -- in fact you are asking for the opposite of a responsive layout, the very things sites are supposed to be doing these days? People are going out of their way to strip off columns on smaller displays, and basically making it 'bigger' with zoom is the same thing as running a smaller display. Your code... well, shows flawed sitebuilding methodologies with the fixed widths in pixels pretty much everywhere and on everything, more so with trying to use inline-block instead of floats to build columns; PARTICULARLY since the space between inline-blocks is variable based on the available font and default font-size. The presence of the long deprecated 'align' property and lack of media targets on the CSS LINK also shows outdated methodology -- though I've come to expect decade and a half out of date practices the moment I see a HTML 5 doctype, or as I like to call it "The new transitional". Your entire concept (and therein the question) is "Not viable for web deployment" if you care about accessibility, much less the entire point of making a website using HTML in the first place. Whatever it is you're trying to do with that code, has no business on a website. Sorry if that sounds a bit harsh, but I figured someone should tell you NOW before you continue down that garden path. #container should be semi-fluid (min/max width), elastic (em's so it auto expands/contracts) and ready for targeting with media queries... the content should be dictating the order of left/center/right with whichever one is content going FIRST, using floats to build the columns and media queries to strip the columns off ON PURPOSE when there's not enough room for them, and the side columns should be elastic (again in EM's) with the center one set to auto-fill whatever's left for room. That's called an accessible layout, anything else is pure rubbish. Declaring a fixed width container, much less a 1200px one, is just a steaming pile of /FAIL/ no matter what the dipshits who start out making their alleged "layouts" by dicking around making goofy pictures in photoshop tell you.
friend...i am just a beginer in CSS... so what u mentioned above seems like a rocketscience to me ... I cudnt understand most of it Anyways...can u help me solve the issue I asked for..... hope u ll help....thanks
The translation is: learn CSS and HTML. Or at the very least, type into Google: responsive web design And you will find a lot of tutorials. These will teach you how to make a website viewable at all screen sizes (big or small). Good luck!