I want to make all divs side by side.
I mean remove the space form top of the #div3 and #div4.
I tried float and display:inline-block
my code :
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
#div1 {
display: inline-block;
width:220px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:260px;
height:260px;
border: 1px solid green;
}
#div3 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
#div4 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
http://jsfiddle.net/u5y6tuwm/
One solution is to use flex in the parent container:
#wrapper {
display: flex;
/*set display to flex*/
margin-top: 20px;
}
#wrapper > div {
margin-right: 10px;
/*add some margin to the right to direct children div*/
}
#div1 {
width: 220px;
height: 120px;
border: 1px solid red;
}
#div2 {
width: 260px;
height: 260px;
border: 1px solid green;
}
#div3 {
width: 100px;
height: 160px;
border: 1px solid green;
}
#div4 {
width: 100px;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
vertical-align: top;
to each div1, 2, 3 and 4
you can add this to affect all divs on the page
div {
vertical-align: top;
}
or this for all divs within #wrapper div
#wrapper div {
vertical-align: top;
}
or this to target each div you want ( 1-4 )
#div1, #div2, #div3, #div4 {
vertical-align: top;
}
or to each one individually, or inline style and so on.
You just need to add
#div1, #div2, #div3, #div4 {
float:left;
}
This will work perfectly. Also do not forget to clear the float after
Related
Trying to show dive next of span but it is not working.I do not know how to align. If anyone know please help to find the solution.
app.component.html:
<div class="content">
<div class="title">Titles</div>
<span class="icons"> images </span>
</div>
app.component.css:
.content{
width: 100%;
height:150px;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
}
expecting:
Demo:https://stackblitz.com/edit/angular-svg-use-2c9trb?file=src%2Fapp%2Fapp.component.css
Use display:inline-block;
p {
font-family: Lato;
}
.content {
width: 100%;
height: 150px;
direction: rtl;
text-align: left;
}
.title {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
.icons {
display: inline-block;
border: 2px solid #ccc;
vertical-align: top;
margin: 4px;
}
and use direction and rtl to reverse direction of elements
add inline-flex to displays as an inline-level flex container. Then add margin-inline-end to get space between div and span.
.content{
width: 100%;
display: inline-flex;
}
.title{
display:block;
float: right;
border:2px solid #ccc;
}
.icons{
display:block;
float: left;
border:2px solid #ccc;
margin-inline-end: 5px;
}
I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
Is there some useful techniques?
Here is the fiddle
For text centering I tried to use this:
.wrapper div {
position: relative;
top: -8px;
}
To remove bottom canvas margin I tried to use this:
.wrapper canvas {
margin-bottom: -5px;
}
But I always try to avoid negative parameters.
Did you mean vertically align? Like this?
.wrapper {
border: 1px solid green;
display: inline-block;
}
.wrapper div {
border: 1px solid blue;
display: inline;
margin-left: 10px;
}
.wrapper canvas {
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<canvas width="32" height="32"></canvas>
<div class="question">1234567890</div>
</div>
is this what you mean?
canvas {
float: left;
}
You can use this code for horizontally design
<style>
.wrapper {
border: 1px solid green;
float:left;
}
.demo_class{
display: inline-block;
float: left;
}
.demo_class .question{
height: 32px;
line-height: 32px;
}
<div class="wrapper">
<div class="demo_class">
<canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas>
</div>
<div class="demo_class">
<div class="question">1234567890</div>
</div>
How to align .content in the middle (vertically) without specifying height of .container explicitly?
<div>
<div class="container"></div>
<div class="content"></div>
<div class="one"></div>
</div>
<style>
.container {
border:1px solid red;
display: inline-block;
}
.content {
height: 50px;
width: 70px;
display:inline-block;
vertical-align:middle;
border:1px solid green;
}
.one {
height: 200px;
width: 20px;
background: red;
display: inline-block;
}
</style>
Try specifying vertical-align: middle to both child elements:
.container {
border: 1px solid red;
display: inline-block;
}
.content {
height: 50px;
width: 70px;
display: inline-block;
vertical-align: middle;
border: 1px solid green;
}
.one {
height: 200px;
width: 20px;
background: red;
vertical-align: middle;
display: inline-block;
}
<div class="container">
<div class="content">text</div>
<div class="one">text</div>
</div>
I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.