i am not able to explain it correctly....but here it is....i want DIVs to float left in the container such that...when their total width increases the width of the container...they will make a horizontal scroll-bar but will not go below one another in any case...
like if the container's width is 500px;
and it contains 5 children DIVs each of 200px width
now when i float then left...they stack like 2 in a row and 2 in the next row....eg:
div1 div2
div3 div4
div5
i want them something like this :
div1 div2 div3 div4 div5
with scroll-bar...
I would recommend, instead of floating them, set display:inline-block;, then apply white-space:nowrap to the container element.
And be sure the container has no fixed width. (min-width is OK though).
update
1) fixed error (thanks to JOPLOmacedo)
2) working example at: http://jsfiddle.net/t9Vnf/
Related
I encountered a problem and didn't find a solution for this. I'm pretty confused because I thought this was a very simple requirement.
There are the following elements:
a surrounding div#wrapper
div#A, floating left and fixed width
div#B, floating left (right of #A) and dynamic width
Inside of div#B there are plenty of images, floating left and fixed width (and height).
Depending on the screen resolution there should be 1, 2, 3, n columns of images on the right part of the screen (next to div#A). Instead of this, container #B is aligned below container #A and uses the full window width.
My alternative attempt was giving #B a float:right and a margin-left (which was greater than the width of #A), but that also didn't work.
I would like to avoid absolute positioning because the height of the surrounding wrapper should increase with its content.
To visualize what I'm talking about, I made the following diagram:
http://abload.de/img/rezeptbilder1k8lsr.png
Many thanks in advance!
this is happening because..you are having dynamic width for your div#B...ans as there are plenty of images and they are aligned next to each other...so eventually div#B grows to 100% width...when it has 100% width then it arrives under the div#A.because 100% + div#A's width cant fit together in a 100% wide screen..you understand???
1st solution :: you may use width:calc(100% - div#a's width).it will give div#b a width equals to remaining free space besides div#a
or you may use overflow:hidden in your div#B...now at first this div will grow eventually to take the width of remaining free space with a single row of images and once it has 100% width it will create another row of images..but for this your wrapper must have fixed with with **overflow:auto;** also..overflow:auto; in wrapper will introduce scroll bar when combined with of div A and B is greater than 100%
EDIT :: CHECK BROWSER SUPPORTS FOR CALC() HERE
note::if you provide us your try our suggestion will be more appropriate
I can't really provide a solution because you haven't provided any code. (please do so)
That said... Based on your description and your image, your floats on div#A and div#B are breaking. The most common reason for this is that your width is adding up to be more than 100% of the width of your div#wrapper (the containing or parent element of the floated elements)
Your floats should always end up equally 100% (less than 100% works but then you have some extra space somewhere etc).
For example... If you have #wrapper which is 100px wide, then you can have two div's inside which are 50px and 50px wide, or 30px and 70px etc. as adding those values = 100px which is 100%.
So... Why is yours breaking? I suspect it is because you are trrying to mix a dynamic width element, with a static width element. Float was never designed do something like this. There are various ways to achieve it, but which way depends on your code which I don't have.
Other possible reasons why is is breaking is because of too much margin space, too much padding, or even a border on your divs. The width of an element, by default includes it's padding, margin, and border widths. If you have a 100px wide div, with 10px of padding on the left and right and a 2 px border the whole way around (2px on each side). Then you have a div with a total width of 124px.
I want an html Page where it contains 9 Divs.
Div1 Div2 Div3
Div4 Div5 Div6
Div7 Div8 Div9
But I want it so that Div8 Is only flexible. It has a minimum width and height but as long as the window grows it can grow.
The rest of the divs are fixed size.
Div1, 4, 7 should be floating Left
Div3, 6, 9 should be floating right.
Thanks very much in advance.
I don't know if I understand your question right, but here is a fiddle describing your needs, ofcourse the width of the divcontainer elements can be variable, if you also adjust the div8 max-width. For resizing to viewport you can use percentages instead of pixels.
I have created fiddle here: http://jsfiddle.net/ozzy/WEGMh/
How it should look is here:
Issue is the left and right hand divs arent showing. I have tried z-index , but it must be something painfully obvious.
My code may be crap too..
The idea is the container height will be flexible. Container width fixed.
Header fixed width and height
left div will be fixed width and flexible height.
right div can just adopt left divs parameters.
footer div fixed width and height.
If that makes sense.
The left and right divs are showing, it's just that their height is zero.
They get their height from their content, and as there is nothing in them, the height becomes zero.
The default for a div is to fill up the available width, but not to fill up the available height.
I have 2 divs...each are float left, and each have a "width".
When I resize my browser, the right div goes down to the bottom of the left div. Why? I'd like it so that during resize, it stays there.
There are a lot of solutions to this. A solution that preserves your existing float layout:
Enclose those two div's in a parent div where the width is set wide enough to hold both those divs.
They are "wrapping" because you marked them as floated elements and when their parent container becomes too small to put them on the same "line", the second one pops below, just like text, etc.
You are likely making the browser width too small for both floated divs to be side by side.
One way to prevent this is to wrap them in a larger semantic div that has a fixed or min-width. Or, simply give the body itself a min-width. Min-width is not supported in IE 6, just set the width for IE6 and it will treat it as min-width.
Give Width as "50%"
I have 3 divs and all of them are floated to the left. My container can accommodate only 2(intentional) so the 3rd div is pushed below. My problem is the height of 2nd div is more than the other two, and the third div is showing up where 2nd div ends, leaving an empty space between 1st and the 3rd div. I want the 3rd div to wrap around the 2nd div, so that it shows up right below 1st.
I have tried floating the second to the right, and seems like it works, but I wanted to know if there is solution floating all of them to the left.
Just to clarify I have added an image showing the problem below:
http://img684.imageshack.us/img684/3209/divs.png
For a simple fix, you can wrap the same element around div1 and div3, assign a width and float left, assign a width to div2 and float it left as well.. assuming source order doesn't matter.
Won't making div1 wider (the same width as div3) solve this?
If you know the exact heights of the divs, you could use a negative top-margin on div3 to bring it up.
#div3 {
top-margin: -100px;
}
(replace '100px' with the difference between div1's height and div2's height)