I apologize for the terrible title.
I'm running into an issue. I have a couple elements, by name they are:
-page
-graph-container
-lots of elements
-selector
The graph-container element and selector are to be inline next to each other with the selector floating right. The graph-container element is supposed to have a lot of elements all next to each other (on the same line), thereby making a scrollbar in the x coordinate.
For the life of me, I can't get this to work. The current CSS goes like this:
-page - width: 820 (applies correctly)
-container - height: 500px; width: 620; display: inline-block; overflow: scroll;
-lots of elements - display:inline;
-selector - float:right; display:inline-block;
What this gets me is a vertical scroll with the elements wrapping around the end onto the next line. What I would like is all the elements to be on the same row, and the scroll be left and right/horizontal.
idem, white-space, but you have to distribute it where needed and reset where not.
another way, not as usual as white space, is to set a colum-width.
It will build as many column needed to fit in the height of its container.(set a width, else it's one line :) )
To display your 2 main containers aside each other, there's floatting, inline-block + white-space, and display:table/table-cell usually used.
Here is a mixed of possibilities.Test & Pick up the one that feet best your point.
http://codepen.io/gcyrillus/pen/kvLzu http://codepen.io/gcyrillus/full/kvLzu .
Don't hesitate to fork and play with, nothing will get broken )
Well, I figured it out and this could be helpful for anyone Googleling. Try adding
white-space: nowrap;
overflow-x:scroll;
To the container.
Related
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal
i'm really stumped by this current page i'm working on. The layout is a grid.
The page is dynamic so the cells (divs) will be shifting about or even disappearing over time.
Because the location of the last cell will be changing, i want this last cell(div) to always extend horizontally across the remainder of the containing div. The point being to create a gray top border.
here's a link, it's obvious to see what i'm trying to do.
http://www.tomcarden.net/ug-post.html
i thought it would be easy. i thought the last cell (div) if not given a width attribute would naturally take up the remaining space in the row but it's not (?)
the class of this div is .last-cell.
i tried making the width:100% but that doesn't work. that breaks the page. the cell clears and starts a new row, i tried clear:none so it would stay floated to left but that didn't work. this can't be that hard...?? can anyone lend some advice on this?,
big thanks in advance.
Quite tricky, but try adding this:
.last-cell {
width: 100%;
margin-top: -153px;
}
The width: 100%; will indeed make it into one row, bumped by the last picture, but with the negative margin you push it back up. To keep the image on top, apply:
.grid {
z-index: 100;
}
This is a problem that I run into frequently:
Given some horizontal nav links, what ways are there to ensure that the links don't squash together such that they'll push up or down onto two lines?
I thought that just setting a min-width for the container of those nav links would work (e.g. setting the ul or a container div of the ul to min-width:500px) but as the example shows, that isn't enough. I feel like I'm just missing something simple, but it's an unknown unknown.
Edit: I removed some margin on the li elements and it finally stopped wrapping to two lines. I still don't understand why added padding was causing the wrapping as opposed to simply expanding the width of the containing elements, though.
So what techniques do you guys have for making nav links stay in a horizontal bar formation?
Here is a jsfiddle with roughly the current example that I'm working with:
http://jsfiddle.net/tchalvakspam/nE8yU/5/
Do you want them to be visible? One option if you don't want them to wrap is to just have them not be shown. If you want to do that, this will work:
#admin-header {
overflow: hidden;
white-space: nowrap;
}
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.