Refactor HTML with CSS

Question

As my CSS and HTML skills are somewhat limited can anyone advise if the code below can be refactored without so many div tags?

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5">
        <div style="padding: 0.5em">
            Content Here
        </div>
    </div>
</div>

starskythehutch · Accepted Answer · 2010-06-12 10:21:29Z

1

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em">
        Content Here
    </div>
</div>

Should work the same.

answered Jun 12, 2010 at 10:21

starskythehutch

3,3481 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kane Over a year ago

Thanks, completely forgot that the 3rd div was unnecessary... sigh

Matt Weldon · Accepted Answer · 2010-06-12 10:20:24Z

1

You could lose at least one by combining the padding from the inner div with the middle one:

<div style="border: 1px solid #D0D2D1">
    <div style="border: 8px solid #F6F4F5; padding: 0.5em;">
        Content Here
    </div>
</div>

Unfortunately if you want two different border colours, you're going to be stuck with at least 2 of the divs

answered Jun 12, 2010 at 10:20

Matt Weldon

1,4131 gold badge11 silver badges18 bronze badges

Comments

Andrei · Accepted Answer · 2010-06-12 21:19:55Z

1

Here's a different approach (as Matt said, it's impossible to go below 2 DIVs if you want different border colors) :

<div style="border:1px solid #D0D2D1; background-color:#F6F4F5; padding:8px">
    <div style="background:white; padding:.5em">
    Content here
    </div>
</div>

answered Jun 12, 2010 at 21:19

Andrei

1,6264 gold badges19 silver badges31 bronze badges

Collectives™ on Stack Overflow

Refactor HTML with CSS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related