Two div blocks on same line

小开

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)

小开

最佳答案

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.

小开

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>

小开

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>

小开

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>

小开

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>

小开

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>

小开

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>

小开

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.

小开

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;
}

小开

Use Simple HTML

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