Full browser width bars – error in column grid

[vparkin77]

Hi- I refer to this article;
https://css-tricks.com/full-browser-width-bars/

Great article! My problem is that i can’t get it working within a grid system with multiple columns.

Any advice would be appreciated.

I put the code up here;
http://codepen.io/anon/pen/wCagv

That’s the reduced code version.

Please help- I’m stuck!!!

[Paulie_D]

It’s not clear to me what you are trying to do here.

Do you have an image of what this is supposed to look like?

[vparkin77]

make the horizontal bars go all the way across the screen despite the fact that the width is set to 80%…. I’m following this code example– https://css-tricks.com/full-browser-width-bars/

[vparkin77]

basically- it is supposed to have blue extending to the edge of the screen

[Paulie_D]

I think the problem with you example is that you are, effectively, trying to make two :after pseudo-elements on the same div…one with .grid and a second with .blue.

Therefore it doesn’t work.

You would need some other clearfix method

http://codepen.io/Paulie-D/pen/joBpE

Of course, you don’t actually need this method at all when you could just do this..

http://codepen.io/Paulie-D/pen/oGKtA

[vparkin77]

Wow- thanks for that Paulie D! You did fix my bare code example however the fixes that you’ve applied won’t work on my site.

I’m using susy, compass and sass.

I’m using Susy to specify the width – so i need to use the basis of the code I posted in order to make the horizontal bars width span 100%. I.E. Horizontal bars that function outside of the susy container however- still tied in with the div’s of my main site.

Here is my site
http://victoriaparkin.petzpark.com/

I’m struggling with the bit around Your Brand- I’m trying to make the colour of the tile span the full width of the page, although here i have set it to green so that you can see it.

The code collapses when I try and make the horizontal bars span the section of summary and details within a nested div.

I hope I am being clear enough about explaining it. I’d be overjoyed if I could fix this problem as I don’t know what else to try.

Thanks,

Victoria

[Paulie_D]

I’m using susy, compass and sass.

I’m using Susy to specify the width

I’m not familiar with Susy but it seems to me that you are trying fix fundamental flaws in the HTML structure with a pseudo-element band-aid.

If a div needs to be the width of the browser…you just add it to the HTML outside of any wrapper and it’s done. If you need to limit the width of content inside that outer div you just add a centered div inside that outer div.

You can always start new wrappers whenever you want…that’s what my second demo attempted to show.

However,perhaps that’s something that Suzy won’t let you do.

[vparkin77]

Thanks Paulie D – I’m beginning to think that it is something that Susy won’t let me do. It is very annoying as I was hoping to use susy a lot but I need for this problem to be fixed. Back to the drawing board I suppose (for the fourth time)!!!

;-)

[vparkin77]

Ok Paulie D – I’m gonna rewrite the existing site and take you up on your suggestions- thanks for sharing your knowledge. Not fully back to the drawing board- just changing my attitude regarding how i compose a site. I thought that just specifying 80% width with an easy abilty to change it to 60% or 100% was too good to be true.

Now I’m gonna compose at 100% and do your idea.

Thanks for the suggestion.

V

[vparkin77]

ok- i tried that. I’m getting exactly the same error at exactly the same place as i was getting my error before.
I’m thinking that i might need to change my framework- do you have any suggestions? I’ve tried semantic, unsemantic, profound and susy. Do you write your own grids from scratch or do you use a framework? If so- which one?

Thanks

[vparkin77]

Hi folks- thanks for all your help. Just to let you know that I resolved this issue by using the 2nd example of Paulie D to rewrite my html including the container divs (ie i no longer use susy to set the width- susy width is at 100% and inner is at 80%). Then I applied the display:table; property suggested by wolfcry911 to iron out the bugs that i was experiencing. Basically I abandoned what i was trying to do with the article i quoted earlier and just made some plain html/css.
So i got it working with susy after all. Yippee!!
Final note: I’ve been reading up on the display:table property and it seems to have pros (setting identical vertical height) and cons (no ie7 and earlier support). What do people on here think about display:table? can you think of any other pros and cons?
Thanks,
V

[nixnerd]

It is my understanding that you want a grid to be a certain width… say 80% of the browser, but then you want a bar that has a width of 100% of the browser? Correct?

[vparkin77]

Correct

[nixnerd]

I do this literally all the time. Like… every site I build has this setup. Just put the bar that is 100% outside the grid. If you’ve set up your grid in a modular way, this is no problem at all.

[vparkin77]

I was having problems getting it to work with susy (as my grid). When I tried to set the bars outside the grid, they were collapsing when I was dealing with a grid structure that had more than 1 column.
Display:table sorted this out. Thankfully. Can I pick your brains about any knowledge that you might have about display table? Pros? Cons? Do you use it. etc
Thanks

[Author]

Posts