How change my code to create new classes: title and body from div-table-col with align property inside?
Header must be moved to right and Test must be moved to the left.
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.div-table-row { display: table-row; width: auto; clear: both; }
.div-table-col { float: left; display: table-column; width: 50%; background-color: #ccc; }
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="right">
Header:
</div>
<div class="div-table-col" align="left" padding-left="5px">
Test
</div>
</div>
</div>
I want to create:
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.title { display: table-row; width: auto; clear: both; align:right}
.data { float: left; display: table-column; width: 50%; background-color: #ccc; align:left padding-left:5px}
but it does't works. It displaies properly now, but I would like to remove align property and padding-left and move it to styles.
I dont know if I understand what you want, but if the only thing is Header on the right and Test on the left you need to make an other float, becasue you're applying the same float to both of them.
.div-table {
display: table;
width: 100%;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; }
.div-table-row { display: table-row; width: auto; clear: both; }
.div-table-col2 { float: left; display: table-column; width: 50%; background-color: #ccc; }
.div-table-col { float: right; display: table-column; width: 50%; background-color: #ccc; }
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="right">
Header:
</div>
<div class="div-table-col2" align="left" padding-left="5px">
Test
</div>
</div>
</div>
Related
I have 4 divs.
1 - Divs '.left' and '.right' should be 150px min. - > OK
2 - Divs '.middle1' and '.middle2' should get the remaining with
divided by them. -> NOT OK
Why do I have a blank space between the '.middle2' and '.right'?
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
float: left;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1"></div>
<div class="middle2"></div>
<div class="right"></div>
</div>
Not sure how do you want to display. Instead of playing around with floats, you can use display:flex to achieve the same.
Check the below snippet
.container {
display:flex;
}
.left {
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1">m1</div>
<div class="middle2">m2</div>
<div class="right">right</div>
</div>
Hi this is not the best way to do this.
You should make a div with three sections of it and divide the middle one into two sections.
So basically the structure you need is
Div > 3 columns and then the middle column has two columns conatined.
However, here is a quick fix for your code :
- Apply float:right to .middle2
- Fix the width percetage for .middle1 and .middle2
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 31%;
}
.middle2 {
float: right;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 31%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 7 years ago.
I'm trying to align some DIVs and failing to succeed.
<div class="row">
<div class="name"><h3>Some long name in here</h3></div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>
This is what I did so far https://jsfiddle.net/uvo2xdxk/
How can I make the .info div to be vertically aligned inside the row?
You can achieve this by display: table-cell;
Remove float from .name and .info and assign display: table-cell; vertical-align: middle; to them :)
.row {
display: table;
width: 450px;
background-color: yellow;
border: 1px solid blue;
}
.name {
background-color: red;
display: table-cell;
vertical-align: middle;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.info {
display: table-cell;
width: 150px;
vertical-align: middle;
background-color: ccc;
border: 1px solid green;
text-align: right;
}
<div class="row">
<div class="name">
<h3>Some long name in here</h3>
</div>
<div class="info">
<div class="delete">X</div>
<div class="price">1000.00</div>
</div>
</div>
https://jsfiddle.net/uvo2xdxk/5/
try this one
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
assign row display:table; property and its child display:table-cell; and vertical-align:middle; and also remove the float:right; from child
Add to your .info:
.info{
//...
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
And your .row should set:
position: relative;
I had updated your jsfiddle
I have modified your css please check here
.name {
background-color: red;
display: inline;
float: left;
}
.delete {
background-color: green;
display: inline;
margin-right: 25px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
height: auto;
vertical-align: middle;
overflow:hidden;
position:relative;
}
.info {
float: right;
display: inline-block;
background-color: ccc;
border: 1px solid green;
vertical-align: middle;
position:absolute;
right:0;
transform:translateY(-50%) ;
top:50%;
}
Please check if it works for you.
You can check with the below link.
https://jsfiddle.net/uvo2xdxk/7/
.name {
background-color: red;
display: inline;
float: left;
}
.delete {
background-color: green;
display: inline;
margin-right: 0px;
}
.price {
background-color: blue;
display: inline;
margin-right: 5px;
}
.row {
width: 450px;
background-color: yellow;
border: 1px solid blue;
display:table;
}
.info {
height:57px;
display: table-cell;
vertical-align:middle;
background-color: ccc;
border: 1px solid green;
top: 25%;
}
I'm trying to make a message template as below.
<div class='message'>
<div class='from'>
<i class='avatar'></i>
<span>Name</span>
</div>
<div class='body'>
<div class='content'>Hello</div>
</div>
</div>
.message { clear: both; }
.from {
float: left;
margin-right: 12px;
}
.from > i {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #000;
}
.from > span {
display: block;
width: $avatar-width;
line-height: 1em;
}
.body {
position: relative;
}
.body > .content {
display: inline-block;
padding: 15px;
border: 3px solid #000;
overflow: hidden;
}
I'm having a hard time making the content and div.from staying in the same line. When content is too wide, the content will go to a new line. Please see http://jsfiddle.net/9h3HN/1/ for what I mean.
Any ideas? Thanks.
Did you try following?
.form {
width: 54px;
}
.body {
padding-left: 70px;
}
I am trying to center an image within a div and I used the display:table & display: table-cell method. It is centered but it is off by a few pixels from the top. What can I do to correct this?
CSS
html, body {
width: 100%;
height: 100%;
}
body,html {
margin: 0;
padding: 0;
color:#ffffff;
text-align: center;
}
#wrapper{
text-align: left;
width: 940px;
margin: 0 auto;
margin-top: 22px;
background-color: #ffffff;
overflow: hidden;
}
header {
width: 908px;
height: 76px;
display: table;
border-style:solid;
border-top-width: 16px;
border-bottom-width: 16px;
border-top-color: #ffffff;
background-color: #cccccc;
}
#headerdiv { display: table-cell; vertical-align: middle; margin: 0; height: 28px; }
HTML
<div id="wrapper">
<header>
<div id="headerdiv"><img src="logotest.gif" height="28" width="180" alt="test"></div>
</header>
</div>
Add
img {
vertical-align:middle;
}
jsFiddle example