Need a help in using CSS with PHP File I created a Php File to create Div's (three blue boxes) and I want to align the boxes to the centre of the browser in a same row. My Php File is "index.php" <!doctype html> <head> <title>Test</title> <link rel="stylesheet" href="stylesheet.css"/> </head> <body> <div id=”Container”> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html> My CSS File is "Stylesheet.css" #Container{ margin: auto; width: 1200px; } #left{ background-color: blue; height:300px ; width: 300px; float:left; margin-right: 10px; margin-left: 10px; } #center{ background-color: blue; height:300px ; width: 300px; float:left; margin-right: 10px; margin-left: 10px; } #right{ background-color: blue; height:300px ; width: 300px; float:left; margin-right: 10px; margin-left: 10px; } I have tried to remove "float: left;", but then boxes are coming one by one in the next row, I mean not in the same row. Please help. I want to know how to align it in the same row to the centre of the website. Thanks in advance.
<!doctype html> <head> <title>Test</title> <style> #Container{ margin: auto; width: 1200px; } #left{ background-color: blue; height:300px ; width: 300px; margin: 0 auto; } #center{ background-color: blue; height:300px ; width: 300px; margin: 0 auto; } #right{ background-color: blue; height:300px ; width: 300px; margin: 0 auto; } </style></head> <body> <div id=”Container”> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html> Try this and see if this is what you're looking for.
No dear... Now its coming one below the next.. thats not what i want I want all of them in the same row but three of them should be centrally aligned to the brower... now its aligned to the left of the browser
No url... I am trying from localhost I will explian in here.... suppose 3 blue boxes from my code are [] Now its coming left aligned in browser like [] [] [] but I want it aligned exactly in centre like [] [] []
<!doctype html> <head> <title>Test</title> <link rel="stylesheet" href="stylesheet.css"/> <style> #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; } </style> </head> <body> <div id=”Container” align="center"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html> Here's what you're looking for I believe
Hey Again.... I more help from the same code if we zoom the browser winder 3 or 4 times the third box comes to the next row... cant we stop it anyhow? is there anyway for it... I mean how much times u zoom three boxes should be in the same row.... pls reply if u have time
To the container, add {white-space: nowrap;} Code (markup): Then to the boxes you have to unset the nowrap value like so {white-space: normal;} Code (markup): cheers, gary
Since you are operating in an inaccessible mess of fixed width garbage, don't use auto-centering, float them, and put margin-left:130px on #left and 20px on all of them the opposite side. (I'm assuming you want 20px between them... you want 10px between them set 10px on all and 140px left on #left) #Container{ margin:0 auto; width:1200px; } #left, #right, #center { float:left; display:inline; /* prevent IE margin doubling */ height:300px ; width: 300px; margin-right:20px; background-color: blue; } #left { margin-left:130px; /* left margin == (1200 - (300 * 3 + 20 * 2) / 2 */ } Code (markup): Just stacks them up. though as I tried to tell you in your other thread, you have NO business on a website declaring a fixed px width outer container, or fixing the width of all three elements inside it... or fixing the height of any of those elements if you care about people actually using the site. NONE of this has ANY business on the vast majority of websites and on the whole reeks of bad design practices. BUT if you insist on having this broken asshattery, that's the code to use. Sometimes you just can't make things automatic... and if you're not using auto-adjusting width with auto-adjusting columns like you are supposed to there's no reason to even try.