Bootstrap - covering or overlapping columns
0
I want to cover or overlap two columns.
Having one on the left side (6 columns) and one on the right side (6 columns).
My result should be: left side (8) and right side (6) - overlapping for 2 columns.
I have looked into Bootstrap documentation for offset/push/pull properties but got no proper result.
Here is jsfiddle.
css twitter-bootstrap-3 overlap
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
add a comment |
0
I want to cover or overlap two columns.
Having one on the left side (6 columns) and one on the right side (6 columns).
My result should be: left side (8) and right side (6) - overlapping for 2 columns.
I have looked into Bootstrap documentation for offset/push/pull properties but got no proper result.
Here is jsfiddle.
css twitter-bootstrap-3 overlap
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
add a comment |
0
0
0
I want to cover or overlap two columns.
Having one on the left side (6 columns) and one on the right side (6 columns).
My result should be: left side (8) and right side (6) - overlapping for 2 columns.
I have looked into Bootstrap documentation for offset/push/pull properties but got no proper result.
Here is jsfiddle.
css twitter-bootstrap-3 overlap
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
I want to cover or overlap two columns.
Having one on the left side (6 columns) and one on the right side (6 columns).
My result should be: left side (8) and right side (6) - overlapping for 2 columns.
I have looked into Bootstrap documentation for offset/push/pull properties but got no proper result.
Here is jsfiddle.
css twitter-bootstrap-3 overlap
css twitter-bootstrap-3 overlap
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
edited Nov 13 '18 at 5:13
Cœur
17.7k9106145
17.7k9106145
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
asked Mar 14 '15 at 20:01
be-codifiedbe-codified
1,593102645
1,593102645
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Try adding a negative margin-left to the smaller div. (I added the panel class so the overlap would be visible). For the sake of the example, I just added the css in a style attribute.
<div class="col-lg-6">
<div class="col-lg-8 panel">this is the left div</div>
<div class="col-lg-6 panel" style="margin-left: -16.7%;z-index:-1"> this is the right div</div>
</div>
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
1
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
1
This is fully working.
– be-codified
Mar 15 '15 at 10:16
1
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
|
show 1 more 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29053560%2fbootstrap-covering-or-overlapping-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Try adding a negative margin-left to the smaller div. (I added the panel class so the overlap would be visible). For the sake of the example, I just added the css in a style attribute.
<div class="col-lg-6">
<div class="col-lg-8 panel">this is the left div</div>
<div class="col-lg-6 panel" style="margin-left: -16.7%;z-index:-1"> this is the right div</div>
</div>
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
1
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
1
This is fully working.
– be-codified
Mar 15 '15 at 10:16
1
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
|
show 1 more comment
1
Try adding a negative margin-left to the smaller div. (I added the panel class so the overlap would be visible). For the sake of the example, I just added the css in a style attribute.
<div class="col-lg-6">
<div class="col-lg-8 panel">this is the left div</div>
<div class="col-lg-6 panel" style="margin-left: -16.7%;z-index:-1"> this is the right div</div>
</div>
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
1
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
1
This is fully working.
– be-codified
Mar 15 '15 at 10:16
1
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
|
show 1 more comment
1
1
1
Try adding a negative margin-left to the smaller div. (I added the panel class so the overlap would be visible). For the sake of the example, I just added the css in a style attribute.
<div class="col-lg-6">
<div class="col-lg-8 panel">this is the left div</div>
<div class="col-lg-6 panel" style="margin-left: -16.7%;z-index:-1"> this is the right div</div>
</div>
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
Try adding a negative margin-left to the smaller div. (I added the panel class so the overlap would be visible). For the sake of the example, I just added the css in a style attribute.
<div class="col-lg-6">
<div class="col-lg-8 panel">this is the left div</div>
<div class="col-lg-6 panel" style="margin-left: -16.7%;z-index:-1"> this is the right div</div>
</div>
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
edited Mar 16 '15 at 15:01
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
answered Mar 14 '15 at 20:26
Lee DuckworthLee Duckworth
78213
78213
1
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
1
This is fully working.
– be-codified
Mar 15 '15 at 10:16
1
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
|
show 1 more comment
1
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
1
This is fully working.
– be-codified
Mar 15 '15 at 10:16
1
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
1
1
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
thank you for your answer. How do we know that 20% equals two columns?
– be-codified
Mar 15 '15 at 8:24
1
1
This is fully working.
– be-codified
Mar 15 '15 at 10:16
This is fully working.
– be-codified
Mar 15 '15 at 10:16
1
1
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
The math for one column would be 100/12=8.333333333333333. So, 16.66666666666667 should be the equivalent of two columns. I've never seen a reason to overlap columns, so this was just a shot from the hip. I had only tried it with trial and error and hadn't attempted to match two columns, exactly. After experimenting with it, margin-left:-16.7% overlaps and margin-left:-16.6% wraps.
– Lee Duckworth
Mar 15 '15 at 13:39
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
I see, thanks for pointing this out.
– be-codified
Mar 16 '15 at 13:59
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
Can you please edit your previous answer, so we are not missguiding others by 3,3%? :) Thanks.
– be-codified
Mar 16 '15 at 14:01
|
show 1 more 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.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f29053560%2fbootstrap-covering-or-overlapping-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown