Why will this margin offset not work correctly?

I am trying to set up a margin offset in css, here is the html for it:

* {

  box-sizing: border-box;

}



.container {

  margin: 0 auto;

  width: 80%;

}



.row {

  width: 100%;

  margin: 10px;

  /*border: solid black 1px;*/

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  background-color: grey;

}



.column.one-half {

  width: 50%;

}



.column.one-fourth {

  width: 25%;

}



.column.one-eighth {

  width: 12.5%;

}



.offset-one-fourth {

  margin-left: 25%;

}



.offset-half {

  margin-left: 50%;

}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half"></div>

    <div class="column one-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-half offset-one-fourth"></div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

And here is what happens when I run it :

Offset attempt
I have tried messing with the margins, the width percentages, the order of the html but nothing seems to work.

edited Nov 12 '18 at 19:26

j08691

165k20189212

asked Nov 12 '18 at 19:25

Ryan

226

3

You've shown us what happens. What do you expect to happen?
– Heretic Monkey
Nov 12 '18 at 19:29

Sorry, I was expecting the offset to appear in order, not at the end of the row.
– Ryan
Nov 12 '18 at 19:36

add a comment |

I am trying to set up a margin offset in css, here is the html for it:

* {

  box-sizing: border-box;

}



.container {

  margin: 0 auto;

  width: 80%;

}



.row {

  width: 100%;

  margin: 10px;

  /*border: solid black 1px;*/

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  background-color: grey;

}



.column.one-half {

  width: 50%;

}



.column.one-fourth {

  width: 25%;

}



.column.one-eighth {

  width: 12.5%;

}



.offset-one-fourth {

  margin-left: 25%;

}



.offset-half {

  margin-left: 50%;

}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half"></div>

    <div class="column one-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-half offset-one-fourth"></div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

And here is what happens when I run it :

Offset attempt
I have tried messing with the margins, the width percentages, the order of the html but nothing seems to work.

edited Nov 12 '18 at 19:26

j08691

165k20189212

asked Nov 12 '18 at 19:25

Ryan

226

3

You've shown us what happens. What do you expect to happen?
– Heretic Monkey
Nov 12 '18 at 19:29

Sorry, I was expecting the offset to appear in order, not at the end of the row.
– Ryan
Nov 12 '18 at 19:36

add a comment |

I am trying to set up a margin offset in css, here is the html for it:

* {

  box-sizing: border-box;

}



.container {

  margin: 0 auto;

  width: 80%;

}



.row {

  width: 100%;

  margin: 10px;

  /*border: solid black 1px;*/

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  background-color: grey;

}



.column.one-half {

  width: 50%;

}



.column.one-fourth {

  width: 25%;

}



.column.one-eighth {

  width: 12.5%;

}



.offset-one-fourth {

  margin-left: 25%;

}



.offset-half {

  margin-left: 50%;

}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half"></div>

    <div class="column one-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-half offset-one-fourth"></div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

And here is what happens when I run it :

Offset attempt
I have tried messing with the margins, the width percentages, the order of the html but nothing seems to work.

edited Nov 12 '18 at 19:26

j08691

165k20189212

asked Nov 12 '18 at 19:25

Ryan

226

I am trying to set up a margin offset in css, here is the html for it:

* {

  box-sizing: border-box;

}



.container {

  margin: 0 auto;

  width: 80%;

}



.row {

  width: 100%;

  margin: 10px;

  /*border: solid black 1px;*/

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  background-color: grey;

}



.column.one-half {

  width: 50%;

}



.column.one-fourth {

  width: 25%;

}



.column.one-eighth {

  width: 12.5%;

}



.offset-one-fourth {

  margin-left: 25%;

}



.offset-half {

  margin-left: 50%;

}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half"></div>

    <div class="column one-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-half offset-one-fourth"></div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

And here is what happens when I run it :

Offset attempt
I have tried messing with the margins, the width percentages, the order of the html but nothing seems to work.

* {

  box-sizing: border-box;

}



.container {

  margin: 0 auto;

  width: 80%;

}



.row {

  width: 100%;

  margin: 10px;

  /*border: solid black 1px;*/

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  background-color: grey;

}



.column.one-half {

  width: 50%;

}



.column.one-fourth {

  width: 25%;

}



.column.one-eighth {

  width: 12.5%;

}



