Here is a fiddle of the below:
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
line-height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
What I want is for the #filterSeparator to be aligned with the other divs.
For some reason, all the other divs are below the #filterSeparator.
If I put text inside #filterSeparator, then it works.
Is there a way for me to get it to work without placing any text inside #filterSeparator?
fiddle
For inline / inline-block elements, use the vertical-align property:
.filterDivActual, #filterSeperator {
display: inline-block;
vertical-align: middle ; /* or some other value: */
}
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
I don't know why it does this but you can fix it by using float:left; instead of display:inline-block
Putting content in the empty <div> will fix it.
<div id='filterSeperator'> </div>
#filterSeparator:before {
content: ".";
visibility: hidden;
}
.filterDivActual, #filterSeparator {
display: inline-block;
}
.filterDivActual {
border: 2px solid grey;
width: 15%;
height: 50px;
color: grey;
position: relative;
}
#filterSeparator {
height: 50px;
width: 5px;
background-color: black;
}
#filterSeparator:before {
content: ".";
visibility: hidden;
}
<div id='filterDiv'>
<div class='filterDivActual'>Top</div>
<div class='filterDivActual'>New</div>
<div id='filterSeparator'></div>
<div class='filterDivActual'>Today</div>
<div class='filterDivActual'>Yesterday</div>
<div class='filterDivActual'>None</div>
</div>
Related
I need to position two of my elements on the right hand side of the parent element, however, when using the float: right property, it makes the elements to switch positions.
I had a look at this thread: Prevent Right Floated Elements from Swapping however, adding the display: inline-block and text-align: right didn't solve the problem.
Here is a
.container {
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
}
.element1 {
float: right;
height: 20px;
width: 10px;
background-color: blue;
color: white;
padding: 10px;
}
.element2 {
float: right;
height: 20px;
width: 10px;
background-color: yellow;
padding: 10px;
}
<div class="container">
<div class="element1">1</div>
<div class="element2">2</div>
</div>
My desired result would be blue element followed by yellow element.
UPDATE:
I do understand that this is expected behaviour and the second element is send all the way to the right after the first element, and I do know that changing the elements around would fix the problem, however, just wondering if there is a CSS solution for it.
.container {
display: flex;
}
.element4 {
margin-right: auto;
}
.element5 {
margin-left: auto;
}
.container {
width: 300px;
background-color: red;
}
.element {
height: 20px;
width: 10px;
padding: 10px;
}
.element1 {
background-color: blue;
color: white;
}
.element2 {
background-color: yellow;
color: black;
}
.element3 {
background-color: green;
color: white;
}
.element4 {
background-color: gold;
color: black;
}
.element5 {
background-color: magenta;
color: black;
}
.element6 {
background-color: goldenrod;
color: white;
}
<div class="container">
<div class="element element1">1</div>
<div class="element element2">2</div>
<div class="element element3">3</div>
<div class="element element4">4</div>
<div class="element element5">5</div>
<div class="element element6">6</div>
</div>
This is expected behaviour, either switch your elements around in your HTML or use another method of positioning besides float.
It floats the first element first, then it sees the next one and this then needs to be floated over again so it moves past the original one.
use this.
.container{
width: 300px;
height: 20px;
background-color: red;
margin: 0 auto;
position:relative;
}
.element1 {
position:absolute;
right:0;
height: 20px;
width: 10px;
background-color: blue;
}
.element2 {
position:absolute;
right:10px;
height: 20px;
width: 10px;
background-color: yellow;
}
<div class="container">
<div class="element1">
</div>
<div class="element2">
</div>
</div>
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
I'm trying to float two elements of different height, with the shorter one being middle centered.
If I use inline-block instead of float the vertical centering works correctly, but the 'middle' div doesn't stretch to fit.
float example: http://jsfiddle.net/jonofan/r3pejgud/3/
inline-block: http://jsfiddle.net/jonofan/87kwpuxa/
Also interested to hear if people think should be going about this layout a different way entirely.
EDIT: I don't see this to be a duplicate of this question because my current code doesn't use table display. It just so happens that 'use table display' is the best answer in this case.
.header {
width: 600px;
border: 1px solid black;
display: inline-block;
}
.header img {
width: 50px;
float: left;
}
.middle {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 1px solid gray;
height: 20px;
overflow: hidden;
}
.middle .itemheading {
position: absolute;
bottom: 0;
left: 0;
font-size: 1.8em;
}
.middle .itemdate {
position: absolute;
bottom: 0;
right: 0;
}
<div class='header'>
<img src='http://i.imgur.com/J2HToiP.jpg' />
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
Not perfect but you don't have to resort to absolute positioning. Use display: table-cell; instead.
Not sure how the border for .middle is supposed to work.
<div class='header'>
<div class="img-wrap">
<img src='http://i.imgur.com/J2HToiP.jpg' />
</div>
<div class='middle'>
<span class='itemheading'>Heading Text</span>
<span class='itemdate'>Wednesday 01 July 2015</span>
</div>
</div>
.header {
width: 600px;
border: 1px solid black;
}
.header img {
width: 50px;
}
.header .img-wrap {
display: table-cell;
vertical-align: middle;
}
.header .middle {
width: 100%;
display: table-cell;
vertical-align: middle;
border: 1px solid gray;
}
.itemdate {
float: right;
}
http://jsfiddle.net/87kwpuxa/2/
I am trying to make a file hierarchy in html/css and I can't get these labels or the divs they are in to expand to full width. They only expand to the width of the visible area but I want the width of what they are in. Here is the fiddle to see what I am talking about. The grey area needs to all line up on the right.
a = 3;
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
width: 100%;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file"><label>test.txt</label></div>
<div class="file"><label>readme.txt</label></div>
<div class="file"><label>a really long filename.txt</label></div>
</div>
</div>
</div>
You need to change your div.directory CSS class as follows:
div.directory {
display:inline-block;
padding-left: 20px;
}
I made the following changes:
1) Added display:inline-block;
2) Removed the width:100%; rule.
Here is an example:
http://jsfiddle.net/nnd7jyj1/
(As a side note, it's generally bad practice in CSS to apply both a width and either a padding or margin rule to the same element. The reason for this is that some browsers interpret the width to include the padding/margin and some don't, which leads to inconsistent results)
Simply add display:inline-block; to div.directory
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
div.hierarchy {
position: relative;
overflow: auto;
border-right: 1px solid grey;
width: 150px;
left: 0;
top: 0;
bottom: 0;
height: 100%;
}
div.hierarchy label {
display: block;
min-width: 100%;
background: #eee;
white-space: nowrap;
}
div.directory {
padding-left: 20px;
/* width: 100%; */
/* added */
display: inline-block;
}
div.directory label {
border: 1px solid grey;
width: 100%;
cursor: pointer;
}
<div class="hierarchy">
<label>Hierarchy</label>
<div class="directory">
<label>src</label>
<div class="directory">
<div class="file">
<label>test.txt</label>
</div>
<div class="file">
<label>readme.txt</label>
</div>
<div class="file">
<label>a really long filename.txt</label>
</div>
</div>
</div>
</div>
I'm having some trouble creating a (somewhat strange) layout and I can't find an example anywhere of exactly what I'm trying to do.
I would like to layout multiple blocks that look like this:
<div class="rel">
<div class="item">--- a</div>
<div class="item">- b</div>
<div class="item">c</div>
</div>
where all of the .item elements are on top of one another, but the .rel elements layout normally so they are all visible. It's important to note that all the .item elements within a .rel will be of exactly the same length, yet they may be of any length, so they might wrap onto a new line. Here is an image of what I'm trying to do:
I've created this CodePen.
SOLUTION
In case anyone else finds themselves needing this truly strange layout:
CodePen
I am not exactly sure what you are trying to achieve, but it seems that you want <div class="item"> to display inline. you can use float=left or display=inline-block instead of absolute positioning. your divs are on top of each other right now .
Something similar to this
<div class="container">
<div class="rel clearfix">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</div>
and
.container {
width: 200px;
}
.rel {
width: 100%;
background: steelblue;
margin: 1em;
padding: 1em;
position: relative;
}
.item {
color: white;
background: gray;
margin: .1em;
float:left;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
.rel-2 {
width: 100%;
background: steelblue;
margin: .2em;
position: relative;
}
check it out here http://codepen.io/anon/pen/vEExvM
Use this on item
display: table-cell;
and this on rel
display: inline-block;
Have a look at this fiddle. http://jsfiddle.net/h8rzw65p/
Total Code:
.container {
width: 200px;
}
.item {
color: white;
background: gray;
margin: .1em;
top: 0px;
left: 0px;
display: table-cell;
}
.rel-2 {
top: 0px;
left: 0px;
width: 100%;
background: steelblue;
margin: .2em;
display: inline-block;
}
Or instead of table-cell you could do this on item:
float: left;