I am trying to make a whole div's max width property the width of one element inside of it, how would I be able to do this? Or would I not be able to do this at all.
This is an example use case:
<div class="max-w-[610px]">
<div class="mt-12 mb-12">
<p class="mb-8">With RepoZoid, storing your own code is as easy as pie. Just add a new entry, paste your
code in - and you're off to the races.</p>
<p>It's as simple as 1, 2, 3 - with sharing options and more coming in the future!</p>
</div>
<div class="flex flex-row mb-3">
<div class="grow">
<input class="w-full text-[#9c9ea5] py-3 px-4 rounded-md" placeholder="Enter your email" type="email"
name="emailinput">
</div>
<div class="pl-2">
<button class="px-4 h-full rounded-md bg-[#6E6BFF] text-white">Sign Up to the Beta</button>
</div>
</div>
I'm not that familiar with Tailwind, but I'll give you a solution in Pure HTML/CSS.
.parent {
padding: 10px;
background: yellowgreen;
display: flex;
/* Add `flex-direction: column;` if you want each child to be in one-row */
width: fit-content;
}
.child {
width: 100px;
height: 50px;
}
.child:nth-child(1) {
background: red;
}
.child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
If you don't want to use fit-content, you can just use display: inline-block; and remove the width from your parent as follows:
.parent {
padding: 10px;
background: yellowgreen;
display: inline-block;
}
.child {
display: inline-block; /* Make it `display: block;` if you want each child to be in one-row */
width: 100px;
height: 50px;
}
.child:nth-child(1) {
background: red;
}
.child:nth-child(2) {
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
Additionally, I would quote a comment by #voneiden in a similar question;
A block element will claim the horizontal space that the parent has to offer whereas an inline-block will take the horizontal space it needs to display the content (unless overridden). If the inline-block is bigger than the parent, it will overflow. You can make a block element to evaluate content width by setting width: fit-content however that is not IE compatible.
Related
The parent has red dashed border, and the children elements are filled with blue. It can be implemented by inline-block, float, flex, etc.
I want to implement such effect: when the parent's width gets too small to contain the last children element, then the last element will be hidden.
How to implement this with pure CSS or with minimal JavaScript?
There is a way to do this using max-width, max-height and overflow, like the example below:
.parent {
max-width: 400px;
max-height: 60px;
overflow: hidden;
border: 1px dashed #ddd;
}
.child {
width: 100px;
height: 50px;
margin: 5px;
background-color: blue;
display: inline-block;
color: white;
text-align: center;
}
<p>There are 5 items here</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
And here is another example using flex instead of display: inline block; with max-width, max-height and overflow too
.parent {
display: flex;
border: 1px dashed #ccc;
max-width: 380px;
max-height: 60px;
overflow: hidden;
flex-wrap: wrap;
}
.child {
background-color: blue;
width: 100px;
height: 50px;
margin: 5px;
}
<pAnother example, using flex, with 5 items too</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
If your html structure is static, you can try to look into media queries.
Otherwise, i'm not sure it would be possible in CSS.
Using overflow: hidden on your parent element will not make the last child desappear until it totaly overflow.
Setting the overflow property of the parent container to hidden can do that for you.
Given the html and css below, is it possible to have a .child with class selected appear on top of other .child elements? I'd like if you can give an answer that would not change html structure and css position property of .child and .parent.
Also would be great to not toggle anything on parent, it is better to toggle child classes or styles, for parent it is better to set it once.
.parent {
position: absolute;
}
.child {
position: relative;
}
<div>
<div>
<div class="parent">
<div class="child selected"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
</div>
Greatly appreciate any input, thank you.
If you really want to stick to this HTML structure you could as example hide all elements (children) and show them only when they are selected.
A better solution would be having the selected class on the parent so then you could just simply give the selected parent a higher z-index.
Here you can find a snippet of how you can toggle the display without touching the HTML
// for demo purpuses
var toggleLayer = function() {
var next = $('.child.selected').removeClass('selected').closest('.parent').next();
var element = next.length ? next : $('.parent:first-child');
element.find('.child').addClass('selected')
}
.parent {
position: absolute;
}
.child {
position: relative;
display: none;
}
.selected {
display: block;
}
/* for demo purpuses */
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: red;
}
button {
position: fixed;
top: 120px;
left: 10px;
}
<div>
<div>
<div class="parent">
<div class="child selected">1</div>
</div>
<div class="parent">
<div class="child">2</div>
</div>
<div class="parent">
<div class="child">3</div>
</div>
<div class="parent">
<div class="child">4</div>
</div>
</div>
</div>
<!--- FOR DEMO PURPUSES --->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="toggleLayer()">Toggle layer</button>
I have the following html code:
body, html {
height: 100%;
}
.parent {
width: 15%;
height: -webkit-fill-available
}
.child {
height: 33.33%
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I tried the display:table for "parent" & display:table-row for "child" , but it didn't work.
Is it possible to do it?
I suggest to use flexbox, and don't forget to set .parent to height:100%.
The main advantages of using flexbox:
You don't have to deal with overflow problem, say there is more content in one row that couldn't fit 1/3 of the entire container height, it will simply expand the row automatically, and all the remaining free space will still be evenly distributed.
You can easily add or remove a row without changing the CSS, they will be evenly distributed based on the number or child divs.
If you need one or more rows to be shorter or taller, you can just use flex or flex-grow or flex-basis to adjust accordingly.
Plus, if you haven't heard of flexbox yet, you'll be amazed how powerful it is once you entered the flexbox world.
html,
body {
height: 100%;
margin: 0;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
}
.child {
flex: 1;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Apply height: 100%; and margin: 0; (to reset the default margin) to html and body, then 100% height for the parent and 33.33% for the children. No flex or table needed...
The main important thing is that the parent needs a defined height for the percentage values of the children to become effective. And if that parent height is a percentage value, also the parent of the parent needs a defined height. If you only use percentages, that goes up to body and html
body,
html {
height: 100%;
margin: 0;
}
.parent {
width: 15%;
height: 100%;
}
.child {
height: 33.33%;
background: #fa0;
}
.child:first-child {
background: #0fa;
}
.child:last-child {
background: #af0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Your code is working, just put min-width to see it in action.
<html>
<head>
<style>
.parent{
height:100%;
}
.child{
height:32%;
border:1px solid black;
min-width: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:
I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:
You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/
I have a dropdown bar with a bunch of options available to select. I want them to be inline but also want them to be scale-able so that they take up the entire width of the div (but also allowing multiple options per row). This is a photo of what I have so far:
Here is the html I have:
<h2>FILTERs</h2>
<span>Search:</span>
<input id="searchBox" type="text"></input>
<div id="conts" class="filter">
<div class="label">
<span>Option:</span>
</div>
<div class="content">
<div class="selector">Di1</div>
<div class="selector">Di 12</div>
<div class="selector">D 15</div>
<div class="selector">Div1</div>
<div class="selector">v1234</div>
<div class="selector">Di 3</div>
<div class="selector">D 12</div>
<div class="selector">v 1234</div>
<div class="selector">Di</div>
<div class="selector">D 123</div>
</div>
</div>
and the CSS:
.filter .content{
max-width: 96px;
max-height: 0px;
margin: 0px 12px 0px 4px;
background-color: #808080;
overflow: hidden;
}
#vertnav .filter:hover .content{
max-height: 256px;
}
.content .selector{
background-color: #369;
padding: 8px 4px;
display: inline-block;
text-align: center;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.content .selector:hover{
background-color: white;
color: #369;
}
The end goal is that each <div> on the same line will automatically fill the width of the row it is on, while not pushing the other <div>s onto a new line (aka, not using display: block; for example).
I am willing to use JS or jQuery but would prefer to use html and css only for this.
Thank you.
This is a typical situation for using flexbox:
Define the container as flex-container and give it these settings:
content {
display: flex;
flex-wrap: wrap;
}
(The first setting will do the equal distribution in lines, the second one will put the flex items (children elements) into several lines)