• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Control width of parent <div> via child element without access to stylesheet.

lss22

New Coder
Hi all

I'm hoping some wise person can help but I have a feeling I may be trying to do the impossible.

To set the scene...

- We use a point-of-sale and stock management system which also integrates with our website and eBay listings.
- eBay listings are created inside of the POS system
- we can edit what goes into the description field, including adding HTML and inline CSS in this section.
- we can also add a header and footer which can have their own HTML and inline CSS added.

The listing software puts the header, description and footer inside a <div> which we don't have the ability to edit. This <div> has a fixed width of 978px set via inline CSS:

Code:
<div style="display: block; width: 978px; border: 1px solid #e5e5e5; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 10.5pt; line-height: 150%">
</div>

Anything we can edit sits inside this <div>.

978px is narrower than the relevant section on eBay and left as is, the listing looks weird.

I appreciate the simple solution is to have the software company adjust this setting and we're pushing for this but it doesn't seem likely to happen.

So I'm trying to do what I can.

So far I've been able to make individual elements "break out" from the div, as follows. "width: 100vw" seems to work (I will put the image in its own div and control the width of that rather than stretching the image itself but I expect that will work the same) and "position: absolute; width: 100%" seems to work except that if I use that for the main body of text it will overlay the main div (which has a border I can't get rid of) and the small amount of text (a part number) which we can't control.

Code:
<h1 style="width: 100vw !important; color: black !important; text-align: center;">
Drover Cycles
</h1>
<img style="width: 100vw !important;" src="https://www.drovercycles.co.uk/wp-content/uploads/2022/03/DC_temp_banner.jpg" alt="Drover Cycles" width="956" height="160">

<div style="width: 100vw !important; margin: 0 auto; border: none !important; color: black !important;">
<p>SOME TEXT
</p>
</div>

Some Text here generated by the listing software which we can't directly control

<div style="position: absolute; width: 100% !important; border: none !important; color: black !important; text-align: center;">
Footer text here we can control, this bit seems to work how we want
</div>

What I have been unable to do and would like to achieve is to force the parent <div> to stretch to accommodate child items rather than just allow those child items to burst out from it.

I can't edit external style sheets, anything in the <head>, or inline CSS of the parent <div>. I can edit inline CSS for any element, or add another new element, inside the parent <div>.

Can this be done, please?

Thanks in advance for any help.
 

System32

Coder
I have a question. Why do you use 100vw for elements inside the div? That forces them outside of the div. If you remove it, they are inside the div normally. And what about the div with absolute positioning? Also, why using divs to arrange text? And, why putting black color on headings when they are by default black?

Your code above reduced and changed. Does that look okay or?

HTML:
    <div style="display: block; width: 978px; border: 1px solid #e5e5e5; background: #fff; font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 10.5pt; line-height: 150%">
    <h1 style="color: black !important; text-align: center;">
        Drover Cycles
        </h1>
        <img src="https://www.drovercycles.co.uk/wp-content/uploads/2022/03/DC_temp_banner.jpg" alt="Drover Cycles">
        <p>SOME TEXT</p>       
        Some Text here generated by the listing software which we can't directly control
        <span style="float:right;">Footer text here we can control, this bit seems to work how we want</span>
        </div>
    </div>
 
Top