I have a flex div with a div and a span, structure that I don't want to modify.
.Flex {
display: flex;
background: lightgray;
height: 300px;
}
.Square {
width: 30px;
height: 30px;
background: black;
}
.Text {
font-family: "Arial";
font-size: 40px;
background: tan;
}
<div class="Flex">
<div class="Square"></div>
<span class="Text">Title</span>
</div>
I'm trying to align the top of the "T" of the text with the top of the Flex div, something like the following image:
But I cant. align-content: flex-start will align all children to the top, but the text within the span will still have some distance to the top of the div.
How is possible to achieve this?
Add one property to your text's css: (you can modify this value according to the positioning of the text you would like, the higher, the more space the text has from the top edge)
line-height: 0.75;
.Flex {
display: flex;
background: lightgray;
height: 300px;
}
.Square {
width: 30px;
height: 30px;
background: black;
}
.Text {
font-family: "Arial";
font-size: 40px;
background: tan;
line-height: 0.75;
}
<div class="Flex">
<div class="Square"></div>
<span class="Text">Title</span>
</div>
Related
When .parent div width (or more generically the screen width) decreases, the .right div text should overlap on top of the .left div text.
.parent {
display: flex;
align-items: center;
letter-spacing: normal;
outline: 0;
}
.left {
text-align: center;
display: flex;
align-items: center;
}
.right {
width: 15px;
min-width: 15px;
position: relative;
display: flex;
background-color: pink;
z-index: 9999999999;
}
<div class="parent">
<div class="left">This is some text that can and should be overlapped as width decreases</div>
<div class="right">This Text should always overlap text to the left</div>
</div>
.left{
overflow: hidden;
}
.parent{
width:100%;
}
Adding an overflow property to the left div will hide the text as the right text overlaps it in combination with a parent that is 100% width. Works like a charm.
Dont know if I understand what you want. But here is a solution as I understood the task. When the screen has a width of less then 900px, the 'right' div will be displayed on top of the 'left' div. (Added some colors to make it easier to understand where each div is)
.parent {
display: flex;
align-items: center;
letter-spacing: normal;
outline: 0;
background-color: green;
}
.left {
text-align: center;
display: flex;
align-items: center;
background-color: yellow;
}
.right {
width: 15px;
min-width: 15px;
position: relative;
display: flex;
background-color: pink;
z-index: 9999999999;
}
#media screen and (max-width: 900px) {
.parent {
flex-direction: column-reverse;
}
}
<div class="parent">
<div class="left">This is some text that can and should be overlapped as width decreases</div>
<div class="right">This Text should always overlap text to the left</div>
</div>
I would like two elements (divs) in a column. The first has a fixed height, and the second I want to fill all remaining height. If the content of the second element exceeds the space left, I want to scroll its contents, and not have the second element take up more space (which causes the parent to scroll).
Image (current)
For example, the "first element" is the search bar in this photo. Fixed height, and remains on top.
The "second element" is the data table. As you can see at the bottom, the table contents extend the height of the page, and the entire page becomes scrollable. This is not what I am looking for.
Image (desired) I would like the table container to behave similarly to this red box. It fills it's remaining height, and when it contains content that overflows, I would like just that element to scroll. Only scroll the content within the confines of the red box.
I have seen many examples similar to this, but all of them have a specified height for the "second element", even if it is a vh property. vh doesn't work for me since the 100% isn't the entire viewport.
I've been using flexbox to try and achieve this, and I get close, but I've only ever been able to either specify a height for the "second element", or have it grow to fill available space, but then exceed it, and overflow the whole container.
The below code is very close to desired behavior, except when the viewport becomes to small, "box 2" goes off screen and the whole thing scrolls, I want the content in "box 2" to scroll.
html,
body {
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2</div>
</div>
Just apply an overflow:auto on the second div and a max-height to the container.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
max-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
overflow: auto;
}
.expando {
height: 1000px;
/* for demo */
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2
<div class="expando"></div>
</div>
</div>
html,
body {
height: 100%;
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
height: 100%;
overflow: auto;
}
I have two divs with text of different sizes, that I want to align to the bottom.
They do successfully get aligned to the bottom of their parent, but they're not aligned evenly to each other.
Is this solvable?
.container {
display: flex;
height: 50px;
background: pink;
}
.large, .small {
align-self: flex-end;
margin-right: 5px;
}
.large {
font-size: 30px;
}
.small {
font-size: 15px;
}
<div class="container">
<div class="large">Large</div>
<div class="small">Small</div>
</div>
One way would be to put both text DIVs into another wrapper (.inner_container in my snippet below) which gets the settings the texts previously had in order to align to the bottom, and apply display: inline-block; to the text DIVs: inline-blocks align to each other by their baseline by default, which is what you want if I understand correctly:
.container {
display: flex;
height: 50px;
background: pink;
}
.inner_container {
align-self: flex-end;
}
.large,
.small {
display: inline-block;
margin-right: 5px;
}
.large {
font-size: 30px;
}
.small {
font-size: 15px;
}
<div class="container">
<div class="inner_container">
<div class="large">Large</div>
<div class="small">Small</div>
</div>
</div>
As per #Johannes answer it's a good idea to wrap both text divs in another container. But you don't need an align-self: flex-end; declaration for the .inner-container, just add align-items: flex-end; to the parent div. That way, you get one CSS rule less.
display: inline;, like display: inline-block, makes items align themselves by their baselines (based on the item with the biggest height, in this case the .large text) so you could change the <div class="large"> and the <div class="small"> to spans instead of divs. Since the default display property of <span> is inline, you can then skip the display declaration of .large and .small:
.container {
display: flex;
height: 50px;
background: pink;
align-items: flex-end;
}
.large, .small {
margin-right: 5px;
}
.large {
font-size: 30px;
}
.small {
font-size: 15px;
}
<div class="container">
<div class="inner-container">
<span class="large">Large</span>
<span class="small">Small</span>
</div>
</div>
So I have a variable number of elements in a div that has a variable width. The elements inside have a fixed space between them, 5px, but each one needs to expand to fill the full width of the space of the outer div with padding, so the text can be centerized.
Example:
.button-container{
width: 100%;
height: 50px;
}
.button-container .button{
min-width: 75px;
display: inline-block;
text-align: center;
border: 1px solid #FF0000;
}
.button-container .button + .button-container .button{
margin-left: 5px;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
So how can I make the padding inside of the button class elements have a dynamic left and right padding to fill the space of the button-container class div?
Ideally, the solution will be a CSS only solution, as I don't want to have jQuery to do the spacing.
CSS tables would work here.
.button-container {
width: 100%;
height: 50px;
display: table;
border-collapse: separate;
border-spacing: 5px;
}
.button-container .button {
display: table-cell;
text-align: center;
border: 1px solid #FF0000;
vertical-align: middle;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
You can use flexbox:
.button-container {
display: flex; /* Magic begins */
}
.button-container > .button {
flex: 1; /* Distribute the width equally */
text-align: center;
margin-left: 5px;
border: 1px solid #FF0000;
}
.button-container > .button:first-child {
margin-left: 0;
}
<div class='button-container'>
<div class='button'>B1</div>
<div class='button'>B2</div>
<div class='button'>B3</div>
<div class='button'>B4</div>
</div>
i have a div that has a specific height and the content inside adjusts according to height VERTICALLY now what i did is i added the property display-table; to the parent div and display: table-cell;vertical-align: middle; to the child div now what happens is my div is vertically aligned and looking good but the h1 inside the child i not exactly as centered aligned as the button i figured adding some padding top or margin top might solve the issue but it is not accepting either of these here's my code
html
<div class="all-smiles" id="parent">
<div id="child">
<div class="container" align="center">
<div class="row">
<h1>All Smiles Welcome</h1>
<button>BOOK AN APPOINTMENT</button>
</div>
</div>
</div>
</div>
css
#parent {
display: table;
width: 100%;
height: 250px;
}
.all-smiles {
background-color: #b7181c;
}
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
}
.all-smiles button {
padding: 12px;
background: 0;
color: white;
border: 1px solid #fff;
text-decoration: none;
font-family: young;
}
#child {
display: table-cell;
vertical-align: middle;
}
FIDDLE
You need to specify these two:
Vertical Alignment as middle
Line height and 1
Code:
.all-smiles h1 {
color: white;
display: inline;
margin-right: 3%;
vertical-align: middle;
line-height: 1;
}
Preview
Fiddle: https://jsfiddle.net/wd3sr2xv/