How do I align two boxes next to each other?

Page 1 of 1

9 Replies - 8505 Views - Last Post: 08 April 2011 - 06:18 PM

#1 James15695  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 28-December 10

How do I align two boxes next to each other?

Posted 03 April 2011 - 11:25 AM

Hello,

I am having some problems concerning HTML/CSS border boxes.

I have been trying to get the two border boxes to align on the same line, but I can't figure out how to do it.

Here is my code.

<html>
<head>
    <title>Manage Your Team</title>
    
    <style type="text/css">
        body {
            background-image:url('background.png');
            color:#FFFFFF;
            font-family:Arial;
            padding-top:30px;
        }
        
        #box {
            border:2px solid #FFFFFF;
            background:transparent;
            height:200px;
            width:300px;
            padding:10px;
        }
    </style>
</head>

<body>
    <div align="center">
        <div id="box">Box 1</div>
        <div id="box">Box 2</div>
    </div>
</body>

</html>


Below is a picture of the HTML file, and as you can see, the boxes are aligning underneath each other.

Posted Image

What I want is for the two boxes to be aligned in the center of the page, next to each other.

Any help on how to align these two boxes next to each other would be appreciated.

Thanks.

Is This A Good Question/Topic? 0
  • +

Replies To: How do I align two boxes next to each other?

#2 Ntwiles  Icon User is offline

  • D.I.C Regular

Reputation: 61
  • View blog
  • Posts: 493
  • Joined: 26-May 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:27 AM

You can use relative positioning to do this.To the divs, add the css attribute "float:left". You'll also need to add a div below them with the attribute "clear:both;" to keep the rest of your page looking right.

This post has been edited by Ntwiles: 03 April 2011 - 11:30 AM

Was This Post Helpful? 0
  • +
  • -

#3 James15695  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 28-December 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:31 AM

Thanks for your response. I have done exactly what you said, but the second div is still on the same line, just floated to the left of the page.
Was This Post Helpful? 0
  • +
  • -

#4 Ntwiles  Icon User is offline

  • D.I.C Regular

Reputation: 61
  • View blog
  • Posts: 493
  • Joined: 26-May 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:33 AM

My mistake, you need to add it to both divs, I edited my post too late I guess (:

They will be on the left of the page though. To center them again, you'll have to put both divs inside a wrapper div. Then you can give the wrapper div the following attributes to center it:

margin-left:auto;
margin-right:auto;


The wrapper div will need to have a width matching the total of the width taken up by the divs. Plus a little for padding/borders.

This post has been edited by Ntwiles: 03 April 2011 - 11:50 AM

Was This Post Helpful? 2
  • +
  • -

#5 James15695  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 28-December 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:39 AM

Thank you very much. That worked a treat.

Just one more thing, how do I add a space between the two boxes, as they are tightly squashed together. Thanks :)
Was This Post Helpful? 0
  • +
  • -

#6 Ntwiles  Icon User is offline

  • D.I.C Regular

Reputation: 61
  • View blog
  • Posts: 493
  • Joined: 26-May 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:44 AM

No problem, glad I could help (:

The first thing that would occur to me would be to keep the first div at float:left and change the second one to float:right. Then you could adjust the width of the wrapper to adjust the space between them. Someone may be able to give you a better way to do this though.

Edit: I noticed you already had a sort of wrapper div in your code (the one with the align=center). To be clear, you can use that as your wrapper div; you don't need another one. The HTML align=center attribute should be avoided though. Use the margin centering method I showed you instead.

This post has been edited by Ntwiles: 03 April 2011 - 11:47 AM

Was This Post Helpful? 1
  • +
  • -

#7 James15695  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 28-December 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:46 AM

Yeah, that worked great too thanks :)

I don't think there would be a better way to do it :)

Thank you for all your help.
Was This Post Helpful? 0
  • +
  • -

#8 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:48 AM

The two divs Must be in the width boundaries of you webpage (Say you have a webpage of 1000px width this will work


Here is an example i made , go test it out on W3scools editor :)

e.g 

<html>
<head>
<style>
.container 
{
width:1000px;
height:800px;
border:2px groove black;
}
.tempLeft
{
width:488px;
height:200px;
float:left;
border:2px solid green;
}
.tempRight
{
width:488px;
height:200px;
float:right;
border:2px solid blue;
}
</style>
</head>
<body>
<div class="container"><div class="tempLeft"></div><div class="tempRight"></div></div>

</body>
</html>




This might give you the idea...


What i mean to say is you cant put 2 divs with the total width of 1000+ px in a div with 1000px width set , else it will also not work.

Greetings

Marinus

This post has been edited by marinus: 03 April 2011 - 11:50 AM

Was This Post Helpful? 1
  • +
  • -

#9 James15695  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 28-December 10

Re: How do I align two boxes next to each other?

Posted 03 April 2011 - 11:50 AM

Ok that's great, thank you.

Thanks for your help too Marinus. Greatly appreciated.
Was This Post Helpful? 0
  • +
  • -

#10 GhandiJones  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 54
  • View blog
  • Posts: 174
  • Joined: 17-March 11

Re: How do I align two boxes next to each other?

Posted 08 April 2011 - 06:18 PM

Also, you can skip the margin-left/margin-right by just using 
margin:0 auto;

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1