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>
Related Topics
Which Characters Are Valid in CSS Class Names/Selectors
How to Transition Height: 0; to Height: Auto; Using Css
Css Selector For First Element With Class
How to Make Bootstrap Columns All the Same Height
How to Disable Text Selection Highlighting
Bootstrap Center Vertical and Horizontal Alignment
Make a Div Span Two Rows in a Grid
Vertical Align Center in Bootstrap 4
How to Center an Absolutely Positioned Element in a Div
What Does the "≫" (Greater-Than Sign) CSS Selector Mean
Font Scaling Based on Width of Container
Chrome/Safari Not Filling 100% Height of Flex Parent
How to Vertically Align an Image Inside a Div
Media Queries: How to Target Desktop, Tablet, and Mobile