This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
So I have a flex container with 2 children. And I want to assign a fixed width to the first child. But If I set width: 200px, for some reason it does not work.
Here's my code:
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
However, if I use min-width instead of just width, it works alright.
I also found out that if I delete some text from the blockquote, then it works fine.
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
.carousel blockquote {
flex: 1;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
Related
I have two sections: a hero and an about section. There is a container that I am using but for the about section, the image on the left will go outside of the container line, while the content on the right will stay within the container. I have attached a photo of what I am trying to accomplish.
.container {
max-width: 1280px;
margin: 0 auto;
}
#about {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.content {
background-color: #1A969F;
padding: 2rem 8rem 2rem 3rem;
}
<section id="about">
<div class="img">
<img src="about-img.jpg" alt="">
</div>
<div class="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
</div>
</section>
from comments:
yes, with grid you are missing 2 columns. – G-Cyrillus
So we would use two extra grid columns for the about section? Would we still be able to use the container class for the other sections and navbar? - Webdev1995
i made you an example below of the idea of 2 extra columns (but on the parent ;) ) that #about can span through – G-Cyrillus
extra column shoul be used from .container where you did set the max-width inside the grid via minmax() instead max-width on .container.
here is an idea:
.container {
margin: 0 auto;
display: grid;
grid-template-columns: 1fr minmax(auto, 1280px) 1fr
}
section {
grid-column: 2;
background: #bee
}
#about {
grid-column: 1 /span 3;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #eee
}
.content {
background-color: #1A969F;
padding: 2rem 8rem 2rem 3rem;
}
<div class="container">
<section>whatever of 1280px max-width</section>
<section id="about">
<div class="img">
<img src="about-img.jpg" alt="about illustration">
</div>
<div class="content">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, vitae! Quam, ipsam quidem autem numquam ipsa atque debitis similique pariatur aliquid, quibusdam labore mollitia dolorum temporibus et magni, commodi blanditiis.</p>
</div>
</section>
<section>whatever of 1280px max-width</section>
</div>
Here's the setup:
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
}
#in {
background-color: red;
overflow: scroll-y;
}
input {
width: 100%;
box-sizing: border-box;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
You can see that the red box runs off the bottom. I want a scrollbar to appear instead, and the 5-pixel blue padding should be visible on the bottom.
How can I do this?
Note that I don't know the exact height of the red box. If there's less content, there should be no scrollbar, and the total height will be less than 250px.
Update: Based on your updated question, you can use display:flex instead of the max-height that I initially suggested and keep the overflow:auto.
#out {
background-color: blue;
width: 100px;
padding: 5px;
max-height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
#in {
background-color: red;
max-height: 240px;
overflow: auto;
}
<div id="out">
<input value="stuff here that i don't know the height of">
<div id="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
Ok so we have a div #out with a max-height to get scrollbars. The #in div will add the blue border and the #scroll div contains the content that will scroll on overflow-y
#out {
width: 100px;
max-height: 250px;
position:relative;
background:blue;
padding:5px;
}
#in {
background-color: red;
height:240px
}
#scroll{
height:100%;
overflow-y: scroll;
overflow-x: hidden;
}
<div id="out">
<div id="in">
<div id="scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eius voluptatibus tenetur cumque, incidunt maxime, cum dolorem sed corporis. Iste illum eaque enim cum quo saepe dicta perferendis incidunt. Accusamus.
</div>
</div>
</div>
#out {
width: 100px;
max-height: 250px;
overflow: scroll;
background-color: blue;
padding: 5px;
}
#in {
background-color: red;
overflow: scroll;
max-height: 245px;
}
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I trie doing different things but can't seem to get rid of the white space between 2 inline-blocks here, thus list is not next to inline-block-div:
.parent {
border: 10px solid red;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
border: 5px solid blue;
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
The space actually comes from HTML. By default space will be added to inline-block elements. I hope you knew to fight the space's. And another issue in your CSS is you forgot to add box-sizing:border-box property.
Without this property width is calculated as follows
width: 75% + border-left-width + border-right-width. So eventually your width is
75%+10px. Your width will be added more if any padding mentioned. Try this code instead
div{
box-sizing:border-box;
}
.parent {
border: 10px solid red;
width:100%
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
margin-left:-4px;
border:5px solid blue
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
I recommend to use flex. Flex is very useful to develop.
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
You can make the parent a flexbox to have it fixed
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
I have a fixed side bar on the left and a right content area. Is there an alternative to calculating the content width other than calc()? I wanted a more browser safe method.
.left-sidebar {
width: 160px;
height: 100%;
border-right: 1px solid black;
position: fixed;
top: 72px;
}
.right-content {
position: absolute;
left: 160px;
top: 72px;
width: calc(100% - 160px);
overflow: hidden;
}
I have already done a similar example, which I would like to share. You need to use positioning for this case. This is a case of fixed-fluid:
+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+
Or
+-------+-----------+
| FIXED | FLUUUUUID |
| | FLUUUUUID |
+-------+-----------+
Fixed-Fluid Model. In my snippet, I have demonstrated two kinds of examples. In the first case, the fluid is less in size. And the next has too long content.
Snippet
.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid</div>
</div>
<div class="parent">
<div class="fixed">Fixed</div>
<div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>
For a better fixed fluid, I have done with the same kind for you:
.main-content {border: 1px solid #999; padding: 5px; position: relative; min-height: 200px; padding-left: 125px;}
.left-sidebar {position: absolute; left: 0; top: 0px; width: 120px; background-color: #eee; height: 100%;}
<div class="main-content">
<div class="left-sidebar"></div>
<div class="right-fluid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum libero iure facere quam iste, nostrum laborum in, dolorum beatae optio rem explicabo voluptates qui quos eius accusamus! Accusamus blanditiis, et!
</div>
</div>
Say we have this responsive design with 3 columns (all 3 are dynamic contents so we don't know their heights)
For desktop:
For tablet (left column moves to the right)
What's the best way we can achieve this? (I don't mind using flexbox or other modern css specs)
You can make the elements make float: left on desktop with with 1/3 width each, then on tablet/mobile give them 50% width and make 1 and 3 float: right.
HTML:
<div class="b1">
1
</div>
<div class="b2">
2
</div>
<div class="b3">
3
</div>
CSS:
div {
float: left;
width: calc(100%/3);
box-sizing: border-box;
}
#media (max-width: 600px) {
div {
width: 50%;
}
.b1,
.b3 {
float: right;
}
}
Working JSFiddle
div{
border: 1px solid #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
float: left;
}
.div1{
background : yellow;
width: 25%;
}
.div2{
background : red;
width: 50%;
min-height: 400px;
}
.div3{
background : purple;
width: 25%;
}
#media (max-width: 768px){
.div1, .div3{
clear: right;
float: right;
width: 30%;
}
.div2{
width: 70%;
}
}
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo reiciendis sapiente cumque optio incidunt, dolore impedit officiis ut tempore. Pariatur commodi perspiciatis ducimus laudantium atque sed eveniet explicabo animi ipsam!</div>
https://jsfiddle.net/yuywh5gv/
Try this, it might help. You can edit CSS as your wish
HTML code:
<div class="wrapper">
<div class="left"> 1 </div>
<div class="middle">2 </div>
<div class="right"> 3 </div>
</div>
CSS code:
.wrapper div {float:left;margin-right:.5%;text-align:center;}
.wrapper div:last-child {margin-right:0;}
.left {background: yellow; width:33%}
.middle {background: green; width:33%}
.right {background: blue; width:33%}
# Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen and (min-width:769px)
<div class="b1 col" >1</div>
<div class="b2 con">2</div>
<div class="b3 col">3</div>
add style bellow ::
div {
border: 2px solid black;
padding: 20px;
float: left;
box-sizing: border-box;
}
.con{
width: 66.66%;
}
div.col {
width: 16.5%;
}
.b1 {
height: 50px;
border-color: #ee8;
}
.b2 {
height: 200px;
border-color: #fcc;
}
.b3 {
height: 80px;
border-color: #caf;
}
#media screen and (min-width:321px) and (max-width:768px) {
div.col {
width: 33.33%;
}
.b1,
.b3 {
float: right;
}
}
DEMO