If you are talking about that 5px gap on each side, that’s the border you set (notice how it’s even a slightly different shade.)
The border is on #box.
Hi Ryan
No, I’m referring to the page when it narrows to 640px and the query kick-in. It deletes the #right but the #box is not occupying the newly empty space
Consider this situation, see if you can figure it out.
For bigger screens we set 190px gap (margin) on #box for each column. Now, if we remove #right (display:none), those margins on #box are STILL there. How can we undo that space in your media query? Let me know if you want the answer.
Right, Sir!
(I’ve been helping my daughter with her Maths. Now I’m on the other side!)
Thank you Ryan
Don’t foget the business of getting the left sidebar to go hand in hand with the #box…
Could you show me what you are seeing? My suggestion should have fixed everything.
Clear your cache also.
No too sure where to uoload screen shot. Everything is workinf fine but I don’t think we have adressed the length of the sidebar which is static (no surprise as I gave it a fixed length!) and I would like it to mimic the #box in length as the latter becomes longer with decreasing screen width.
So you want them to be equal height columns?
One method would be (in your media query) is to set both “box” and “left” to display:table-cell (and unfloat left).
Hi
How do unfloat something that’s floated. I did everything except that and the #box end up at the bottom of the #left…
float:none can be used and will “unfloat” the element in question, returning it to the default behavior.
I must have messed up again: misspelling, probably…
The #box has gone walk-abouts…
…and the sidebars are not going down with it while they’re side by side
http://pintotours.net/Work/Sights/Test.html (posting this so I don’t have to keep scrolling up.)
Yes, you didn’t quite do what I asked.
Re-read this (particularly the first part.)
I take it that this is all in the queries, right?
I’ve done all as instructed (I think) and the #box has gone back up, but now the text flows right out of the right margin.
Ryan, I have been taking too much of your time. I would like to go on for another 2 or 5 days… but, I think it is time for a break if I don’t get it right at the next post.
Can you screenshot what you are seeing? I’m not seeing any text flow outside of boundaries anywhere.
I don’t mind helping you; that’s why I’m here. We have made considerable progress.
I’m afraid I don’t see that anywhere at all.
I don’t like those responsive view testers. Much easier to grab your browsers window and make it smaller/larger as you need.
Yes, you’re right. In Chrome the #box is where it should be. The sidebar still does not follow, but we will have to leave that for another time.
Yes, but not for designing a page from scratch!
Many thanks for your help Ryan.
Over and out!
The problem is that (as I’ve eluded to) your HTML is structured so…weird.
You need to wrap your left,right, and box in a container element. Call it “container” or whatever. That needs to have display:table; on it, table-layout:fixed; and width:100%;
Make that ONLY in the query. Outside of the query, make it overflow:hidden;
I’d honestly start over and mimic other peoples code. This is set up for failure TBH and as you’ve seen there are just issues upon issues that need fixing. Not your fault but whomever did this originally didn’t really know what they were doing.
BTW Chrome is just more forgiving apparently. According to the specs, you need to have a display:table; parent at the minimum if you use display:table-cell. We didn’t. Thus I recommended the parent container being put in. Firefox technically isn’t wrong for being a PITA.
Thanks
I need to sit back and take in all your techniques.
Many thanks