I've run in to this problem before, but i can't remember what the question was called and i can't find a relevant solution, so here we go again.
I need to float two boxes to the left. These boxes have a static width, the same width as the parent. What happens now is that the boxes stack beneath eachother instead of floating, because the parent isn't wide enough.
Here is a (rough) illustration of what i want:
http://i.imgur.com/oHqsH.jpg
Any ideas?
I updated your code using white-space: nowrap along with display: inline-block. If you really need to do it with float: left, do what #Kurt suggested since it should work. But I really believe inline-block is the right approach here.
Check the Fiddle or look at the code here:
.parent {
width: 200px;
white-space: nowrap;
overflow: hidden;
font-size: 0;
}
.child {
display: inline-block;
width: 200px;
font-size: 1rem;
}
As far as I know, the only way to do this "cleanly" is to have this structure:
.window
.parent
.child
.child
The parent's width is sum of all of its children, while window has the width of one child.
To get the white-space: nowrap method to work, you'll need a container in between your parent and child items with position: absolute;. The children items will need to have position: relative; and you will need to assign a height to the top parent.
http://jsfiddle.net/79LWk/3/
Related
If I have multiple elements with the property justify-content: space-between in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here:
This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as 0 width, but still in the flex flow:
Is there a fix to this keeping the layout as it is?
CodePen
It turns out that all it takes is three simple steps
(Demo)
1). Set the left and right margin to auto on each child
img {
margin-left: auto;
margin-right: auto;
}
2). Set the left margin on the first child to 0
img:nth-child(2) {
margin-left: 0;
}
3). Set the right margin on the last child to 0
img:last-child {
margin-right: 0;
}
If you miss any of these steps it will not work properly
This works in firefox and chrome, I haven't tested it in any other browsers.
EDIT:
Thanks to #Pontiacks
Apparently you can get away with adding margin-left: auto to the img:nth-child(2)
updated jsfiddle
I have a much simpler hack to solve this particular problem.
div {
background-color: #66BB66;
display: flex;
position: fixed;
width: 100%;
justify-content: space-between;
}
div > img:nth-child(2) {
position: absolute;
left: 0;
}
<div>
<img src="http://www.fillmurray.com/150/150">
<img src="http://www.fillmurray.com/150/100">
<img src="http://www.fillmurray.com/150/150">
</div>
Just change the order in the DOM. The absolutely positioned element is still positioned wherever you put it, and although flexbox still treats it like it is in the flow, its position in the flow (in the dom) causes flexbox to allocate space the same way across browsers.
I believe you could use the order property to achieve the same thing.
I found that none of these handled my case, as I have three elements I want to have evenly spaced, and one absolutely positioned sibling. I found the trick in this case is just to add margin-right: auto to the first element to be evenly spaced, and margin-left: auto to the last element to be evenly spaced. You can check it out at this fiddle http://jsfiddle.net/tch6y99d/
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
I have a container whose id is #parent, I dynamically add several images of class .child, fixed width and height can be assumed for .child elements.
I want all .child to float next to each other to build a horizontal list. How do I get #parent resizing automatically to the total width of all .child ?
Thanks a lot!
PS: I need a pure CSS solution..
Fiddle: http://jsfiddle.net/u8GPN/1/
Solution can be found here: http://jsfiddle.net/u8GPN/28/
You can make your parent inline-block and add white-space: nowrap; to it:
#parent {
display: inline-block;
overflow: hidden;
border: 1px dashed blue;
white-space: nowrap;
}
http://jsfiddle.net/u8GPN/22/
To test dynamically adding new blocks http://jsfiddle.net/u8GPN/23/
You can also give position: absolute to the #parent div to solve the problem for cross-browser support. (or go with white-space: nowrap as shown in #dfsq's post)
#parent {
display : block; /* (or) inline-block */
overflow : hidden;
border: 1px dashed blue;
position:absolute; /* Doesn't extend the width more than the page's width */
}
Working Fiddle
As you stated that the .child elements have fixed width and height, You need to give #view height explicitly equal to the .child elements height, to occupy the space in layout.
I have a website whose layout has been shown in the diagram. The body consists of a main container, which comprises of header, parent div and footer. The parent div further contains several child div as shown.
The problem being height of all the child div is finite. But the parent div contains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.
The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for.
Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.
Please comment if I am unclear in asking my doubt !
Seems like you got a case for the clearfix class.
So I'm guessing you're floating the child div and that's why the parent div's height is 0.
When you use floats, the parent doesn't adapt to the height of the children.
You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.
Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Try adding the following to your stylesheet:
#parentdiv:after {
content: " ";
display: block;
clear: both;
}
As Daedalus suggested in his comment, you're probably floating the child divs. If so, the line above fixes it.
The problem when you float things is that their parent element "ignores" them.
The line above creates and inserts a (pseudo-)element into the #parentdiv which is pushed down past all of the floated divs. Then the parent div, which although ignores the floated children, doesn't ignore this pseudo element - acting as it should, it expands to contain the pseudo element. Now, since the pseudo-element is below all of the floated children, the parent div happens, or better yet, seems to "contain" the floated children as well - which is really what you want.
#João-Paulo-Macedo 's work, as implemented in a styled div:
export const HeadroomWrapper = styled('div')`
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 2;
&:after {
content: " ";
display: block;
clear: both;
height: 1px;
}
`;
I want a div containing three images and I'd like the images stacked vertically.
I've set the div width to the width of my images and that doesn nothing. Here's my code:
.detailImgWrapper
{
display: inline;
position: relative;
width: 25px;
top:-210px;
}
.detailImgWrapper img
{
visibility: hidden;
padding: 0;
padding-top: 10px;
display: inline;
width: 25px;
height: 25px;
}
Thanks for taking a look.
set your images to display: block, and they should stack vertically.
A combination of parent with display:inline and child as display:block is a technique I use to arrange elements horizontally with dimension. Display:block is necessary to give dimension (i your case padding).
The code you have written appears to be working towards lining-up the images horizontally rather than stacking them vertically. So, I wonder what function the display:inline is serving in the parent?