I want to describe my idea first, check the fiddle here:
There are two divs, #left and #right, #left has a fixed width and both are floated left. Container division has no fixed width and can be resized in my design. The requirement is that #right cannot be shifted to next line. Width of #right will be automatically adjusted to the container division and overflow text will be hidden. All of the three divisions have fixed height.
In the fiddle mentioned above, I set #right 50% width to make it adjusted, which is not that perfect. The container division may not be full and shifting problem still occurs.
I can implement the layout with javascript to adjust the width of #right, but is there any css solution with the help of min-width or anything else?
Thanks a lot.
is this what you want it to be??
http://jsfiddle.net/N3jhV/
Please dont hesitate to correct me
Something like this? http://jsfiddle.net/remibreton/4qLmq/
This solution will work only if the #left element has fixed width.
Is this what you are looking for ? http://jsfiddle.net/As7Hz/14/
How about this version: http://jsfiddle.net/As7Hz/18/
Related
Sorry, my english is not good :)
When resize the width of the window. How width of dm2 is dependent on the to-n sorted column?
dm1,dm2 is no fixed width in css.
I tried to use text-align for dm1. display: inline for dm2. It works fine, but I found it at fault. I do not know no other way handle it?
Demo Here: https://jsfiddle.net/bindo1995/m4vajbqw/2/
Default
Use text-align for dm1, display:inline; for dm2
How ?
Thanks for helping me !
The problem is that using float or display: inline-block; to-n blocks will always try to fit horizontally on one row when there is enough space for each block and when there is no space for a block it will be on the second row and there will be gap in dm2. If you want them to be 3 on first row and 2 on the second and to fit 100% in dm2 you have to make 2 rows of to-n blocks.
To go into more detail, consider this:
I have a row of three divs R(right), C(center), and L(left).
They are encapsulated within a parent div Container
Container has the css style display:inline-block
I have L floated left
I have R floated right.
I have C centered by setting margin: auto.
My problem: I want the middle div to be centered until R and L collide with it. In the event that this happens (window resize). I want C to clear both, and center itself underneath R.
What is the best way to achieve such a result? I understand I may have approached the set up wrong, please advise if that is the case!
Thanks in advance!
Like #atdrago mentioned, media queries is really the way to go here.
If your widths are fixed, you can also try floating the center div to the left and putting a (fixed) max-width on the .container element.
http://jsfiddle.net/mrhps/2/ is a working example.
Would have commented, but not enough reputation. Anyway, you will need a listener for resize - it will be nasty. Media Query is the way to go as mentioned.
is a working example
.C {
margin: 0 auto;
background-color: blue;
#media (max-width: 20em) {
clear: left;
float: right;
}
}
Sorry new here, it appears I need add code from the jfiddle to post a link...oO
This has to be the most simple case of css issue. But I could nt find a solution to this problem..
I have a main div which has min-height of certain value. Ive given the min-height in in % so there is no outer div and it will not show the min-height. if I give min - height in px , it will show up.
but I am trying to get the min-height to be 50% of window height and it could vary in each devices, so giving height in px is not an option for me... if I give jquery.css() function, and keep it document.ready() function, when the page starts loading, it will have zero height and it will come down to height that Ive specified and that doesnt look good in website..
Case 1 : http://jsfiddle.net/pT56y/
FIDDLE EXAMPLE
case 2 : http://jsfiddle.net/pT56y/2/
Is there a proper way to deal with this issue?
in order to use a percentage height, the parent must have a set height (either in pixels or %):
body,html{
height: 100%;
}
.container-fluid{
background:#000000;
width:100px;
min-height:50%;
}
Fiddle
Having some trouble with a very basic CSS problem.
I have a container that has a max-height of 655px. Now to the very right of that container is a fixed position container (it must be fixed position due to what I'm doing). The fixed position container has an absurdly large height.
It needs that height because it will be filled with content, that you'll ultimately see by clicking buttons and by some javascript. (changing the scrollTop)
I'm not 100% sure what I'm doing wrong, but I basically need only 655px of the fixed position container to show. I'm not really sure why this doesn't work the way I have it setup.
Check out the JS fiddle here: http://jsfiddle.net/BG2bu/
.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}
I'm using this CSS to define the tall container. And I know if I change the position to absolute, it will constrain to the max height of it's parent container. I really need this container to be fixed though for other reasons. Is there any possible way to do this? Am I missing something simple here?
If this can be done with a JS/Jquery solution I'm definitely open to that.
Not sure this would be suitable for your needs but I've wrapped the .tall div with another container as position:fixed will not adhere to overflow:hidden in its container div.
http://jsfiddle.net/3DZ53/
Hard to tell if this suits your need or not, but could you...
.tall {
max-height: 655px;
overflow: scroll / hidden;
}
I'm looking for a way to adjust width of a list inside a container (500px, 200px) automatically. What I want to achieve is something like this
fiddle
But the problem with it is that you need to set the width of the list so that horizontal scrollbars would appear. Is there a work around for it so that the scrollbars would only take enough space?
try this:
#container ul {white-space: nowrap;}