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;
}
Related
I'm having an annoying problem where my h elements (h2 for example) are floating after the previous elements.
I thought that h elements should just display block, aka, start on a new line? I guess I'm wrong. Also, am I wrong about what display: block means? I thought it meant that that div will take up all the space from left to right, which I thought would mean that it should start on a new line and when it's over with, the next element will also display on a new line.
I tried putting clear: both; and overflow: hidden; in the css of my h elements but it's not working.
The page looks like a mess with everything floating after each other, (right now just pictures and h2s). When I inspect the h2 elements in chrome (I'm viewing all this in chrome), the blue part, the actual element, is going all the way across, but my text isn't. The text is starting after the previous element.
I would like all of my h elements to always be on their own line, filling from left to right.
a screen shot of the issue
Thanks in advance!
The solution is to not only add the clear: both, but also overflow: auto to the container/parent element of the floating elements, so that it takes all the space the floating elements take.
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
I have a unordered list of thumbnails that work on every other page except one. On this one particular page, there is a large amount of whitespace on the third row. See below:
I don't get why it is doing this, it happens even if you take away padding and margin. The page that this is doing this on is http://bransonweekend.net/cabins/trailsend
This is because you are using:
.picture-board .pinned-photo img {
max-height: 160px;
}
and in that row the first image form factor makes it go the max-height but the other two are too wide so the height is less than the max 160px.
try adding this:
.thumbnails>li{
min-height:172px;
}
this will make sure they are the same height even if they are too wide
Try out this library:
http://masonry.desandro.com/
It's useful in cases like these, where elements have to line up on a grid. Masonry is used all over the internet.
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.
So I'm pretty new to both css and html but this is not the first time that I have used floats to achieve 2 divs sitting next to each other. This time it is not working properly and I've been tinkering around for about 3 hours and I figure I should call on some help.
I have edited the portion of my website in jsFiddle to assist in describing my problem:
http://jsfiddle.net/9QRcP/10/
The problem isn't that you're not assigning your divs to float: right, but that your divs are small enough that you can fit multiple of them within the page width, so they're doing exactly what they should do.
To fix this, though, we would add clear:right to #about_side and #about_side_footer, but that won't force them to be level, so it doesn't quite fix the problem.
To fix that problem as well, instead of floating each individual piece of your #greeting_wrapper and #about_wrapper left and right, respectively, float the wrappers left and right instead.
#greeting_wrapper {
float: left;
}
#about_wrapper {
float: right;
}
#greeting_header, #greeting, #greeting_footer, #about_side_header, #about_side, #about_side_footer {
float: none;
}
I found that you need to float #greeting_wrapper and #about_wrapper. These wrappers are the important elements. As far as I can tell, the children of these divs shouldn't need to be floated as well.
Also currently those divs are taking on the width of the body which is 960px thus forcing both divs onto a new line.
I had a fiddle with your code: http://jsfiddle.net/9QRcP/15/
I haven't bothered to correct the alignment, but left is now on left and right is now on right.
By my own admission this isn't a very good approach to this. A few pointers:
you can use 'clear: left' to force an element on the left to move to a new line http://www.w3schools.com/cssref/pr_class_clear.asp
you should probably contain your left and right elements in 2 seperate containers (e.g. class="container left" and class="container-right" ). Clear left for any sub-element in the left container that you want to move to the next vertical level, and likewise for elements in the right container. This will allow you to easily break your page up into columns. Here 's one I prepared earlier http://jsfiddle.net/9QRcP/19/ from http://www.quirksmode.org/css/clearing.html
you could probably save yourself a lot of work by using a grid system, e.g. http://960.gs/
The issue is with the width of your wrapper. If you increase the width, the floated div will take its place on the right.