Forums

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

Home Forums CSS 100% width element within the html flow

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #149292
    sjoerdth
    Participant

    CodePen example

    As you can see in the CodePen example I’d like the h2 to be a 100% wide. But I had to use position absolute to achieve it which removes it from the flow and makes the surrounding content go under the h2.

    Anybody got a suggestion how to improve this without using JS?

    Thanks!

    #149303
    jurotek
    Participant

    I don’t quite get it what you trying to accomplish. You want that header with h2 tag to be 100% wide and be positioned above the content or what is it?

    #149305
    Paulie_D
    Member

    I think I get it but an image of the proposed design would be helpful in understanding what it is you are trying to achieve.

    Perhaps rethinking the CSS structure might be better.

    http://www.codepen.io/anon/pen/aGuhg

    #149353
    sjoerdth
    Participant

    Example

    Ok, I’ve made an image to make things more clear. Paulie_D understands what I mean, but his solution doesn’t really work in my case unfortunately.

    I’d like the grey area to be a wrapper for my content (the red stroked rectangles in the image), in the code there’s only P’s surrounding it, but that could be anything.

    Also the H2 should have an opacity <100 so the grey and the green area get the same hue darker. Although that effect could be faked easily, so that’s not the biggest issue.

    I’m not necessarily set on using these precize elements. The only thing I’m really keen on is putting the 100% body width header within the same container as the rest of the content because that would make adding al sorts of other content easier.

    Hope things are a bit more clear now!

    #149357
    Paulie_D
    Member

    ~Aha….I knew there was something…and adaptation of this

    https://css-tricks.com/full-browser-width-bars/

    http://www.codepen.io/anon/pen/BuFpe

    Oh, one final thing…the opacity of the h2 should be 100% otherwise the text would be affected too….the background of the h2 should be reduced opacity…hence the rgba value

    #149358
    sjoerdth
    Participant

    Oh great, that looks like exactly what I need and on this site too, who would have thought! :-) I will dive into this tomorrow. Thanks!

    #149444
    sjoerdth
    Participant

    I’m happy to report it works like a charm, so thanks for the help!

    You can see it in glorious action right here.
    That site is still under heavy construction and not checked in IE at all, so no comments on other issues are needed at this moment :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.