.container
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.child
{
position: relative;
float: left;
height: 100%;
width: 95px;
background-color: #99CCFF;
margin-left: 5px;
}
I when the size of the browser window is smaller than will allow for all the children to fit without wrapping I would like there to be a scrollbar, not the default mechanism of the child elements wrapping.
I'm not in control of the number of child elements so I can not set a width on the container. How can I prevent the wrapping of the child elements?
If you don't want wrapping, you should not use floats - they were created specifically for wrapping.
Use a parent container with overflow:auto and white-space:nowrap and children with display:inline or inline-block.
This is not really possible with simple HTML and CSS. Without knowing the number of child elements, the only way would be to dynamically set a min-width using JavaScript, based on the number of child elements and their total width.
You can add a parent holder () of all childes. And then use the overflow:auto of that div. If that doesn't work then also use self.innerHeight and self.innerWidth (via javascript) for the div height and width.
Related
I am trying to set the background color of my container div and all child div's within it but I can't get it to work for some reason, and I am unsure as to where I am going wrong.
When I set the background-color and a border on the container you can see that it is not actually "containing" any child elements.
#facility_container{
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
}
Here is a JSFiddle demonstrating where I am at so far.
Add overflow: hidden to #facility_container, #facility_general_info, #facility_section_info
Float makes the inner divs not expand the outer ones. Using table settings to style your page is a big no-no in HTML5.
working jsfiddle: https://jsfiddle.net/nayish/docg128w/8/
The issue here is that, since your #facility_info divs are floated, they are taken out of the normal element flow, and therefore do not affect the width or height of the #facility_container div.
As suggested by Jon Ducket in his book HTML & CSS:
Set the container div's overflow property to auto, and its width property to 100%.
#facility_container {
text-align: center;
padding: 2px;
width: 100%;
background-color: #ffffff;
width: 100%;
overflow: auto;
}
In this case, since #facility_general_info already takes up width and height, it is not necessary to set #facility_container's width to 100%, but the above-mentioned property values can be used for elements that contain only floated elements.
I've got a div that contains a photo tiling style I've been working on. The parent div over all the photos is position:relative while the divs inside holding the photos are position:absolute
I have to use 'position:absolute` for the children to get the layout I want but the problem arises when the parent div (either .daddy or .floatcont) doesn't register with a height and appears empty.
How can I make the parent register a height so I can put content below it on the page?
Code here: http://codepen.io/jeremypbeasley/pen/iBgsp
.floatcont {
position: relative;
background: pink;
width: 90%;
margin: 5%;
}
.floatpic {
position: absolute;
width: 40%;
margin-bottom: 10vh;
}
Absolute positioned elements are removed from the flow, thus ignored by other elements. So you can't set the parents height according to an absolutely positioned element.
In your case, I have come up with one solution. Update your .sixth class like below.
.floatpic.sixth {
top: 270vh;
width: 50%;
z-index: 6;
position:relative;
}
Updated CodePen
Basically I've got a wrapper to which I've added the (relevant) css properties:
height: 100%; float: left; margin: 10px 10px; position: relative;
with a nested div styled as
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
with display: block; taking effect on hover of the parent, targeting the nested div.
The issue is that when it's hovered, the nested div overlaps the parent by about 4-5px. I can completely eliminate this issue by stating a set height on the parent element, but I would rather keep the height at 100% if possible!
JSFiddle:
http://jsfiddle.net/Trblestrife/Y9ztq/1/
EDIT If you know what's wrong but can't be bothered answering give me a hint and I'll do more research. I'm asking here because I've run out of ideas as to where to look
Thanks very much
The issue is probably that images, because they are inline elements, can add trailing whitespace at the bottom. Generally a fix is to give their parent element a line-height of nothing:
.featured-projectwrap{
line-height:0;
}
But this would mean any text nested would not be visible, so compensate by re-promoting the line-height at the caption level:
.caption{
line-height:1;
}
Here's your fiddle with the changes...
I would like to center and clamp the dimensions of a child div inside its parent.
<style type='text/css'>
.parent {
width: 100%;
height: 100%;
}
.child {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="parent">
<div class="child">
<img src='dog.jpg' />
</div>
</div>
Here are the constraints:
The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
The child div must be vertically and horizontally centered inside the parent.
Ideally, this should work without javascript.
IE can be left unsupported :)
I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:
Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
Negative margins: Doesn't allow for variable height.
Transforms: Undesirable because it can result in blurry rendering.
Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
Inline-block: Doesn't work in the important case where the child is 100% width.
Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.
Best solution here is to use :before pseudo element. Check out this article on centering the unknown, http://css-tricks.com/centering-in-the-unknown/
SEE THE DEMO HERE
body,html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
text-align: center;
background: #ccc;
width: 100%;
height: 100%;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.image {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
You could use display:table and display:table-cell like so Jsfiddle. Though this will just center the image of the child div.
If you need to have a centered div around the image you could always add another div inside of the child div with the style display: inline-block example
HTML:
<div class="content">
<div class="card">
</div>
</div>
CSS:
.content {
min-height: 350px;
min-width: 320px;
max-width: 350px;
padding: 15px;
}
.card {
width: 100%;
height: 100%;
background-color: black;
}
http://jsfiddle.net/aJhEF/1/
When examined with console, it shows that .content has functioning width and height. Then why does the child element, with its width and height being set to 100% not fill out its parent's width and height?
Child elements don't inherit their parents min-height property
This is why the .card element has a height of 0
As far as width is concerned, .card does fill out it's parent's width.
Danield is right.
You might solve this by using relative and absolute positions, combined with a negative margin (to compensate the padding):
.content {
min-height: 350px;
min-width: 320px;
max-width: 350px;
padding: 15px;
position: relative;
}
.card {
width: 100%;
height: 100%;
background-color: black;
position: absolute;
margin: -15px;
}
Because you gave the parent a set padding.
Remove padding: 15px; to fill out the div.
padding is extra space at the inside of the elements borders. If you want space around the outside, use margin.
You stated that you wanted your child to fill out the parent element, and since padding it is extra space on the inside of the parent element, the child will not fill out it's parent as long as the padding is there.
Edit: The reason you don't see the results you wanted is because you have your element a min-height and min-width instead of actual sizes. You need to give this element set size (be it pixels or %). This is due to the fact that your child element doesn't inherit the min and max width/height of it's parent.
See JSFiddle