I'm setting my div display as table-cell like this.
HTML
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="lastchild">4</div>
</div>
CSS
.child{
background: red;
width: 20px;
display: table-cell;
}
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
}
.parent {
width:200px;
}
http://jsfiddle.net/Lx1p3y93/
I wonder if there's any way I can set the rightmost cell right aligned?
Change CSS to:
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float:right;
}
.child {
background: none repeat scroll 0 0 red;
display: table-cell;
float: left;
width: 20px;
}
Remove table-cell property and use float property. Update your CSS like below.
.child{
background: red;
width: 20px;
float:left;
}
.lastchild {
background: blue;
width: 20px;
margin-right: 0;
float:right;
}
FIDDLE DEMO
How about pseudo elements? demo
.child{
background: red;
width: 20px;
display: table-cell;
float:left;
}
.child:last-child {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float:right;
}
.parent {
width:200px;
}
For this purpose you can use this piece of code into your .lastchild class:
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float: left;
}
This will align the .lastchild item to the most right of the .parent element
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 would like to position some DIV by it's distance from the right side of the container, or from the left side from the container, or centered; but everything without of excluding it from the flow, like absolute does.
Is it possible?
The only thing I can is centered. I can't believe this is not easily possible!
#outer {
position: relative;
width: 100%;
}
#first {
position: relative;
background-color: red;
width: 100px;
right: 10px;
}
#second {
position: relative;
background-color: green;
width: 100px;
}
#third {
position: relative;
background-color: yellow;
width: 100px;
margin-left: auto;
margin-right: auto;
}
The sample is here: https://jsfiddle.net/dimskraft/vm3Lg835/8/
If I make absolute position, another DIV starts to ignore absoluted one...
UPDATE
Visual explanation of what I want:
UPDATE 2
Incredible!
Isn't this task have simple solution? Without any cheating / hacking??
I just want to set distance from right side. Why can't I do this with ONE property???
This one do what you ask, keeping the flow and your original html structure.
I also added a "centered" div, which you commented might be needed.
(As per request, I added a second group of 3 div's in below sample using margins only, and here is also a fiddle: http://jsfiddle.net/qxvoLr5u/2/)
html, body {
margin: 0;
}
#outer {
width: 100%;
text-align: right;
}
#first {
display: inline-block;
width: 100px;
background-color: red;
text-align: left;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
text-align: left;
}
#third {
display: inline-block;
background-color: yellow;
width:100px;
text-align: left;
position: relative;
right: 50%;
margin-right: -50px;
}
/* sample 2 */
#outer2 div:before {
content: attr(class);
}
.div1 {
width: 100px;
margin-left: auto;
margin-right: 10px;
background-color: red;
}
.div2 {
width: 100px;
margin-right: auto;
background-color: green;
}
.div3 {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
<div id="outer">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
</div>
<br />
<hr />
As per request, these 3 divs use margin only<br />
<hr />
<div id="outer2">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
I would probably wrap it in another relative div that has text-align:right and then give first display:inline-block:
https://jsfiddle.net/aqvug8uj/2/
I think this is best solution https://jsfiddle.net/vm3Lg835/6/
CSS
#outer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#first {
background-color: red;
width:100px;
right:10px;
align-self: flex-end;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
}
I found your question to be a bit confusing, to be honest. If I have understood you correctly, aligning stuff the way you describe it is simple, to the point of being trivial, with float and clear.
#outer {
width=100%;
}
#first {
background-color: red;
width:100px;
float: right;
margin-right:10px;
}
#second {
background-color: green;
width:100px;
clear: right;
}
#third {
background-color: yellow;
width:100px;
margin-left: auto;
margin-right: auto;
}
Is that what you wanted to achieve? Here's the fiddle.
Use the following code:
HTML:
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
<div class="clearboth"></div>
</div>
CSS:
#outer {
position: absolute;
}
#first {
background-color: red;
width:100px;
float: left;
}
#second {
background-color: green;
width:100px;
float: right;
}
.clearboth
{
clear: both;
}
UPDATEDAdd margin-left: 100px; according to your need.
It should work for you.
Take a look
#outer {
position: relative;
width=100%;
}
#first {
margin-left:350px;
position: relative;
background-color: red;
width:100px;
right:10px;
float:left;
}
#second {
position: relative;
background-color: green;
width:100px;
float:left;
}
<div id="outer">
<div id="first"> </div>
<div id="second"> </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 need to have these divs side by side for a menu bar but up until now it keeps stacking up on each other. I have tried doing margin-right/left/top/bottom, padding, etc... but can't get it to work, any suggestions?
<div id="Menu" >
<div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
<div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
<div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
<div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>
The CSS is:
#Menu
{
width: 50%; height: 40px; background-color: blue; margin-left: auto;
margin-right: auto; margin-top: 20px; border-radius: 20px;
}
#M_1
{
text-align: center; width: 20%; background-color: black;
}
#M_2
{
text-align: center; width: 20%; background-color: black;
}
#M_3
{
text-align: center; width: 20%; background-color: black;
}
#M_4
{
text-align: center; width: 20%; background-color: black;
}
add these two for each one
#M_1
{
display: inline-block;
float: left;
}
if that doesn't fit them all in, try changing 1 or 2 or all of them to 19% width instead
You need to float: left them or set them to display: inline-block.
You can tidy your CSS by merging selectors.
#menu{
display:table;width: 50%; height: 40px; background-color: blue;
margin:20px auto; border-radius: 20px;
}
#menu > div{
text-align: center; background-color: black;display:table-cell
}
This best thing to do would be:
<ul>
<li>given</li><li>
received</li>
</ul>
Ul {
Width:50%;
Height:40px;
Background: blue;
Margin: 0 auto;
}
Ul li {
Display:inline-block;
Width:20%;
Background:#000;
Text-align: center;
}
Having the closing tag and open tag next to each other stops inline-block from leaving a gap between the elements.
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.