How can keep the 2 div in one line?

Question

I have created a news banner and a button as two separate <div> elements, but I find them in 2 lines.

I want keep them in one line, how to do it?

HTML:

<div id="outer">
    <div>
        <div>
            <div id="newsbar">news bar</div>
            <div id="button"><span role="button"> <input type="button" value="submit"/></div>
        </div>
    </div>
</div>

fiddle.

source at: http://jsfiddle.net/sstong123/ZKKFU/1/ – Harim Oct 29 '13 at 09:51 — Harim, Oct 29 '13 at 09:51
additional:how to set the news align center? – Harim Oct 29 '13 at 09:59 — Harim, Oct 29 '13 at 09:59

Roopendra · Accepted Answer · 2013-10-29T10:02:18.693

1

#newsbar {
    float:left;
    width:400px;
    text-align: center;
}
#button{
    float:left;
}

See Fiddle

edited Oct 29 '13 at 10:02

answered Oct 29 '13 at 09:54

Roopendra

7,674
16
65
92

how to set the news align center? – Harim Oct 29 '13 at 10:02
Yes Harim I have edited my answer. in `newsbar` class you need to add `text-align: center;` see here http://jsfiddle.net/ZKKFU/22/ – Roopendra Oct 29 '13 at 10:06
Yes,I see it,thanks Roopendra. – Harim Oct 29 '13 at 10:07

score 0 · Answer 2 · answered Oct 29 '13 at 09:53

0

Here's the fiddle. Add

float:left

to both the divs. Fiddle

answered Oct 29 '13 at 09:53

Tejas

585
3
15

score 0 · Answer 3 · answered Oct 29 '13 at 09:53

0

Use display:inline-block

Here is the fiddle.

answered Oct 29 '13 at 09:53

codingrose

15,563
11
39
58

score 0 · Answer 4 · answered Oct 29 '13 at 09:54

0

http://jsfiddle.net/ZKKFU/4/

Set the two div's to have style of inline (or inline block as I have opted for in the example above.)

CSS rule below for inline block

#id { display:inline-block; }

answered Oct 29 '13 at 09:54

Idiot211

848
7
17

score 0 · Answer 5 · answered Oct 29 '13 at 09:54

0

Did you research your subject?

 #newsbar
 {
     float:left; 
 }

answered Oct 29 '13 at 09:54

SBD

446
6
17

score 0 · Answer 6 · answered Oct 29 '13 at 09:54

0

Try adding a width for each and then use for the first :

float:left;

and for the second div :

float:right;

answered Oct 29 '13 at 09:54

score 0 · Answer 7 · answered Oct 29 '13 at 09:55

0

try this. Demo

div
{
    display:inline-block;
    float: left;
}

answered Oct 29 '13 at 09:55

SanketS

963
1
13
36

score 0 · Answer 8 · answered Oct 29 '13 at 09:56

0

Use a width where there is space for 2 divs, than use

Float: left;

this will put the divs next to each other, ofcourse you could use any other direction of your choice

answered Oct 29 '13 at 09:56

Krijn van der Burg

5
6

score 0 · Answer 9 · answered Oct 29 '13 at 09:57

Here you go.

http://jsfiddle.net/alaminopu/ZKKFU/15/

HTML:

<div id="outer">
    <div id="news-wrap">
        <div>
            <div id="newsbar"></div>
            <div id="button"><span role="button"> <input type="button" value="submit"/></div>
        </div>
    </div>
</div>

CSS:

#news-wrap{
    overflow:hidden;
}
#newsbar{
    float:left;
    width:200px;
}

score 0 · Answer 10 · answered Oct 29 '13 at 10:01

try this,

<table>
<tr>
<td width="200px" align="center">
<div id="outer">
<div id="newsbar"></div></td>
<td>
<div id="button"><span role="button"> <input type="button" value="submit"/></div></td>
</div>
</tr>
</table>

just make ur div's into a small table..

score 0 · Answer 11 · answered Oct 29 '13 at 10:04

0

    display:inline-block

#div1{float:left}

#div2{float:right}

answered Oct 29 '13 at 10:04

Sridhar R

20,190
6
38
35

score 0 · Answer 12 · answered Oct 29 '13 at 12:09

0

In your css try adding

float: left;

and

display: inline-block;

That should fix it.

answered Oct 29 '13 at 12:09

user2834794

7
2

How can keep the 2 div in one line?

12 Answers12