div alignment side by side

Question

I have 2 nested divs as

 <div id="header">
   <div id="logo"></div>
   <div id="header_r"></div>
 </div>

The css is

 #header{
      border: 1px solid;
  width: 900px;
  border-radius: 10px;
  min-height: 100px;
  }     
#logo{
    border: 1px solid;
width: 400px;
border-radius: 10px;
min-height: 80px;
float: left;
 }
  #header_r{
    border: 1px solid;
width: 500px;
border-radius: 10px;
min-height: 80px;
float: left;
 }

It gets arranged one below the other. How do I get them side by side?

possible duplicate http://stackoverflow.com/questions/5798400/div-alignment-issue — hallie, Apr 28 '11 at 05:13

score 3 · Answer 1 · answered Apr 28 '11 at 05:12

3

Close the tag on the header-r div

answered Apr 28 '11 at 05:12

Jarrett Widman

6,329
4
23
32

score 2 · Answer 2 · answered Apr 28 '11 at 05:14

2

You need to close the tag on the "header_r" div

<div id="header">
   <div id="logo"></div>
   <div id="header_r"></div>
 </div>

answered Apr 28 '11 at 05:14

locoboy

38,002
70
184
260

score 1 · Accepted Answer · answered Apr 28 '11 at 08:16

1

Reduce width for logo and header_r by 2px each because border is also included in width of an element.

answered Apr 28 '11 at 08:16

Mahima

489
1
5
17

div alignment side by side

3 Answers3