Page 1 of 1

Can CSS force a DIV to be in foreground and max width?

Posted: Tue Sep 16, 2014 10:19 am
by simonmlewis
I am building a responsive product page.
The content is inside a DIV called "mainbodybox". This div has a 10 pixel padding on the left and right.

For Desktop, it's fine. I have a div called "gallery_image" that appears in the upper left corner.
For Mobile though, that div doesn't show, and a gallery_imagemobile div displays. However.. I want that div to be maximum width of the device screen, as it will be above all text.

This is how the DIVs are laid out:

Code: Select all

<div class='mainbodybox'><div class='product_rightbox'>
    <div class='product_gallerymobile'>
    <img src='/images/productphotos/$row->photoprimary' />
    </div></div>
So product_rightbox is used for desktop to make stuff appear on the right. In this case though it appears at the very top.
I would just put a closing DIV after product_rightbox, then open mainbodybox again after the closing product_Gallerymobile div - however that messes up product_rightbox.

So I am wondering if there is a way to tell a DIV - "just max out the page".

I thought of z-index to bring it into the foreground, but as it is inside mainbodybox still, obviously it won't.

Not sure how else to accomplish this.

Re: Can CSS force a DIV to be in foreground and max width?

Posted: Tue Sep 16, 2014 12:29 pm
by Celauran
simonmlewis wrote:This is how the DIVs are laid out:

Code: Select all

<div class='mainbodybox'><div class='product_rightbox'>
    <div class='product_gallerymobile'>
    <img src='/images/productphotos/$row->photoprimary' />
    </div></div>
So product_rightbox is used for desktop to make stuff appear on the right. In this case though it appears at the very top.
I would just put a closing DIV after product_rightbox, then open mainbodybox again after the closing product_Gallerymobile div - however that messes up product_rightbox.
Which means nested mainbodybox divs. Is that intentional?
simonmlewis wrote:So I am wondering if there is a way to tell a DIV - "just max out the page".

Code: Select all

width: 100%