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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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%
Post Reply