Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

Help with Alignment

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Help with Alignment

Postby anumohan » Fri Nov 22, 2013 2:48 pm

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.
anumohan
New php-forum User
New php-forum User
 
Posts: 2
Joined: Fri Nov 22, 2013 2:45 pm

Re: Help with Alignment

Postby aksstgsb » Tue Jan 07, 2014 10:38 pm

Yes I too having similar kind of problem in my site. So for that I fixed it with the table <tr><td> tags. But I want to do it without using it. Help us out with it.
aksstgsb
New php-forum User
New php-forum User
 
Posts: 13
Joined: Fri Dec 13, 2013 3:57 am

Re: Help with Alignment

Postby WebOutGateway » Mon Jun 09, 2014 9:14 pm

Hi!

You can add padding in your #Container. The padding will clear an area around your #Container. You can specify the padding of your top, bottom, left and right sides individually:

Code: Select all
padding-top: 100px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 50px;


Or:

Code: Select all
padding: 100px 50px 100px 50px;

which specifies the padding of top, right, bottom, and left respectively.

You can also search other ways on how to specify your padding.
I hope this helps. Thank you.
User avatar
WebOutGateway
New php-forum User
New php-forum User
 
Posts: 35
Joined: Mon Jun 13, 2011 9:25 pm
Location: Pasig City, Philippines


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.