Skip to main content
Known Participant
April 22, 2017
Answered

Padding is moving div o/s fluid grid layout

After reading several posts, I am still no wiser to understanding why when I add padding to a text inside a div - it's moving the div outside the fluid grid layout.

I read one post that mentions I should add padding to the actual text using a new css rule, rather than adding the padding to the actual div itself - which I have tried to do, with no joy. The padding applied is still moving the div outside the fluid grid layout...

If anyone can point me in the right direction, I would very much appreciate it. Thank you.

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {

  width: 89.0217%;

  max-width: 1232px;

  padding-left: 0.4891%;

  padding-right: 0.4891%;

  margin: auto;

}

#header {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

  background-color: #EDEDED;

}

}

.phone-no {

  font-family: "Roboto Bold";

  font-size: xx-large;

  text-align: right;

  padding-right: 20px;

}

This topic is closed to new replies. Start a new post to keep the conversation going.
BenPleysier
BenPleysierCorrect answer
Community Expert
April 22, 2017

This will help you understand Box Sizing | CSS-Tricks In other words, add box-sizing to your CSS rules.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

12 replies

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
April 22, 2017

This will help you understand Box Sizing | CSS-Tricks In other words, add box-sizing to your CSS rules.

Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Known Participant
April 22, 2017

Thank you Ben.

So, adding the below code to my css layout, allows me to use padding, without moving the div outside the grid?

It appears to have done the trick. Thanks again.

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

Translate
Nancy OShea
Community Expert
Community Expert
April 22, 2017

FYI:  Don't tamper with the Fluid Grid CSS code.  It's very temperamental.

Use a separate stylesheet for your custom styles.

Nancy

Translate
Nancy O'Shea— Product User & Community Expert