Streaming live at 10am (PST)

How to mix pixel padding on percentage width divs

Here’s an example:

I have two divs floated next to each other. One has a width of 25% and the other 75%. I would like to add a 40 px padding to each div. However, when I do this the DIVs no longer float side by side. So obviously you can’t mix fixed and percentage width padding. So my question is what is the solution? I don’t want to add percentage based padding.

The only solution I can think of is to add a div to each floated div and apply the fixed width padding to the inner div. Is this the semantic, correct approach?

This approach seems to work however you do need extra DIVs and hence extra code.



I would simply use flexbox instead of floats.

Flexbox does not allow padding between between DIVs when DIVs have a percentage width. Seems like it would be easy to have three DIVs side by side with 10px padding and 33% width but its not.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.