How to Keep Two Divs on the Same Line

How do I keep two divs on the same line?

You can make two divs inline this way:

display:inline;
float:left;

Two div blocks on same line

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.

How can I put two divs on the same line?

On most modern browsers nowadays display: table-cell is the better alternative to floating.

How to put two divs on same line in bootstrap

Try this Jsfiddle link here. To fix this issue I have used only three bootstrap classes .d-flex, .align-items-center and .d-inline-block.
It is not a best practice, applying .row and .col classes everywhere in your layout. You need to understand the right place for their application.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="d-flex align-items-center">            <div class="d-inline-block">                <h2 id="product-name" class="">Stickers troquelados</h2>            </div>            <div class="d-inline-block">                    <span class="">                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star"></i>                            <i class="gold-star fas fa-star-half-alt"></i>                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star"></i></a>                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->                            858 comentarios                    </span>            </div>    </div>

How can I position two divs on the same line and have them act responsive?

Floats aren't going to work as well since it rips it out of the layout.

I recommend inline-block and set width:50% on each.

You have to make sure images never bust your divs so do max-width: 95% or something less than that. Depending on how many there are.

How can i get two divs on the same line?

Add float:left to your #header_logo div.

jsFiddle example

Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.

Align two divs on the same line without modifying the HTML

<div class="main_one">
<div class="number one">Title A</div>
</div>
<div class="main_two">
<div class="number two">Title B</div>
</div>

<div class="main_three">
<div class="number one">Title C</div>
</div>
<div class="main_four">
<div class="number two">Title D</div>
</div>

<style type="text/css">
.main_one{
float:left;
}

.main_two{
float:left;
}

.main_three{
clear:both;
float:left;
}

.main_four{
float:left;
}
</style>

enter image description here



Related Topics



Leave a reply



Submit