Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full browser width bars – error in column grid

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #176930
    vparkin77
    Participant

    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!!!

    #176937
    Paulie_D
    Member

    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?

    #176939
    vparkin77
    Participant

    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/

    #176940
    vparkin77
    Participant

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

    #176944
    Paulie_D
    Member

    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

    #176980
    vparkin77
    Participant

    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

    #176992
    Paulie_D
    Member

    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.

    #176995
    vparkin77
    Participant

    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)!!!

    ;-)

    #177007
    vparkin77
    Participant

    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

    #177043
    vparkin77
    Participant

    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

    #177628
    vparkin77
    Participant

    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

    #177629
    nixnerd
    Participant

    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?

    #177630
    vparkin77
    Participant

    Correct

    #177631
    nixnerd
    Participant

    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.

    #177633
    vparkin77
    Participant

    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

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.