This is a bit complicated, and is a Chrome specific issue (jsFiddle for reference).
I have some html that is a container which houses three DIVs:
one header div (which must grow and shrink to the size of the container)
one "child" div (which is always in the top left corner, but otherwise acts like a child div)
and one "child-container" div that houses zero-to-many child divs (which should float left and then wrap after the fifth item)
<div id="container">
<div class="header">cool header</div>
<div class="child">child 0</div>
<div id="child_container">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
</div>
</div>
The issue that I'm having is when there are 5 or fewer "child" divs. If there are more than 5 "child" divs, everything formats properly. If there are fewer than 5 "child" divs, then the last "child" will always appear underneath the "child 0" div. What I need is the "child" divs to NOT warp to a second line until there are greater than five children.
I've tried a several different approaches (ie, different display types, floating containers, not floating all children, etc.), but no matter what I try, either the "header" class doesn't size properly or the children don't wrap properly.
Suggestions?
Solved Check Demo
Giving min-width: attrib solves the issues check the different wrap numbers
Its the Container width which dictates when it wraps you currently gives max limit
EDIT:Even though its chrome specific issue in chrome it is solved by giving min-width:
Demo Which Shows the difference with and without min-width
Related
Let's say I have this structure:
<div className="row">
<div class="col-sm">
<div>TEST</div>
</div>
<div class="col-sm">
<div>TEST<br>TEST<br>TEST</div>
</div>
</div>
Basically, I know how to make the columns of the same height (using the .equal class on the row) however, what I need is the child div of the column to also be of the same height. Currently, if one of the child divs is shorter, it won't look aligned because I set the background color to be in the child div and not on the col-sm div.
I cannot set the background on col-sm for flexibility reasons. E.g. I may need to use that child div component in another section that doesn't use 'col-sm'.
Mine currently is the one on top, I want it to become the one at the bottom:
A situation like this, for me, would be time to turn to jQuery or a plugin such as MatchHeight.
matchHeight makes the height of all selected elements exactly equal.
I'm working on a self contained responsive css component (type of carousel) for a website i am implementing.
The need is to have an infinit number of content items (loaded from a server), showing exactly two at a time. As the user advances through the list of items, they appear to scroll to the left with new items transitioning in from the right pushing the current items to the left.
the items should get their width according to the current responsive layout.
The general idea is to have viewport which is a part of the page layout and can accept any width stated in px or in %, a container which gets width: 100% so that it fill the size of the viewport. and items which are arranged horizontally side by side without wrapping, the items get a width of 50% so exactly two items fit into the container/viewport and the rest of the items overflow (and are hidden.)
<div class="viewport">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<!-- more items get loaded as the user advances through the content -->
</div>
</div>
"scrolling" is achieved by setting a negative margin on the first item - which this technique i can always set a negative margin which is: <number of items> * 50%
I got this mostly working in the following jsfiddle: http://jsfiddle.net/gZBEV/5/
The items are arranged correctly and they get their width according to the width of the surrounding viewport. (use the buttons to emulate moving/scrolling through the items)
The problem is a horizontal gap (shown by the arrow) which appears between each item which screws up the layout.
The solution to this would be to find a way were the items have no horizontal gap between them like so:
Use this fiddle http://jsfiddle.net/gZBEV/5/ as a starting point.
It's because the elements are display:inline-block. Inline block level elements respect line-height and font-size and whitespace. change the font-size of the parent to 0px and the gaps disappear. This means you will have to reassign the font size after the fact (Great for image only sliders. Not so much for content sliders).
http://jsfiddle.net/RAbSU/
.container {
...
display: inline-block;
font-size: 0px;
& > * {
font-size: 12px;
}
...
EDIT: otherwise, you could just change the format to display:block with float:left.
If you remove the carriage returns inside the div, this will remove the space:
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
I wrote below code to display 3 divs in a 600x400 container, but got below problem. Please help.
<DIV A style="float:left;width:200px;;height:200px;"></DIV>
<DIV B style="float:left;width:400px;;height:400px;"></DIV>
<DIV C style="float:left;width:200px;;height:200px;"></DIV>
Instead you need to float a container that contains the two smaller divs, a-la:
<div style="float:left">
<div style=";width:200px;;height:200px;"></DIV>
<div style="float:left;width:200px;;height:200px;"></div>
</div>
http://jsfiddle.net/ExplosionPIlls/r7b7e/
If A and C are both floated, they won't wrap anyway unless the width of the container is small enough to make them wrap. However, the container (of all three divs) also needs to include the larger div, which makes that impossible. Instead you need to wrap them in their own container.
Your div B should be float: right;
This might explain my question a bit better:
I need one child div positioned on top of the other so that the last-child is only showing around the edges, but the two child divs need to scroll together and keep the background of the first-child div static. This mesa that the viewport would be the first-child, but the content of the first and second child would have to scroll within the container so they can scroll together., with the first-child being the viewport.
I have the following HTML structure:
<div class="container">
<div class="text">
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
<div class="row">Row</div>
</div>
<div class="bars">
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="b"></div>
<div class="a"></div>
</div>
</div>
The bars extend to the width of the page, and the text div is overlaid on top of them, with a margin around it. I position each bars div so that they match up at the same horizontal level with the visually corresponding row.
The text div is positioned to be x pixels from each side, so that there is a margin around it. This way, you can see the ends of the bars below it.
The markup is easy, but I can't figure out the CSS for this...
text is positioned absolutely, so that it can extend to the bounds of the page with a margin. This is fine if the content inside it stays within the bounds, but it does not in this case.
This is all very hard to explain, but basically, here's the problem: I set container to overflow:scroll because I need the bars to scroll with the rows. Since text has a background image, and is positioned so that you can just see the ends of the rows beneath it, it has to be position:absolute. This doesn't work, however, when the content exceeds the bounds of text. I can't add the background image tocontainerbecause it would cover the ends of thebars`.
Does that make sense? No? Here's a jsFiddle: http://jsfiddle.net/charlescarver/BskaP/2/
Does it still not make sense? Here's a picture:
Any ideas? Ask me some questions so I can explain this better.
You don't need a lot of the css that's there -- for example the .container. If I understand correctly (and I'm not 100% sure I do) you'd like a image on the .text div which remains fixed while the rest of the page -- bars and text scroll.
You cannot put the image on the text div as it will scroll; rather, I suggest putting the image on each .row with a position: fixed as well as using padding-bottom:20px instead of the margin, so that there appears to be an image behind all of the rows and the effect is continuous. That will give you the effect I think you're after
http://jsfiddle.net/BskaP/5/
You can use jQuery's scrollTop() function to get an elements position based on scroll. Coupled with a scroll() event, you should be able to sort something out.
So put something in your scroll event to offset the position of your rows and text by the value of scrollTop().
scrollTop() : http://api.jquery.com/scrollTop/
scroll event : http://api.jquery.com/scroll/
My initial thoughts was to avoid JavaScript by combining the rows and text elements together and fake the rows being behind the text... but given your specific situation I couldn't come up with anything...
You should add overflow:auto to row. Here is a jsfiddle that proves it works: http://jsfiddle.net/BskaP/3/
I added an extra long row to it for an example.
I don't know if this is what you want, but I think it is.
I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.
That was the quick and short question, for a little more details and an example, please see below.
I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.
And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.
Please see the following example.
I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.
Each "row" is floated to the left so that they appear horizontally.
<div class="container">
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
</div>
.row {
float: left;
}
In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?
Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.
Thank you.
The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.
See this fiddle: http://jsfiddle.net/XYzea/1/
Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element
The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line