• 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.
 

cbreemer

King Coder
Have you thought about using JavaScript ? Should be no problem to add the code, as you say you can add HTML and CSS inside your <div>. I'm just not sure how to actually get it executed.
 

System32

Active 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>
 

lss22

New Coder
Have you thought about using JavaScript ?
I don't think it would be possible. eBay would block Javascript I believe.

Why do you use 100vw for elements inside the div? That forces them outside of the div.
I'm trying to get our content to "break out" from the 978px wide div which we can't edit.

Also, why using divs to arrange text?
Please tell me another way if there's a better way of achieving this.

And, why putting black color on headings when they are by default black?
They're not, the parent div which we can't edit directly has "color: #666" in its inline CSS so unless we specify otherwise. text is gray.
 

System32

Active Coder
I'm trying to get our content to "break out" from the 978px wide div which we can't edit.
Break out by how much?
Please tell me another way if there's a better way of achieving this.
As I shown in code above, by using span and then CSS property to position him right.
They're not, the parent div which we can't edit directly has "color: #666" in its inline CSS so unless we specify otherwise. text is gray.
Okay, got it.

Can you show me like how it looks on the website? By default? And if possible, show me what you want to achieve. Thank you.
 

lss22

New Coder
Thanks for your help, I really appreciate it.

Can you show me like how it looks on the website? By default?

Sure. Here's an example of a listing with the default styling:

(It's the bit in the "Description", below "Item Specifics" that we're looking at here).

What I would like to do is get away from the box (978px wide) with pale grey border.

This code is always inserted before anything we do and we can't control this:

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%">

The width of this div and the styling of its border, are the things I'm struggling with. Obviously text size/font/colour can all be specified later in inline CSS.

Here's one which I've tried to work with. The logo and title "Drover Cycles" appear central when the window is maximised but not if the window isn't full width, the footer "Thanks for looking at our listing" is fine, but everything else is still trapped within the 978px wide div.

Here's what I'd like to try to get it to look like, easy to do by getting rid of the parent div entirely, but is there another way, without the ability to remove or edit that div?

 

System32

Active Coder
What if you style your inner code like this. Tell me the final results because it seems to work for me.

HTML:
<div style="background-color: #fff;margin-top:-20px;font-family: Arial, Helvetica, sans-serif; font-size: 12pt; line-height: 150%;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;">
        <img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.drovercycles.co.uk/wp-content/uploads/2022/03/DC_temp_banner.jpg" alt="Drover Cycles" width="956" height="160" align="center"><br>
        <h1 style="text-align: center;">Drover Cycles</h1>
        <strong>Hollowtech ii integrated bottom bracket uses a wider bearing placement and larger axle diameter for increased stiffness and efficiency.</strong><br><br><strong>Features:</strong><br>
     <ul>
        <li>Hollowtech ii integrated bottom bracket seal design has minimal bearing interface ensuring smooth rolling and increased durability</li>
        <li>Use tlfc37 or tlfc25 in conjunction with tlfc36 adaptor tool for installation and removal</li>
        <li>For use with Ultegra - 105 - cx70 chainwheels</li>
     </ul>
     Product Code: VARBBR60BLK</p>
     <p style="text-align:center; ">Thanks for looking at our listing, please let us know if you have any queries | Drover Cycles Online
     </div>
 

lss22

New Coder
Thank you! Yes, that seems like it will work.

Would you mind talking me through what you did please? The key bit is the margin-top:-20px; ;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0; I believe? But I'm not clear on exactly what that is doing here.

To add a margin around the text would I just increase those numbers? Playing around with it seems to do weird things.

Thanks again...
 

System32

Active Coder
Thank you! Yes, that seems like it will work.

Would you mind talking me through what you did please? The key bit is the margin-top:-20px; ;position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0; I believe? But I'm not clear on exactly what that is doing here.

To add a margin around the text would I just increase those numbers? Playing around with it seems to do weird things.

Thanks again...
I used absolute to detach elements from parent element, which means, he will be positioned the way he finds good.
Margin-top -20 was used so that div overlap that border that annoys you.
margin-left and margin-right to auto position it to center. But it must be followed with left and right to 0. Because, this is absolute positioning, browser needs info where this starts. I added background white because we must completely cover that div. He is still there, but can't be seen.
 
Top