I am trying to create a list that will float on the right side of an image.
So first of all to understand better, here is the fiddle :
http://jsfiddle.net/xpGbD/1/
Both the list and the image are contained inside a mutual DIV that floats.
What I am aiming for, is for the list to have a Key:Value pair, but some of the values are much longer than others.
This produces a problem, that when the value is greater than (DIV) - (Image) , the list jumps ABOVE the image, UNLESS I specify a fixed width for the list when floats right.
The problem is - I do not have a fixed IMG width , so if the width of the image is 100px for example, this will produce a large gap between the list and the image.
On the other had - if I fix a width on the LI elements , it will work, but will break if the image´s width will become bigger...
So the questions is :
How do I float the LIST elements to the right of the image without specifying width ??
Ps - another related problem :
at the current state - When a list VALUE is long , the key is positioned ABOVE the value. I would like it to start on the same line, and if needed to flow , flow below the VALUE areaa ,and not the key area (hence the )
Let me see if I've got the point...
When you try to float HTML elemets with unknown width, set the CSS property
display: inline;
To all floated elements.
Note that, the elements with different widths will not have an arranged grid view (table view)
If you want a table view : then you should specify width or use Table tag.
Hope this helps you.
Fiddled with absolute positioning yet?
http://jsfiddle.net/k4Rh8/
You going have limit the max width of the images, what's the problem in resize few images? Anyway, when you click at the image it will appears bigger right? Maybe a light box... And there's no wrap with a fidex width at your content right now, try this way...
Take a look, there was no fixed width at the div headblock...
http://jsfiddle.net/xpGbD/11/
Try to resize the image and see if it works as you wish.
The one with the min-width:
http://jsfiddle.net/xpGbD/12/
Just to register, maybe cold help someone in similar cases.
Related
I have a list with 3 elements that are a certain size that fit in a container (the <fieldset> that can only hold one list item.
Right now, the other list items are overflowing underneath, I need the to overflow to the right on the x axis.
Here is a picture of what I am talking about:
And here is the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/setup.html
Any ideas on how to achieve this?
Firstly, that is a fairly odd way to use the fieldset element. In my opinion a div (or perhaps a section) element would make much more sense semantically.
Secondly, to achieve the effect I think you're looking for, you'll need to assign a width to the element that contains your three slides (by default the width is set to auto, meaning the element's children will break down to the next line assuming they're block elements). Assign a width of 1200px to the element ul#slides.
Next, set the overflow property to auto on your wrapping element, in your case the fieldset element. This should hopefully get you started on the right track.
I'm trying to achieve the effect of a horizontal accordion using exclusively CSS for animations and layout. So I have 4 columns set up and the main difference with a classic accordion is that when I click on a column, instead of expanding in one direction, it should expand in both directions and push the other columns left and right.
Here's a compact version of my code right now : http://jsfiddle.net/4ZGmj/183/
If you click on the red column, it works exactly as intended: the column is expanded in both directions and all other columns are pushed to the right. Now if you click on the green column, you'll notice something different: the column expands in both directions as intended, but it only pushes columns to the right while overlapping the column to the left. What I would like is for each column to push all neighboring columns when expanded.
I guess it might have to do with the fact that my columns are floated left. Do you guys have any insight on what is causing this behavior and what I can do to fix it ?
Thanks in advance
I think your issue may be in the .animate class, where you give it a negative 50px margin. Negative margins overlap the "previous" element (in all directions). If you remove the -50px, the images will only "flow" to the right, since they're "glued" via the float:left property, which will not do what you want anyway :(
I think the way to get around this is by using relative dimensions. Try setting up a div with a fixed width and use relative dimensions (like 25% for each). You probably have to set a behavior on the :not clicked divs aswell.
Like, if one div is ".animated", it has 33% width, while the others would have around 22%...
There's probably a better math you can arrange for it, though!
edit: typo
I was able to fix it and get the intended effect by removing the negative margin value from the "animate" class (this was responsible for expanding in both ways, but also caused the overlapping to the left). Instead, I added a new class "pushleft" that has this negative margin value and that I always apply to the first column. You can see the effect and get a better understanding of the idea here : http://jsfiddle.net/4ZGmj/185/
Thanks for your help, I wouldn't have fixed it if it wasn't for your input.
I want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.
What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/
Edit: Resolved, see comment below
Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.
What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.
You can use JavaScript to get the height of the left div, then set the right div to this height.
To get height of the left div:
var divHeight = document.getElementById('left').offsetHeight;
To set height of right div:
document.getElementById('right').style.height = divHeight+'px';
Your JSFiddle example fixed.
So, I got an answer to my question from #thirtydot (see comment above):
Do you need to support IE7? If not, you can use display: table-cell
I am working on a layout consisting of several nested Divs and I am ideally looking to get the content areas to stretch the height of the screen. This is pretty simple and I have done it in the past but not in this type of layout and am struggling with it. Instead of me pasting all of the code, I uploaded it to server that can be previewed.
http://www.danyuschick.com/theembalmed/
Any help would be great. I'm at my wit's end with this right now.
http://www.w3.org/TR/CSS2/visudet.html#the-height-property
< percentage >
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
So whenever you use percentages as height the containing block of the element must have an explicit height to be considered.
Look at this link:
http://ninja-code.net/extra/stackoverflow_test.php
It uses a lot less DIV and will expand as you fill content. It also keeps your images as borders along the 'conent' - I wasn't sure if you were wanting it to repeat.
I didn't want to hassle with pushing the footer to the bottom though.
I have two <div>s on my page. I want to arrange them side-by side, so that the first (right) shrinks to fit it's contents (unknown width), and the second (left) expands to fill the remaining horizontal width.
The two columns do not need to be equal in height.
Additionally, I would like to create a 5px gap between the edges of the two boxes.
Is this layout possible without using a table?
EDIT:
Here's a table version to show you the kind of behavior I'm looking for.
I think one of my answers on another question solves this:
xHTML/CSS: How to make inner div get 100% width minus another div width
Am I understanding your question correctly?
Yes it is! You can float the first column left, and play with margins to create your gap.
http://innonesen.se/test/l-41-mod/
Ths should do it ( tested only on IE6 and Opera ).
Additional feature exist that the main container will stop expanding ,
when sidebar is less then 100px wide .
http://innonesen.se/test/l-41-mod/no-right.html
P.S. sorry , i cant past URLs .. my rep is too low.
Sure, here are two different fiddles showing how you could do it. The #float example uses a float: left and then a margin-left on the other div that equals the #float width.
The #absolute one uses one absolute column of fixed width and then the other column sets a margin-left that equals the #absolute column's width.