how to align div's side by side in the center of web page

how do i align the 3 divs in the center of the page?

thanks


<html>
<head>
      <title>Untitled</title>
   
      <style type="text/css">
            #h1   {width:200px; text-align:center; float:left}
            #h2   {width:200px; text-align:center; float:left}
            #h3   {width:200px; text-align:center; float:left}
      </style>

</head>

<body>

		<div align="center" style="background-color: #E7EFEF">
		<div id="h1">hello 1<br>
		</div>
		<div id="h2">hello 2<br>
		</div>
		<div id="h3">hello 3</div>
		
		<br>

		</div>
</body>
</html>

Open in new window

webdottAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
HagayMandelConnect With a Mentor Commented:
If by center of the page you men horizontally centered, then this is it:
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#h1   {width:200px; text-align:center; display: inline;}
#h2   {width:200px; text-align:center; display: inline;}
#h3   {width:200px; text-align:center; display: inline;}
#wrapper {clear: both; margin-right: auto; margin-left: auto; width: 100%;}
</style>
</head>
<body>
      <div align="center" id="wrapper">
      <div id="h1">hello 1</div>
      <div id="h2">hello 2</div>
      <div id="h3">hello 3</div>
      </div>
</body>
</html>
0
 
Anil GolamariCommented:
div#container
{
      margin-left: auto;
      margin-right: auto;
      
}
0
 
Anil GolamariCommented:
<style type="text/css">
            #h1   {width:200px; text-align:center;  margin-left:auto; margin-right:auto }
            #h2   {width:200px; text-align:center;  margin-left:auto; margin-right:auto}
            #h3   {width:200px; text-align:center;  margin-left:auto; margin-right:auto}
      </style>

Try this.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
webdottAuthor Commented:
i tried this;



      Untitled
   
     





            
            hello 1

            
            hello 2

            
            hello 3
            
            


            



it aligned in the center, but it aligned them on top of each other rather than side-by-side
0
 
webdottAuthor Commented:
sorry - that did not include the divs
<html>
<head>
      <title>Untitled</title>
   
      <style type="text/css">
      		#container	 {margin-left:auto; margin-right:auto }
            #h1   		 {width:200px; text-align:center; margin-left:auto; margin-right:auto }
            #h2  		 {width:200px; text-align:center; margin-left:auto; margin-right:auto }
            #h3  		 {width:200px; text-align:center; margin-left:auto; margin-right:auto }
      </style>

</head>

<body>

		<div style="background-color: #E7EFEF" id="container">
		<div id="h1">hello 1<br>
		</div>
		<div id="h2">hello 2<br>
		</div>
		<div id="h3">hello 3</div>
		
		<br>

		</div>
</body>
</html>

Open in new window

0
 
Anil GolamariCommented:
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">        
        #LeftBox
        {
            float: left;
            width: 300px;
        }
        #RightBox
        {          
           
            margin: -5px 0 0 0; /* positions the box next to the other. This will have to be adjusted depending on the LeftBox.*/
        }
        #ThirdBox
        {
              float: right;
           
            margin: -40px 0 0 0;
        }
    </style>
</head>
<body>
    <div id="LeftBox">
        <p>
             hello 1</p>
    </div>
    <div id="RighBox">
        <p>
             hello 2</p>
    </div>
    <div id="ThirdBox">
    <p>
           hello 3</p>
    </div>    
</body>
</html>

This should fix it.
0
 
webdottAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.