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.
Related
I'm trying to make a list of thumbnails of variable amount be centered while the thumbnails all fit on one line, but then subsequent lines be left-aligned, while the parent element responsively stays centered in the page. width:fit-content works well for one line, but when there are multiple lines it goes to 100% width (in mac chrome anyway). Illustration of the problem:
http://codepen.io/scotthorn/pen/eutAH?editors=110
If there is another way to achieve my desired goal, I wouldn't mind changing any part of the css or html markup. A background that fits the area isn't necessary, it's only in my example to better show what's going on. My primary goal is to have a list that behaves like a centered container of inline-block elements for one-line, but then when a second line has to be created, the first element in it lines up below the first element of the first row rather than being centered by itself.
Hopefully that makes sense, if not I can make a mockup.
I would imagine wrapping the whole thing in a div and centering that with a % width would do what you want. But a mock up would help me understand.
Or you may be able to use margins to squish the inside content.
Your example works well, except you probably want to add a max-width to your UL..
For example, if you wanted to have a max of 7 items per line in your case, you would
add:
ul { max-width:630px}
updated codepen
good luck =)
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.
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.
Why can't I show a box within a box, within a box, within a box, with 4 different background colors, 4 different div ids, I don't want to specify a width, I only see two colors when I should see 4?
Thanks for your help - Matthew
Whey can't I show tags? This is kind of complicated!!!!
A block element will fill out the dimensions of its parent element unless there are explicit widths set or there is padding inside a containing element. So if you have divs inside divs, make sure you have padding in the containing divs set (if you're not going to set explicit widths)
you must set some min-height and min-width style and then you can give proper style each div
DEMO
You need to specify a height. The div could be 0x0 and that's probably not what you want.
Below is an example of what we think you want but I specified a height and width.
http://jsfiddle.net/8T6KG
Update:
As recommended, I removed the width and height:
http://jsfiddle.net/8T6KG/3/
can you paste some sample code? plus, you can try setting the position to relative. And I think the outer most div needs to have some height and width set.
Up to now I have two choices (maybe there are more outside):
Set the width of body tag to a fixed length and set the horizontal margin of the body tag to auto. It makes all contents get horizontally centered.
Create a wrapping div inside the body. Set the width of the wrapping div to a fixed length and set the horizontal margin of it to auto. It also makes any contents inside the wrapping div get centered horizontally.
I don't know, which one is better. Or if you have another alternative that you consider the best one, let me know.
A wrapper div is more flexible, because you never know when you're going to want an element to not be centered. A couple months down the line if the site requires changes you'll be happy you had a wrapper div, ends up being less work because you can have siblings of the wrapper div and do what you want with them.
With that said, if it's a fairly simplistic trivial example/site, sure go ahead and 0 auto the body element.