So because of design reasons I had to use flexbox here and I needed the btn p elements to act like display block, which I managed to through another stack post, but now when I make the "other divs" class 100%, it goes out of the main parent, I cannot figure out why?
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-wrap: wrap;
}
#menu {
display: flex;
flex-basis: 100%;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}
<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>
As from the example above the grey box goes outside of the red border?
You can switch to column direction and have something like this :
#outterWrapper {
display: inline-block;
height: 200px;
border: 1px solid red;
}
#container {
display: flex;
height: 200px;
flex-direction:column;
}
#menu {
display: flex;
}
#menu p {
margin: 0;
padding: 8px;
padding-bottom: 0;
}
.otherDivs {
height: 100%;
width: 25%;
background-color: grey;
margin-right: 5px;
}
<div id="outterWrapper">
<div id="container">
<div id="menu">
<p>Btn</p>
<p>Btn</p>
<p>Btn</p>
</div>
<div class="otherDivs"></div>
</div>
</div>
Related
I have the following layout (see snippet below).
This is the expected behavior.
The problem is:
Once the extra-large-content is simulated (by removing the comment on the extra-large-content CSS rule), it breaks the layout.
I would like the extra-large-content to scroll horizontally while staying inside column-3.
Is this even possible?
(the code is also available here https://codepen.io/Ploddy/pen/NWXOgMG?editors=1100)
body {
height: 1920px;
margin: 0;
}
.container {
display: flex;
border: 1px solid #ccc;
margin: 1rem;
}
.container > * {
border: 1px solid #ccc;
position: sticky;
top: 0;
align-self: flex-start;
flex-grow: 1;
margin: 1rem;
}
#column-3 {
height: 300px;
}
#extra-large-content {
background-color: lightgreen;
/*width: 3000px;*/
}
<div class="container">
<div>
column-1
</div>
<div class="container">
<div>
column-2
</div>
<div id="column-3">
column-3
<div id="extra-large-content">
extra-large content
</div>
</div>
</div>
</div>
This should work nicely for you. Essentially, I just specified width's on the .container elements. In theory, you could put overflow-x: scroll; on the .container, however, this would break your sticky positioning.
Edit ~ OP wants the extra-large content to scroll horizontally, not the entire column-3.
Set overflow-x: scroll; on the new parent wrapper of the div that has the 3000px static width.
body {
height: 1920px;
margin: 0;
}
.container:first-child {
max-width: 100%;
}
.container:first-child > div:first-child {
width: 40%;
}
.container:nth-child(2) {
width: 60%;
}
.container:nth-child(2) > div:first-child {
margin: 1em 0em 1em 1em;
}
.container {
display: flex;
border: 1px solid #ccc;
margin: 1rem;
}
.container>* {
border: 1px solid #ccc;
position: sticky;
top: 0;
align-self: flex-start;
flex-grow: 1;
margin: 1rem;
}
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
}
#column-3 {
background-color: salmon;
}
#extra-large-content {
height: 300px;
width: 3000px;
background-color: lightgreen;
}
.xl-content-wrapper {
overflow-x: scroll;
}
<div class="container">
<div>column-1</div>
<div class="container">
<div>column-2</div>
<div class="wrapper">
<div id="column-3">column-3</div>
<div class="xl-content-wrapper">
<div id="extra-large-content">extra-large content</div>
</div>
</div>
</div>
</div>
The issue comes from using flexbox.
Switching to grid fixes the problem.
body {
height: 1920px;
margin: 0;
}
#primary-container {
position: relative;
display: flex;
margin: 1rem;
}
#secondary-container {
position: relative;
display: grid;
grid-template-columns: max-content 1fr;
align-items: start;
}
#column-3 {
display: grid;
grid-auto-rows: min-content;
height: 200px;
}
#content-wrapper {
overflow: auto;
}
#extra-large-content {
width: 3000px;
background-color: lightgreen;
}
.sticky {
position: sticky;
top: 0;
align-self: flex-start;
}
.border {
border: 1px solid #ccc;
}
<div id="primary-container" class="border">
<div class="sticky">
column1
</div>
<div id="secondary-container" class="border">
<div class="sticky">
column2
</div>
<div id="column-3" class="sticky border">
column3
<div id="content-wrapper">
<div id="extra-large-content">
extra-large content
</div>
</div>
...
</div>
</div>
</div>
This seems like an easy question but I've been trying to fix it for a couple of hours now and I still cannot find a solution. I have a box with two columns like in here:
p {
margin: 0;
padding: 0;
margin-right: 2px;
}
.container {
padding: 5px;
width: 90%;
height: 200px;
margin: auto;
border: 1px black solid;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.half {
width: 50%;
}
.left-col {
display: flex;
}
.right-col {
text-align: right;
}
.tooltip {
position: relative;
border: 1px black solid;
border-radius: 100%;
width: 14px;
height: 14px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="row">
<div class="half">
<div class="left-col">
<p>Username picked on regitration:</p>
<div class="tooltip">?</div>
</div>
</div>
<div class="half">
<p class="right-col">
John WithLongSurname
</p>
</div>
</div>
</div>
The problem is, that when I open the page on mobiles, the text on the left column is too long and it wraps (which is good), but its width still takes a whole column, so the tooltip is not next to the text but in the center of the box (it sticks to the right side of the column). Example:
I tried to add width: min-content to the "label" class, but then the whole paragraph just collapses to the smallest possible width. How can I adjust the width of the paragraph, so it will take only as much width as it needs to, so the tooltip will always be next to it?
It is because you are using display: flex; for the .left-col class. By default it will distribute the width automatically and evenly.
Try the styling below to see if it works:
p {
margin: 0;
padding: 0;
margin-right: 2px;
}
.container {
padding: 5px;
width: 90%;
height: 200px;
margin: auto;
border: 1px black solid;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
}
.half {
width: 50%;
}
.left-col {
display: inline;
}
.right-col {
text-align: right;
}
.tooltip {
position: relative;
border: 1px black solid;
border-radius: 100%;
width: 14px;
height: 14px;
font-size: 12px;
display: inline;
}
p.label {
width: auto;
}
<div class="container">
<div class="row">
<div class="half">
<div class="left-col">
<p class="label">Username picked on regitration:
<span class="tooltip">?</span>
</p>
</div>
</div>
<div class="half">
<p class="right-col">
John WithLongSurname
</p>
</div>
</div>
</div>
I have the following structure, where the number of names (.name) in .list is dynamic. What i would like to achieve is when content (depending on n of .names) is longer than .parent's fixed height, both .children fit inside the .parent (inherit height). Lack of space would be solved with .list getting a scrollbar (overflow:auto).
Height inheritance works well with single child, but I am having huge problems when there are two or more.
JSFIDDLE HERE
HTML
<div id="grandparent">
<div id="parent">
<div id="list" class="children">
<div class="name">john</div>
<div class="name">mike</div>
<div class="name">jack</div>
<div class="name">terry</div>
</div>
<div id="footer" class="children">
<div>footer</div>
</div>
</div>
</div>
CSS
body, html {
margin: 0;
width: 100%;
height: 100%;
}
div {
box-sizing: border-box;
}
#grandparent {
background-color:yellow;
display:flex;
align-items:center;
width:100%;
height: 100%;
flex: 1;
}
.children, .children div {
padding: 5px;
}
.children {
max-height: inherit;
}
.children div {
width: 100%;
max-height: inherit;
}
#list {
overflow: auto;
padding-bottom:0;
}
#footer {
padding-top:0;
}
.name {
background-color: green;
}
#footer div {
background-color: pink;
}
#parent {
background-color: blue;
margin: 0 auto;
max-height: 100px;
}
P.S. sorry for the code mess, i was just testing out different options.
Add this to your code:
#parent {
display: flex;
flex-direction: column;
}
body,
html {
margin: 0;
width: 100%;
height: 100%;
}
div {
box-sizing: border-box;
}
#grandparent {
background-color: yellow;
display: flex;
align-items: center;
width: 100%;
height: 100%;
flex: 1;
}
.children,
.children div {
padding: 5px;
}
.children {
max-height: inherit;
}
.children div {
width: 100%;
max-height: inherit;
}
#list {
overflow: auto;
padding-bottom: 0;
}
#footer {
padding-top: 0;
}
.name {
background-color: green;
}
#footer div {
background-color: pink;
}
#parent {
background-color: blue;
margin: 0 auto;
max-height: 100px;
/* new */
display: flex;
flex-direction: column;
}
<div id="grandparent">
<div id="parent">
<div id="list" class="children">
<div class="name">john</div>
<div class="name">mike</div>
<div class="name">jack</div>
<div class="name">terry</div>
</div>
<div id="footer" class="children">
<div>footer</div>
</div>
</div>
</div>
jsFiddle demo
Because flex items are set to flex-shrink: 1 by default, they will reduce their size in order to not overflow the container.
So I have a flexbox but I'm having trouble understanding why the first child's padding gets ignored when the second child's content overflows.
here's an example when the second child's content aren't overflowing.
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 10vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
Here's an example when the child's content are overflowing
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 100vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
you can see in the second example that the title's height has greatly reduced.
It's because you're using flex css, which tries to accommodate all the children. If the title is supposed to not change in size no matter what, you need to set its flex-shrink to 0.
So try changing the css to:
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
flex-shrink: 0;
}
I am working on a webpage and the idea is that there are boxes at the bottom
of the page with some text on it. So making a box is not that hard,
but my question is: How can you make the boxes like this that I drew:
How can you make/arrange the boxes like on the link I provided. My attempts at making it the same has thus far failed, the boxes aren't appearing or it looks very messy.
So far I have this:
.div1 {
width: 500px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.div2 {
width: 200px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
color: #fff;
margin-left: 5%;
}
.container2 {
float: left;
margin: 0 auto;
width: 100%;
display: flex;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>
You can put them in a flex wrapper and define the containers themselves also as flex containers with flex-direction: column as shown below.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
width: 100%;
}
.container1,
.container2 {
display: flex;
flex-direction: column;
}
.container1 {
width: 70%;
}
.container2 {
width: 30%;
}
.div1 {
width: 90%;
height: 100px;
border-radius: 25px;
padding: 15px;
background: #73B7DB;
margin-left: 5%;
color: #fff;
margin-bottom: 10px;
}
.div2 {
width: 90%;
height: 160px;
border-radius: 25px;
padding: 15px;
background: green;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container1">
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
</div>
<div class="container2">
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
</div>
</div>
isn't flex-direction: column; he need to use flex-wrap:wrap; in container 2, beacause when you use display:flex; , flexbox dont respect the width of the elements, then you need to apply the property flex-wrap:wrap;. i'll recommend you use porcentege instead pixels
.div1,.div2 {
width: 100%;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.container2 {
float: left;
margin: 0 auto;
width: 68%;
display: flex;
flex-wrap:wrap;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>