Two div blocks on same line
HtmlCssHtml Problem Overview
How to center on the same "line" two div blocks?
First div:
<div id=bloc1><?php echo " version ".$version." Copyright © All Rights Reserved."; ?></div>
Second div:
<div id=bloc2><img src="..."></div>
Html Solutions
Solution 1 - Html
CSS:
#block_container
{
text-align:center;
}
#bloc1, #bloc2
{
display:inline;
}
HTML
<div id="block_container">
<div id="bloc1"><?php echo " version ".$version." Copyright © 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.
Solution 2 - Html
You can do this in many way.
> 1. Using display: flex
#block_container {
display: flex;
justify-content: center;
}
<div id="block_container">
<div id="bloc1">Copyright © All Rights Reserved.</div>
<div id="bloc2"><img src="..."></div>
</div>
> 2. 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 © All Rights Reserved.</div>
<div id="bloc2"><img src="..."></div>
</div>
>3. using table
<div>
<table align="center">
<tr>
<td>
<div id="bloc1">Copyright © All Rights Reserved.</div>
</td>
<td>
<div id="bloc2"><img src="..."></div>
</td>
</tr>
</table>
</div>
Solution 3 - Html
I think now, the best practice is use display: inline-block;
look like this demo: https://jsfiddle.net/vjLw1z7w/
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: https://jsfiddle.net/42L1emus/1/
Solution 4 - Html
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>
Solution 5 - Html
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)
Solution 6 - Html
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 © All Rights Reserved.</div>
<div id="bloc2"><img src="..."></div>
</div>
Solution 7 - Html
HTML File
<div id="container">
<div id="bloc1">Copyright © All Rights Reserved.</div>
<div id="bloc2"><img src="..."></div>
</div>
CSS File
#container
{
text-align:center;
}
#bloc1, #bloc2
{
display:inline;
}
Solution 8 - Html
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>
Solution 9 - Html
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>
Solution 10 - Html
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.
Solution 11 - Html
Use Simple HTML
<frameset cols="25%,*">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>