Two div blocks on same line

Question

How to center on the same "line" two div blocks?

First div:

<div id=bloc1><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>

Second div:

<div id=bloc2><img src="..."></div>

You can also use ```display : table-cell;``` and add line break where you want using ```
``` — specdrake, Aug 01 '20 at 06:59
Related post - [Align
elements side by side](https://stackoverflow.com/q/4938716/465053) — RBT, Aug 14 '21 at 08:19

MrCode · Accepted Answer · 2022-09-01T07:41:09.507

115

CSS:

#block_container
{
    text-align:center;
}
#bloc1, #bloc2
{
    display:inline;
}

HTML

<div id="block_container">

    <div id="bloc1"><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>  
    <div id="bloc2"><img src="..."></div>

</div>

Also, you shouldn't put raw content into <div>'s, use an appropriate tag such as <p> or <span>.

Edit: Here is a jsFiddle demo.

edited Sep 01 '22 at 07:41

answered May 04 '12 at 15:14

MrCode

63,975
10
90
112

1

The image is in the middle ... the text is after and right aligned – Bertaud May 04 '12 at 15:37
@Bertaud then you must have some other CSS/HTML interfering because the above works. See my jsFiddle demo. – MrCode May 04 '12 at 15:50
I think you are right :-( Do you know how to validate the whole html page ? – Bertaud May 04 '12 at 16:01
Gildor's answer is prefereable, because it also works with nested
tags using display:inline-block;.
– j.c Sep 08 '16 at 14:24
I want to center `bloc1` and align `bloc2` to the right while keeping them on the same line. How can this be done? – Cardinal System Nov 19 '17 at 18:46

Super User · Answer 2 · 2017-04-18T06:14:19.567

You can do this in many way.

Using display: flex

#block_container {
    display: flex;
    justify-content: center;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

Using display: inline-block

#block_container {
    text-align: center;
}
#block_container > div {
    display: inline-block;
    vertical-align: middle;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

using table

<div>
    <table align="center">
        <tr>
            <td>
                <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
            </td>
            <td>
                <div id="bloc2"><img src="..."></div>
            </td>
        </tr>
    </table>
</div>

Simone S. · Answer 3 · 2022-11-30T15:29:53.080

I think now, the best practice is use display: inline-block;

look like this demo:

div {
  width: 40%;
  padding: 20px;
  display: inline-block;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

EDIT (02/2021):

Best practice now may be to using display: flex; flex-wrap: wrap; on div container and flex-basis: XX%; on div

look like this demo:

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

div {
  flex-basis: 45%;
  margin-top: 20px;
}

<body>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</body>

Thank you!! This is a better answer than the accepted one, because it works for nested
s too! — j.c, Sep 08 '16 at 14:21
this is best answer than accepted coz inline-block cover margin too — Ismail Farooq, Apr 18 '17 at 07:30
nope! as soon as you make uneven widths this fails to work : https://jsfiddle.net/L8rkqzd2/ — tatsu, Aug 21 '17 at 13:41
@tatsu It's true! With uneven widths, unfortunately, you need to lock same height too. Look if this solve your problem: https://jsfiddle.net/0a7x3oya/1/ — Simone S., Jan 17 '18 at 11:12

score 11 · Answer 4 · answered Jan 15 '14 at 14:34

11

You can use a HTML table:

<table>
<tr>
<td>
<div id="bloc1">your content</div>
</td>
<td>
<div id="bloc2">your content</div>
</td>
</tr>
</table>

answered Jan 15 '14 at 14:34

user3198580

121
1
4

score 5 · Answer 5 · answered May 04 '12 at 15:12

5

Try an HTML table or use the following CSS :

<div id="bloc1" style="float:left">...</div>
<div id="bloc2">...</div>

(or use an HTML table)

answered May 04 '12 at 15:12

adrien

4,399
26
26

2

Tables are for tabular data... not for presentation. – Ben Everard May 04 '12 at 15:17
3

html table are also a way to present data. huh? – devasia2112 May 12 '14 at 21:05
afterwards might want to reset formatting by `
`
– Neil Feb 11 '17 at 07:39

score 3 · Answer 6 · answered Apr 15 '17 at 19:07

diplay:flex; is another alternative answer that you can add to all above answers which is supported in all modern browsers.

#block_container {
  display: flex;
  justify-content: center;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

Lakindu Gunasekara · Answer 7 · 2017-04-19T16:21:06.647

1

HTML File

 <div id="container">
      <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
      <div id="bloc2"><img src="..."></div>
    </div>

CSS File

 #container
    {
        text-align:center;
    }
    #bloc1, #bloc2
    {
        display:inline;
    }

edited Apr 19 '17 at 16:21

answered Apr 19 '17 at 14:52

Lakindu Gunasekara

4,221
4
27
41

score 0 · Answer 8 · answered May 04 '12 at 15:15

0

What I would first is make the following CSS code:

#bloc1 {
   float: left
}

This will make #bloc2 be inline with #bloc1.

To make it central, I would add #bloc1 and #bloc2 in a separate div. For example:

<style type="text/css">
    #wrapper { margin: 0 auto; }
</style>
<div id="wrapper">
    <div id="bloc1"> ... </div>
    <div id="bloc2"> ... </div>
</div>

answered May 04 '12 at 15:15

Mark Smith

315
2
10

that doesn't work: bloc1 is on right, bloc2 is on another line ! – Bertaud May 04 '12 at 15:28

score 0 · Answer 9 · answered Sep 14 '15 at 21:30

Use a table inside a div.

<div>
   <table style='margin-left: auto; margin-right: auto'>
        <tr>
           <td>
              <div>Your content </div>
           </td>
           <td>
              <div>Your content </div>
           </td>
        </tr>
   </table>
</div>

score 0 · Answer 10 · edited Apr 18 '17 at 21:01

0

Use below Css:

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

It will make the mentioned 2 divs in the center on the same line.

edited Apr 18 '17 at 21:01

xReprisal

810
8
23

answered Apr 18 '17 at 20:18

Smita Jain

46
1
5

score -2 · Answer 11 · answered Nov 22 '17 at 12:43

-2

Use Simple HTML

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

answered Nov 22 '17 at 12:43

ibrahim Abdullah

93
5

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Clijsters Nov 22 '17 at 13:01

Two div blocks on same line

11 Answers11

Linked

Related