Grow your CSS skills. Land your dream job.

How to add a full width within a fixed div

  • # May 25, 2013 at 7:57 am

    I have a div with a width of 960px, Under this I have a couple of divs with the same width, but I need one div to be 100% of the page (for a slideshow porpuse), How do I do it?

    see this: http://jsfiddle.net/ga7cE/1/

    As you can see the blue line doesn’t show up.

    (I don’t want to give the first div 100% and all inner divs 960px beside the slideshow, because it’s a cms and it’s too complicated.)

    Thanks!

    # May 25, 2013 at 8:08 am

    You make your first element 960px wide, your second element 100% wide (so the page width), and the third element 960px wide. No fixed width to your wrapper.

    # May 25, 2013 at 8:13 am

    Yeah, as Hugo said. So the 100% wide element would actually not be a “child” of the “parent”.

    http://jsfiddle.net/ga7cE/2/

    # May 25, 2013 at 8:15 am

    I don’t understand.
    I want a full width div in the middle. Can you check this link http://jsfiddle.net/ga7cE/3/ ?
    I want the div to be full width and to see all other divs.

    Thanks!

    # May 25, 2013 at 8:16 am

    Ok I see.
    Because it’s Drupal CMS it will be difficult to edit the template, but I believe I’ll have to.
    Thank You!

    # May 25, 2013 at 8:23 am

    But I would probably do it this way if it’s only for graphical purpose: http://jsfiddle.net/fKJa9/.

    # May 25, 2013 at 8:28 am

    But it’s for a slideshow with images

    # May 25, 2013 at 8:30 am

    Oh, okay. So what @jamy_za said.

    # May 25, 2013 at 8:31 am

    Ok thank you anyway. I like your solution for graphic purpose

    # May 25, 2013 at 9:06 am

    you can accomplish this with your original code. You just need to account for the fact that the absolute positioned element is removed from the document flow. Given that it is a slideshow, you probably know it’s intended height. Just give the next element a top margin equal to the AP height (or the previous element a bottom margin).

    # May 25, 2013 at 10:33 pm

    I am having this same battle with Squarespace’s and cant find a solution! Just trying to get this image to stretch full width but my sites width of 960 restricts it.

    Here is my question that I posted on Stackoverflow
    http://stackoverflow.com/questions/16705367/creating-a-full-width-image

    http://www.jobspark.ca

    # May 25, 2013 at 10:47 pm

    you could try something like [pen](http://codepen.io/unasAquila/pen/Kmury)

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".