CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first)
It's not really clear what you are asking from this question alone but from the details of the other question it still seems as though flexbox is the solution as described by Oriol
.container { background-color: gray; display: flex; overflow-x: hidden; white-space: nowrap; justify-content: space-between;}.first { overflow: hidden; text-overflow: ellipsis; padding-right: 1em; border: 1px solid red;}.third { flex: 1; text-align: right; background:pink;}
<div class="container"> <div class="first">first div content</div> <div class="second first">second div content</div> <div class="third">third div content</div></div>
CSS: How to shrink first div in container instead of going outside of container
You can use flexbox:
.container { background-color: gray; display: flex; justify-content: space-between; overflow-x: hidden; white-space: nowrap}.first { overflow: hidden; text-overflow: ellipsis;}
<div class="container"> <div class="first">first div content</div> <div class="second">second div content</div></div>
Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below)
Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
Edit (03/2015):
This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%)
. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%
) because it will be relative to the parent and not the element it's applied to. transform
behaves differently. Its values are relative to the element they are applied to. Thus, 50%
for transform
means half the width of the element, while 50%
for margin is half of the parent's width. This is an IE9+ solution
Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
If you want it to be centered, you can do that too:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Demos:
jsFiddle: Centered horizontally only
jsFiddle: Centered both horizontally and vertically
Original credit goes to user aaronk6 for pointing it out to me in this answer
How to place div side by side
There are many ways to do what you're asking for:
- Using CSS
float
property:
<div style="width: 100%; overflow: hidden;">
<div style="width: 600px; float: left;"> Left </div>
<div style="margin-left: 620px;"> Right </div>
</div>
Make container shrink-to-fit child elements as they wrap
In CSS, the parent container doesn't know when its children wrap. Hence, it continues scaling its size oblivious to what's going on inside.
Put another way, the browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.
That's why the container doesn't shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.
The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there.
In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO
You'll need a JavaScript solution (see here and here)... or CSS media queries (see here).
When dealing with wrapping text, text-align: right
on the container may be helpful in some cases.
Floating elements within a div, floats outside of div. Why?
The easiest is to put overflow:hidden
on the parent div and don't specify a height:
#parent { overflow: hidden }
Another way is to also float the parent div:
#parent { float: left; width: 100% }
Another way uses a clear element:
<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>
CSS
span.clear { clear: left; display: block; }
Related Topics
CSS Multi Line Ellipsis Cross Browser
CSS How to Only Make Bold Fonts for First <Ul> Set
Make a Div Display Under Another Using CSS in a Totally Fluid Layout
Google Font Not Showing in Firefox
What Do Commas Mean in CSS Selectors
Mobile Menu Open & Close Buttons Display in Chrome But Not Safari
Why Calc Is Not Reevaluated When It Is Used for Font-Size
Bootstrap Dropdown Hiding in Modal
Adding Call Outs to a Highcharts - Stacked Bar
Possible to Set Hex Color Opacity Independently
CSS- Webkit-Text-Stroke But Stroke Covers Font-Color
Firefox-CSS: Border-Radius Issue for Pseudo-Element "Before"
Center Div in Parent with Only Min-Height, and Child May Without Height & with Relative Position
CSS Grid Vs Dynamic Definition List Autoplacement
Add All CSS Files in a Folder to Nuxt.Config
How to Scale Text Size Compared to Container