I want three divisions side bu side with the middle explanding and the other two positioned at the ends. So here is what I tried. The padding rule disturbs the positioning but its necessary. I want approach which works in all major browsers(So ruling out flexbox)
.Button {
width: 80%; /*Useless Rule*/
}
.Button > .left {
float: left;
background-color: blue;
padding: 5px;
}
.Button > .right {
float: right;
background-color: red;
padding: 5px;
}
.Button> .middle {
width: 100%;
background-color: green;
padding: 5px;
}
<html>
<body>
<div class="Button">
<div class="left"><</div>
<div class="right">></div>
<div class="middle">Middle</div>
</div>
</body>
</html>
I like to use the display: table on the parent, and the display: table-cell on the children. Then give the first and third child a width of 1px. It will then be only as width as its content.
.button {
display: table;
width: 100%;
}
.button>div {
display: table-cell;
text-align: center;
background: lightblue;
}
.button>div:nth-child(1),
.button>div:nth-child(3) {
width: 1px;
background: lightgreen;
}
<div class="button">
<div><</div>
<div>Middle</div>
<div>></div>
</div>
Related
Having a bit of a mare with this but it should be so simple, I need my .qualification-delete-container div to take 100% of the parent div.
I've attached a fiddle so you can see. If you reduce the screen size, when the content of the .qualification-row-details div (the turquoise one) takes up 2 lines then the .qualification-delete-container (yellow one) needs to respond and take the new height of the parent.
Both of the child div's are display:inline-block
.qualification-row {
width: 100%;
padding: 10px 0px 10px 0px;
text-align: left;
background-color:green;
}
.qualification-row-details {
width: calc(100% - 60px);
height: 100%;
display: inline-block;
background-color: turquoise;
}
.qualification-delete-container {
display: inline-block;
width: 55px;
vertical-align: top;
min-height: 100%;
float: unset;
background-color: yellow;
}
.flex-vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
<br/>
<div class="qualification-row js-qualification-row">
<div class="qualification-row-details">
degree type, classification, Course title, year, awarding instition
</div>
<div class="qualification-delete-container">
<div class="flex-vertical-center">
<a class="qualification-delete">delete</a>
</div>
</div>
</div>
Change your qualification-row css to -
.qualification-row {
display : flex; // ADD DISPLAY FLEX
width: 100%;
padding: 10px 0px 10px 0px;
text-align: left;
background-color:green;
}
You can do it by using display table. I have solved it by using display table and table cell. please have a look .
I've attached a fiddle so you can see.
.qualification-row {
width: 100%;
text-align: left;
background-color:green;
display: table;
}
.qualification-row-details {
width: calc(100% - 60px);
height: 100%;
display: table-cell;
}
.qualification-delete-container {
display: table-cell;
width: 55px;
vertical-align: middle;
min-height: 100%;
float: unset;
background-color: yellow;
text-align: center;
}
.qualification-row-details-text {
margin: 10px 10px 10px 0;
background-color: turquoise;
}
<br/>
<div class="qualification-row js-qualification-row">
<div class="qualification-row-details">
<div class="qualification-row-details-text">
degree type, classification, Course title, year, awarding instition
</div>
</div>
<div class="qualification-delete-container">
<a class="qualification-delete">delete</a>
</div>
</div>
I have equal height columns with centered content:
http://codepen.io/anon/pen/BzKwgE
<div class="cont">
<div class="item item-first">
<p>First</p>
</div>
<div class="item item-second">
<p>Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second </p>
</div>
<div class="item item-third">
<p>Third</p>
</div>
</div>
* {
box-sizing: border-box;
}
.cont {
width: 70%;
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 20px;
width: 33%;
}
.item-first {
background: blue;
}
.item-second {
background: green;
}
.item-third {
background: blue;
}
This is working great. However I also need my columns to have a 16x9 aspect ratio. In rare cases there will be a lot of content, in which case its OK to change the aespect ratio.
Ive got this working below however it stops the content being vertically centered:
http://codepen.io/anon/pen/pbyWMj
* {
box-siing: border-box;
}
.cont {
width: 70%;
display: table;
}
.item {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 20px;
width: 33%;
}
.item:before {
padding-bottom: 56.25%; // 16:9 ratio
display: block;
content: '';
float: left;
width: 1px;
}
.item-first {
background: blue;
}
.item-second {
background: green;
}
.item-third {
background: blue;
}
I can see that this is happening due to the padding hack. Is there a way to have equal height columns, vertically centered content, and the 16x9 aspect ratio?
Im supporting IE9. Ideally it would look the same, but a usable fallback is also acceptable.
You can use inline-block and vertical-align on the elements inside each item. Try this:
.item {
display:table-cell;
vertical-align:middle;
text-align: center;
width: 33%;
}
.item:before {
padding-bottom: 56.25%;
display: inline-block;
content: '';
width: 0;
vertical-align:middle;
margin-right:-4px;
}
.item p {
display:inline-block;
vertical-align:middle;
padding:20px;
}
Codepen Update
So, I have three divs:
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
I'd like the rightmost div dynamicallyallocated to be dynamically sized based on the content using display: inline-block; and the other div takeremaining to take the remaining space in the parent div. I've tried this with my css:
.takeremaining {
display: inline-block;
width: 100%;
float: left;
background-color: #0000ff;
}
.centeredcontent {
display: table;
margin: 0 auto;
background-color: #00ffff;
}
.dynamicallyallocated {
display: inline-block;
float: right;
background-color: #00ff00
}
but, as you can see by this JSFiddle demo, the div dynamicallyallocated is bumped beneath takeremaining. I believe this is because of width: 100%; in takeremaining, but I'm not sure how to give it a dynamic width based on the conditional width of dynamicallyallocated. What would you suggest?
Here is a solution for you.
.container {
display: table;
width: 100%;
}
.takeremaining {
display: table-cell;
width: 100%;
text-align: center;
background-color: #0000ff;
}
.centeredcontent {
display: inline-block;
background-color: #00ffff;
}
.dynamicallyallocated {
display: table-cell;
width: 0;
background-color: #00ff00;
white-space: nowrap
}
<div class="container">
<div class="takeremaining">
<div class="centeredcontent">
This is my centered content
</div>
</div>
<div class="dynamicallyallocated">
This is my dynamic content
</div>
</div>
Is there a similar technique like float and clearfix but for vertical alignment.
I want to separate different elements (either inline or floating left) such that they are always aligned either to the top or bottom.
In this jsFiddle I want the red and the green to be horizontally aligned. I cannot change the CSS or the existing divs. I can only wrap .s1 and .s2
Ok.. If you know the class name you can do like this:
SEE DEMO 1
Here the css:
.s1 {
display: inline-block;
font-size: 10px;
height: 20px;
}
.s2 {
display: inline-block;
background: green;
font-size: 20px;
height: 20px;
}
.s3 {
background: red;
height: 20px;
}
/* PUT THIS IN AN EXTRA FILE OR UNDER THE ABOVE STYLE */
.s1 {
vertical-align: bottom;
}
.s2 {
vertical-align: middle;
}
Or if you can wrap the file you can float the div's like this:
SEE DEMO 2
HTML
<div class="wrap_1"> <!-- Wrap 1 -->
<div class="s1">
<div class="s3">asdf</div>
</div>
</div>
<div class="wrap_2"> <!-- Wrap 2 -->
<div class="s2">
<div>qwer</div>
</div>
</div>
CSS
.s1 {
display: inline-block;
font-size: 10px;
height: 20px;
}
.s2 {
display: inline-block;
background: green;
font-size: 20px;
height: 20px;
}
.s3 {
background: red;
height: 20px;
}
/* FLOAT THE DIV */
.wrap_1 div, .wrap_2 div {
float: left;
}
Let me know if solved your issue!
What I want to do is have a <div> with a container class and a fixed width, holding a <div> with the block class to prevent other content encroaching on any uneven blank space, then two columns (<div>'s) side-by-side inside the block, and to be 50% of the width of the block.
When I create this, I get what appears to be a margin after the first block, which I do not want. I want the block to pack up tight, no margins.
I have an example here of what I have so far, and here if the code:
<html>
<head>
<title>Columns</title>
<style>
div {
margin: 0;
padding: 0;
}
.container {
background: #DDD;
width: 1200px;
margin: 0 auto;
padding: 2% 0;
}
.block {
background: #555;
width: 100%;
display: block;
}
.col {
width: 49%;
display: inline-block;
background: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
</div>
</div>
</body>
</html>
Your problem is being causes by inline-block, using this makes a space appear inbetween.
Try using float:left to get around this:
See on jsFiddle
.col {
width: 50%;
float: left;
box-sizing: border-box;
background: #333;
}
Note that I added, box-sizing:border-box; this means when you use padding it will be included in the width, not on top of it. Effectively enabling the use of it without an extra inner div.
Remember to include a clear fix afterwards also to "clear" the floats.
CSS
.clear {
clear:both;
}
HTML
<div class="block">
<div class="col left">
<h1>Left</h1>
</div>
<div class="col right">
<h1>Right</h1>
</div>
<div class="clear"></div>
</div>
Try replacing these classes:
.block {
background: none repeat scroll 0 0 #555555;
display: block;
overflow: auto;
width: 100%;
}
.col {
width: 49%;
float: left;
background: #333;
}
.container {
background: #DDD;
width: 900px;
margin: 0 auto;
padding: 30px 30px 30px 30px;
}
.block {
background: #555;
width: 100%;
display: block;
}
.block:after {
content: "";
display: table;
clear: both;
}
.col {
width: 50%;
float: left;
background: #333;
}