- This topic is empty.
December 24, 2015 at 8:47 am #236126
I have a layout like what you see in this Pen: http://codepen.io/leland/pen/bEwgbb
Since the the sidebar div is last in the markup, a normal media query that sets the previously floated divs to full width won’t work so well since the footer should be at the bottom.
You can see what I mean by clicking the ‘Trigger “media query”‘ button on the left.
Right now, I’m using jQuery to insert the div before the footer. You can see what I mean by clicking the “Trigger DOM manipulation” button on the right.
I’m thinking this would be a great use case for Flexbox, but I don’t understand it well enough to pull it off. Any guidance would be much appreciated.
Happy holidays everyone! :)December 24, 2015 at 10:58 am #236127
Here you go. Is this what you meant?
Not sure if I have the media query the right way round.December 24, 2015 at 2:29 pm #236131
Thanks so much for your response Paulie_D. It looks like you switched the media query around to be mobile first, but that’s totally fine since I probably should’ve been doing that anyway.
After working with your code, I realized my reduced test case was too reduced. I also have a full width nav bar on top of everything, and a wrapper div encapsulating everything. Didn’t realize that was relevant at first, so I left it out. Very sorry about that. Flexbox is super tough to wrap my head around for some reason.
I’ve set up a reduced test case of what I have so far here: http://codepen.io/leland/pen/obzWjZ
The “big-wrapper” div seems to make the divs stack vertically, breaking the sidebar-on-the-right layout, and I’m not sure why.
It seems like the ideal solution would be to incorporate the full width nav bar within the “wrapper” div (with display: flex; applied) and then apply the max-width: 1000px; margin: 0 auto; code to that, ditching the “big-wrapper” div.
Any ideas on the best way to approach?December 24, 2015 at 3:02 pm #236132
It’ll take some thinking about.
But if you want a full width navbar it can’t really be inside a restricted width container…unless the content of that navbar will also respect the container.
Then we can fiddle with it.December 24, 2015 at 3:04 pm #236133
“But if you want a full width navbar it can’t really be inside a restricted width container…unless the content of that navbar will also respect the container.”
I meant the navbar will be full width, respective to the container (not necessarily the window). Sorry if I wasn’t clear!
Thank you.December 24, 2015 at 3:11 pm #236134
Hmm…at the moment I’m having trouble with this…I need to have a set height for the navbar and then I can use
calcto set the height of the aside…otherwise the wrapping doesn’t work right..
I’d have to check but I think this is an issue with nested flexboxes and 100% height not calculating right (at least in Chrome).December 24, 2015 at 3:15 pm #236135
Interesting. I’m noticing the same issue in Firefox as well. I’ll continue to mess with this myself to see what I can come up with. Thanks for looking into it. :)December 25, 2015 at 7:09 am #236152
- The forum ‘CSS’ is closed to new topics and replies.