I have what I want here, however I must manually enter the width. I want to have a parent container that will hold the stretchable div that contains child divs. The parent container is a fixed size. I need the stretchable div to be large enough to horizontally contain the child divs. Setting the stretchable div to width auto does not work and I do not want to manually set the size. Is there another option besides manually setting the size?
#parent{
width:50%;
height:200px;
background:red;
overflow-x: scroll;
overflow-y: hidden;
}
#stretchable-div{
background:darkblue;
/* width: 600px; works but don't want to manually size*/
width: auto;
}
.child {
background:blue;
width: 100px;
height: 150px;
float:left;
}
If you need to make stretchable div auto width, it has to be decided by it's children. Which is conflicting with children's float property(floating behavior is decided by it's parent width). So you have to change either of the parent's width or children's floating.
I can use display: inline-block and nowrap property to make the chidlren in a single row. But you have to hack inline-block under IE7.
The example is here.
Cannot find a pretty nice solution for now. Just give it for a hint.
Related
Although I can work around this, I'm curious: why is it when I set a button's width to 100% and set the margin-left property, that it pushes it beyond the containing box (on the right side)? I've tried changing the display property on the button to other values, but I'm getting the same result. Example here:
https://codesandbox.io/s/sharp-nobel-r5x8k
<h1>Hello Vanilla!</h1>
<div id="one">
<button>Beyond bounds</button>
<div id="two">Stays in bounds</div>
</div>
div#one {
background-color: blue;
width: 200px;
padding-top: 1rem;
padding-bottom: 1rem;
}
div#two {
background-color: green;
margin-left: 2rem;
}
button {
width: 100%;
margin-left: 2rem;
}
There are a few things to understand here.
div#one has a fixed pixel width (200px).
The button has a set width 100%. 100% means it inherits the full
width of the parent container.
div#two has no defined width, which means it defaults to auto.
margin property creates extra space around an element.
With these things in mind, we can now get into specifics as to why this scenario occurs.
Since div#one is working with a set width, the space inside the container will be confined within that dimensional space.
div#two does not have any specific width, which means it defaults to auto.
What does that mean? It means that:
width: auto; will try as hard as possible to keep an element the
same width as its parent container when additional space is added
from margins, padding, or borders. This is why that in your current scenario, div#two stays within bounds, because it has yet to break into an overflow case.
width: 100%; will make the element as wide as the parent container.
Extra spacing will be added to the element's size without regards to
the parent. This is why the button exceeds its parent container with exactly 2rem.
I have a container DIV which is used in all the pages of my wordpress site. We can call it the parent DIV here. And I also have a child div inside it. The parent DIV is set to 1170px width. And the child DIV is set to 100%. So, its taking the full width of parent DIV naturally. But I want my child DIV to go full screen without getting affected by the width of parent DIV. To make my child DIV go full screen, the most simple ways were to take the child DIV out of parent DIV or to make the parent width go 100%. But I can't do both. It has to be where they are and also since the parent DIV is used in nearly all the pages I can't change its width to 100% in the stylesheet. Is there anyway how I can get my child DIV go full screen without getting affected by the parent DIV?
.container {
width: 1170px;
}
.child {
width: 100%;
}
Make child div's position fixed:
child-div {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #FFF;//Optional
}
i believe you will find the answer here
.child-div {
position:absolute;
left:0;
right:0;
}
Answer took from this post
Is there are way to make a child DIV's width wider than the parent DIV using CSS?
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
http://jsfiddle.net/XW9Se/
I've set width: 200px; on the left <div> but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.
Why doesn't the width take effect?
EDIT: If I remove width: 100% the width stays fixed. But I need that so the #main div takes the remaining width :( Is there any way to have the sidebar # fixed width and the other <div> fill the rest of the container width? width: auto; on #main doesn't work..
The answer from Adrift is perfect; but a change to make it more flex would be
#left{
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
And remove the width property entirely.
It would be the flex way to say that the element will have an invariable width of 200px
My preferred way of dealing with this situation is to add:
flex-shrink: 0;
This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.
Another option, depending on the requirement is to use min-width, which is respected when using flex.
Give the #left div a min-width of 200px, should do the job.
Remove the width on .container > div and use flex: auto; on #main: fiddle
#main {
flex: auto;
background: lightblue;
-webkit-order: 2;
order: 2;
}
Also (if nothing from above works)
Check your min-width and max-width.
It fixed the same problem for me by increasing their range.
add display: contents on the element or div you want to maintain the width.
Solved this with a flex not respecting min-width when there was not enough content to fill that width.
Added the CSS rule box-sizing: initial; on the same flex element that had the non-working min-width declaration.
Add display:inline-block; in left class
<body>
<div id="parent">
<div id="childRightCol"></div>
<div id="childLeftCol"></div>
</div>
</body>
Parent's height is suppose to be dynamic and stretches to the max height defined by the child. ChildRight dynamically changes height but I want it to be 100% height of parent. ChildLeft some times defines the height of parent.
The problem is that because ChildLeft defines the height of the parent. Height:100% on childright doesn't work because parent's height isn't defined. Please help.
id="news-flicker-container"
id="news-flicker-userbars"
Instead of using display: none and display: block to toggle visibility, use visibility: hidden and visibility: visible which keeps the size of the elements.
To prevent the articles form stacking on top of each other, you have to compensate. This can be achieved by floating all the articles to the left of each other, and give them all but the first a negative margin so they all remain at the same location.
See this demo fiddle which demonstrates two situations, i.e. an article with less height then the right column and one with larger height then the right column. In both cases the height of the left column (the height of the largest article) decides the height of the parent div.
The basic requirements for the CSS:
#news-flicker-container {
float: left;
}
#news-flicker-userbars {
float: left;
}
#news-flicker-container article {
width: 100%;
visibility: hidden;
float: left;
margin-left: -100%;
}
#news-flicker-container article:first-child {
margin-left: 0;
}
Equal Height Columns with Cross-Browser CSS
If you don't need to support IE 6 and 7, this would be a better approach:
Use CSS display:table for Layout