.offset-one-fourth {

  margin-left: 25%;

}



.offset-half {

  margin-left: 50%;

}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half"></div>

    <div class="column one-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-half offset-one-fourth"></div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

* {

  box-sizing: border-box;

}



.container {

  margin: 0 auto;

  width: 80%;

}



.row {

  width: 100%;

  margin: 10px;

  /*border: solid black 1px;*/

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  background-color: grey;

}



.column.one-half {

  width: 50%;

}



.column.one-fourth {

  width: 25%;

}



.column.one-eighth {

  width: 12.5%;

}



.offset-one-fourth {

  margin-left: 25%;

}



.offset-half {

  margin-left: 50%;

}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half"></div>

    <div class="column one-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-half offset-one-fourth"></div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

html css

edited Nov 12 '18 at 19:26

j08691

165k20189212

asked Nov 12 '18 at 19:25

Ryan

226

edited Nov 12 '18 at 19:26

j08691

165k20189212

asked Nov 12 '18 at 19:25

Ryan

226

edited Nov 12 '18 at 19:26

j08691

165k20189212

edited Nov 12 '18 at 19:26

j08691

165k20189212

edited Nov 12 '18 at 19:26

j08691

165k20189212

asked Nov 12 '18 at 19:25

Ryan

226

asked Nov 12 '18 at 19:25

Ryan

226

asked Nov 12 '18 at 19:25

Ryan

226

3

You've shown us what happens. What do you expect to happen?
– Heretic Monkey
Nov 12 '18 at 19:29

Sorry, I was expecting the offset to appear in order, not at the end of the row.
– Ryan
Nov 12 '18 at 19:36

add a comment |

3

You've shown us what happens. What do you expect to happen?
– Heretic Monkey
Nov 12 '18 at 19:29

Sorry, I was expecting the offset to appear in order, not at the end of the row.
– Ryan
Nov 12 '18 at 19:36

You've shown us what happens. What do you expect to happen?
– Heretic Monkey
Nov 12 '18 at 19:29

Sorry, I was expecting the offset to appear in order, not at the end of the row.
– Ryan
Nov 12 '18 at 19:36

add a comment |

1 Answer
1

active

oldest

votes

You appear to be using your own classes incorrectly!

There’s no need to insert an extra element to apply the offset - just add the offset class to the first element after the offset.

The CSS below is the same as in the question, just minified to save space.

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

edited Nov 12 '18 at 19:38

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268801%2fwhy-will-this-margin-offset-not-work-correctly%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You appear to be using your own classes incorrectly!

There’s no need to insert an extra element to apply the offset - just add the offset class to the first element after the offset.

The CSS below is the same as in the question, just minified to save space.

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

edited Nov 12 '18 at 19:38

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

add a comment |

You appear to be using your own classes incorrectly!

There’s no need to insert an extra element to apply the offset - just add the offset class to the first element after the offset.

The CSS below is the same as in the question, just minified to save space.

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

edited Nov 12 '18 at 19:38

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

add a comment |

You appear to be using your own classes incorrectly!

There’s no need to insert an extra element to apply the offset - just add the offset class to the first element after the offset.

The CSS below is the same as in the question, just minified to save space.

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

edited Nov 12 '18 at 19:38

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

You appear to be using your own classes incorrectly!

There’s no need to insert an extra element to apply the offset - just add the offset class to the first element after the offset.

The CSS below is the same as in the question, just minified to save space.

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

*{box-sizing:border-box}.container{margin:0 auto;width:80%}.row{width:100%;margin:10px}.row:after{content:"";display:table;clear:both}.column{float:left;background-color:grey}.column.one-half{width:50%}.column.one-fourth{width:25%}.column.one-eighth{width:12.5%}.offset-one-fourth{margin-left:25%}.offset-half{margin-left:50%}

<div class=container>

  <div class="row">

    <div class="column one-half">1/2</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-eighth">1/8</div>

    <div class="column one-eighth">1/8</div>

  </div>

  <div class="row">

    <div class="column one-half offset-half">1/2</div>

  </div>

  <div class="row">

    <div class="column one-fourth offset-one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

    <div class="column one-fourth">1/4</div>

  </div>

</div>

edited Nov 12 '18 at 19:38

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

edited Nov 12 '18 at 19:38

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

answered Nov 12 '18 at 19:30

MTCoster

3,01121939

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk