Below are the div elements I am trying to place it side by side. Is it possible?
<div style="padding-left:10px">
<h4 class="line">{sev_pas}</h4>
</div>
<div style="padding-left:10px">
<div>sdfds</div>
Of course you can by using display: inline-block property. Just make sure what you are doing
div {
display: inline-block;
}
<div style="padding-left:10px">
<h4 class="line">{sev_pas}</h4>
</div>
<div style="padding-left:10px">
<div>sdfds</div>
SIMPLE CSS CAN HELP :
div{
width : 150px;
height: 150px;
display:inline-block;
}
<div style='background: red'></div>
<div style='background: blue'></div>
<div style='background: orange'></div>
<div style='background: green'></div>
Using text in div element it's not best practice! it's better to put your text in p or span tag.
also you can use "display:flex" for div element so it's better to write something like below code:
.container{
display: flex;
flex-direction:row;
gap: 10px;
align-item:center;
}
.line{
margin: 0
}
<div class="container">
<h4 class ="line" >{sev_pas}</h4>
<span>sdfds</span>
</div>
You can use display: inline-block for set div or any other elements.
div{
display:inline-block;
}
h2{
background:orange;
color:#fff;
}
<div style="padding-left:10px">
<h2>DIV 2</h2>
</div>
<div style="padding-left:10px">
<h2>DIV 1</h2>
</div>
Else there are also other methods like using display: flex or display: grid etc.
Just use display: inline-block;
.first-div{
display: inline-block;
}
.second-div{
display:inline-block;
}
<div class="first-div" style = "padding-left:10px">
<h4 class ="line" >ok</h4>
</div>
<div class="second-div" style= "padding-left:10px"> sdfds</div>
Related
HTML:
<div id="parent">
<div class="child1">
<img src="img/top.png"/>
</div>
<div class="child2">
<img src="img/middle.png"/>
</div>
<div class="child3">
<img src="img/bottom.png"/>
</div>
</div>
CSS:
.child1{
display: inline-block;
}
.child2{
display: inline-block;
}
.child3{
display: inline-block;
}
I have the display set to inline-block because I want the divs to fit the size of the image that they contain (different size for each). However, when I have it set up this way, they appear one after another from left to right. I would like them to be stacked, where child2 is directly below child1 and child3 is directly below child2.
Thanks
Solve using flexbox
#parent {
display: flex;
flex-direction: column;
align-items: center;
}
<div id="parent">
<div class="child1">
<img src="http://lorempixel.com/400/200" alt="random">
</div>
<div class="child2">
<img src="http://lorempixel.com/600/200" alt="random">
</div>
<div class="child3">
<img src="http://lorempixel.com/400/200" alt="random">
</div>
</div>
If you really want to make divs elements to fit exactly the size of its contained image, then you must remove empty spaces or set font-size: 0 on parent's container (or child divs)
Check this pen
Give each child div width:100% and give the #parent div text-align:center
#parent {
text-align: center;
}
#parent>div {
width: 100%;
display: inline-block;
}
<div id="parent">
<div class="child1">
<img src="http://dingo.care2.com/pictures/greenliving/uploads/2013/10/cat-with-stunning-green-eyes.jpg" />
</div>
<div class="child2">
<img src="http://www.top13.net/wp-content/uploads/2015/02/cat-photography-zoran-milutinovic-Fluffy-The-King.jpg" />
</div>
<div class="child3">
<img src="https://i.imgur.com/D2cqjmO.jpg" />
</div>
</div>
Update your css like this
.child1{
float:left;
clear:both;
}
.child2{
float:left;
clear:both;
}
.child3{
float:left;
clear:both;
}
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>
How do I vertically center an hr element?
I've tried to place the element in some div elements...
<div class="table">
<div class="table-cell"><hr /></div>
</div>
<div class="table">
<div class="table-cell">Some text Here!</div>
</div>
<div class="table">
<div class="table-cell"><hr /></div>
</div>
I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.
So I'm looking for inline HR element Some Text inline HR element
--------------SOME TEXT--------------
Thank you again css guru masters!
For a simple, generic way to vertically center an hr element:
html:
<div class="container">
<hr />
</div>
css:
.container {
display: flex;
align-items: center;
}
.container hr {
width: 100%;
}
The hr element needs a width given to it (or flex-grow), otherwise it will be only a dot in the center of the container.
.container {
display: flex;
align-items: center;
height: 100px;
background: yellow;
}
.container hr {
flex-grow: 1;
}
<div class="container">
<hr />
</div>
To anyone who's stumbled upon this in the future, I have updated the answer to what I feel is a more modern, efficient approach using Flexbox
HTML:
<div class="title">
<hr />
<h3>Some text</h3>
<hr />
</div>
CSS:
.title {
display:flex;
flex-flow:row;
justify-content:center;
align-items:center;
}
hr {
flex:1;
}
h3 {
padding:0px 48px;
}
DEMO HERE
I used the following solution in my css, margin the element to the center on every device
CSS:
margin: 0 auto;
i have problem with align divs inside main centered div.
Here is my code
<style>
body {
max-width: 1150px;
min-width: 900px;
margin:0 auto; }
.container {
text-align:center;
background-color:#e1e1e1; }
.box {
width: 250px; }
.inline-block {
color: #eee;
margin: 10px 0px 0px 10px;
text-align: center;
display:inline-block; }
.one {
height: 22px;
background: #744; }
</style>
<div class="container">
<div class="inline-block"><div class="one box">1</div>
</div>
<div class="inline-block"><div class="one box">2</div>
</div>
<div class="inline-block"><div class="one box">3</div>
</div>
<div class="inline-block"><div class="one box">4</div>
</div>
<div class="inline-block"><div class="one box">5</div>
</div>
<div class="inline-block"><div class="one box">6</div>
</div>
<div class="inline-block"><div class="one box">7</div>
</div>
<div class="inline-block"><div class="one box">8</div>
</div>
</div>
Result when i resize window
What i need
P.S. Sorry for my English, i hope you understand this.
Here is the DEMO
Just it's simple add Float:left to it
I think .container { text-align:left;} will do the trick for you, of course then you'll need .container > div { text-align:center;}. And I would also suggest to add classes to those divs so you don't have to use the immediate child selector.