2 replies [Last post]
anumohan
anumohan's picture
Offline
newbie
Last seen: 6 years 3 weeks ago
Timezone: GMT+5.5
Joined: 2013-11-22
Posts: 4
Points: 6

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"

Test

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.

anumohan
anumohan's picture
Offline
newbie
Last seen: 6 years 3 weeks ago
Timezone: GMT+5.5
Joined: 2013-11-22
Posts: 4
Points: 6

PHP Code for the

PHP Code for the Same.

<!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>	 

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi anumohan, The container

Hi anumohan,

The container width should be close to the width of the 3 it contains 960px not 1200px.
You can also look into display:inline-block; instead of floating but floating should be fine in this instance.

A good way to work out what is going on is to give the container a background color and the other divs a different one.