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.
Related
I have a div with a variable width, and I have a variable amount of children inside this div. I want the children to fill up the space inside the div. I first tried to change the div to display:table and the children to display:table-cell but I ended up all the children filling up all the space and not obeying their width and max-width properties. Then I've tried the table approach: I've changed the div to a table (yes, I know, it's not recommended, that's why I'm probably here asking) and wrapped the children into a tr and each in tds, but I ended up all the children cells filling up the whole space, but aligned to left (I've set the children divs display:inline-block):
If I change the alignment to center, I get this:
They are centered, but I still get spaces on the left and right of the parent (with the yellow background that I've set for distinguishing). What I actually want is this:
I've achieved this by setting the first td to align text to left, the second to center, the third to right. But I may have more of these thumbnails, so I need a general solution.
How can I lay out a variable number of children inside a container to fill the width, with the first element starting at the exact left border of the container (unlike the second image) and the last element ending at the exact right border of the container (like shown in the third image)?
Something like this?
HTML:
<div>
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
</div>
CSS:
div{
background: #ff6;
text-align: justify; /* Important */
font-size: 0; /* Used to remove spaces */
}
div:after{ /* Used to create a new last line */
content: '.';
display: inline-block;
width: 100%;
height: 0;
overflow: hidden;
}
span{
display: inline-block;
height: 150px;
}
/* Use your widths, min-widths and max-widths here: */
#s1{
background: red;
width: 15%;
min-width: 50px;
max-width: 150px;
}
#s2{
background: green;
width: 40%;
min-width: 50px;
max-width: 250px;
}
#s3{
background: blue;
width: 40%;
min-width: 50px;
max-width: 200px;
}
Demo
You can obtain equally spaced boxes using text-align: justify on the wrapper. The problem is that it doesn't work for the last line (which in this case is the first too), so you can either use text-align-last, or an :after pseudo element with width: 100% in order to create a new last line.
I want to create a breadcrumb for a website.
The elements should expand to fill all of the available space. If they couldn't fit on it, I'd like to have their inner text clipped with text-overflow: ellipsis, except the last one.
In other words: have the last element with the full width, and distribute the other ones on the remaining space (with width depending on their content, or if not possible at least they should't look bad...).
I tried with this code.
<div>
<ul>
<li>paka</li>
<li>ultrapaka</li>
<li>ultrapaka</li>
<li>ultrapaka ultrapaka</li>
<li>daslidjsajdsa</li>
</ul>
</div>
Here the CSS:
div {
display: table;
margin: 5px;
border:1px solid #777;
padding: 3px;
table-layout:fixed;
}
ul {
display: table-row;
}
li {
display: table-cell;
padding: 5px;
border: 1px solid #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
If I put table-layout: fixed the table really constrains its space, but I lose the automatic cell width.
If I don't put it, the table just overflows outside of its limits.
You can find a JsFiddle here. (I have set the table width to 400px to show the desired effect, even though on the final solution it should expand at 100%).
The best way to do that is using flexbox properties, but it's hard to make it work for all browsers.
You could maybe give a fixed width or percentage for all cells, and use the :last-child selector to apply an auto width on the last cell.
You could also try box-sizing, but I'm not sure about the result.
.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'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/
I want to use overflow on a div to show all div and image, and text to but for this example i used only images.
i need a horizontal scroll, if i only use image its work well with the white-space: nowrap; css but if each images are in a div the sroll disapear and images don't show all.
Example 3 here
the first exemple work if i give a width to a wrapping all div but i can do this methode since all the div are called dynamicaly, it's mean that i can got 1 div to hundred one.
Here the code of the 3rd example
#dmcscroll2 {
white-space: nowrap; display:
block; width:660px;
height:112px;
overflow: auto;
overflow-y: hidden;
/*overflow :
-moz-scrollbars-horizontal;*/
border-style:solid;
border-width:1px;
border-color:#000;
}
.div-image{
float: left;
width: 125px;
}
how can i do for the 3rd technique without knowing the number of div with images a will get from a dynamic javascript call.
You may look at the source code to see more in detail
You can remove the float:left from .div-image CSS and add display: inline instead:
.div-image{
display: inline;
width: 125px;
}
That seems to work the way you wanted it to on your example website.