CSS Bootstrap. Fixed and Fluid div, fluid inner content seems offset

up vote
-1
down vote

favorite

I am trying to create what I assumed was a basic template. I have a sidebar that is fixed width and absolutely position to the left. I then have a 100% width div absolutely position next to that.

When I put content in side the right sidebar and add a margin: 0 auto it seems to align right.

This is what it looks like:

enter image description here

Here is my css/html:

/* Structure */



#left,

#right {

  position: absolute;

  top: 0;

  min-height: 100%;

}



#left {

  left: 0;

  width: 250px;

  background-color: red;

}



#right {

  left: 250px;

  width: 100%;

  background-color: blue;

}



main.container-fluid {

  max-width: 960px;

  background-color: yellow;

  margin: 0 auto;

}

<div id="left">



</div>

<div id="right">

  <main class="container-fluid">

    <div class="row">

      <div class="col">

        aaaaaa

      </div>

    </div>

  </main>

</div>

Can anyone see the problem?

Btw, I'm a noob. If there is another/best practice way to achieve a fixed sidebar and fluid right side please let me know.

edited Nov 10 at 18:05

ksav

3,47921227

asked Nov 10 at 17:14

Mark

726

add a comment |

up vote
-1
down vote

favorite

I am trying to create what I assumed was a basic template. I have a sidebar that is fixed width and absolutely position to the left. I then have a 100% width div absolutely position next to that.

When I put content in side the right sidebar and add a margin: 0 auto it seems to align right.

This is what it looks like:

enter image description here

Here is my css/html:

/* Structure */



#left,

#right {

  position: absolute;

  top: 0;

  min-height: 100%;

}



#left {

  left: 0;

  width: 250px;

  background-color: red;

}



#right {

  left: 250px;

  width: 100%;

  background-color: blue;

}



main.container-fluid {

  max-width: 960px;

  background-color: yellow;

  margin: 0 auto;

}

<div id="left">



</div>

<div id="right">

  <main class="container-fluid">

    <div class="row">

      <div class="col">

        aaaaaa

      </div>

    </div>

  </main>

</div>

Can anyone see the problem?

Btw, I'm a noob. If there is another/best practice way to achieve a fixed sidebar and fluid right side please let me know.

edited Nov 10 at 18:05

ksav

3,47921227

asked Nov 10 at 17:14

Mark

726

add a comment |

up vote
-1
down vote

favorite

I am trying to create what I assumed was a basic template. I have a sidebar that is fixed width and absolutely position to the left. I then have a 100% width div absolutely position next to that.

When I put content in side the right sidebar and add a margin: 0 auto it seems to align right.

This is what it looks like:

enter image description here

Here is my css/html:

/* Structure */



#left,

#right {

  position: absolute;

  top: 0;

  min-height: 100%;

}



#left {

  left: 0;

  width: 250px;

  background-color: red;

}



#right {

  left: 250px;

  width: 100%;

  background-color: blue;

}



main.container-fluid {

  max-width: 960px;

  background-color: yellow;

  margin: 0 auto;

}

<div id="left">



</div>

<div id="right">

  <main class="container-fluid">

    <div class="row">

      <div class="col">

        aaaaaa

      </div>

    </div>

  </main>

</div>

Can anyone see the problem?

Btw, I'm a noob. If there is another/best practice way to achieve a fixed sidebar and fluid right side please let me know.

edited Nov 10 at 18:05

ksav

3,47921227

asked Nov 10 at 17:14

Mark

726

I am trying to create what I assumed was a basic template. I have a sidebar that is fixed width and absolutely position to the left. I then have a 100% width div absolutely position next to that.

When I put content in side the right sidebar and add a margin: 0 auto it seems to align right.

This is what it looks like:

enter image description here

Here is my css/html:

/* Structure */



#left,

#right {

  position: absolute;

  top: 0;

  min-height: 100%;

}



#left {

  left: 0;

  width: 250px;

  background-color: red;

}



#right {

  left: 250px;

  width: 100%;

  background-color: blue;

}



main.container-fluid {

  max-width: 960px;

  background-color: yellow;

  margin: 0 auto;

}

<div id="left">



</div>

<div id="right">

  <main class="container-fluid">

    <div class="row">

      <div class="col">

        aaaaaa

      </div>

    </div>

  </main>

</div>

Can anyone see the problem?

Btw, I'm a noob. If there is another/best practice way to achieve a fixed sidebar and fluid right side please let me know.

/* Structure */



#left,

#right {

  position: absolute;

  top: 0;

  min-height: 100%;

}



#left {

  left: 0;

  width: 250px;

  background-color: red;

}



#right {

  left: 250px;

  width: 100%;

  background-color: blue;

}



main.container-fluid {

  max-width: 960px;

  background-color: yellow;

  margin: 0 auto;

}

<div id="left">



</div>

<div id="right">

  <main class="container-fluid">

    <div class="row">

      <div class="col">

        aaaaaa

      </div>

    </div>

  </main>

</div>

/* Structure */



#left,

#right {

  position: absolute;

  top: 0;

  min-height: 100%;

}



#left {

  left: 0;

  width: 250px;

  background-color: red;

}



#right {

  left: 250px;

  width: 100%;

  background-color: blue;

}



main.container-fluid {

  max-width: 960px;

  background-color: yellow;

  margin: 0 auto;

}

<div id="left">



</div>

<div id="right">

  <main class="container-fluid">

    <div class="row">

      <div class="col">

        aaaaaa

      </div>

    </div>

  </main>

</div>

html css

edited Nov 10 at 18:05

ksav

3,47921227

asked Nov 10 at 17:14

Mark

726

edited Nov 10 at 18:05

ksav

3,47921227

asked Nov 10 at 17:14

Mark

726

edited Nov 10 at 18:05

ksav

3,47921227

edited Nov 10 at 18:05

ksav

3,47921227

edited Nov 10 at 18:05

ksav

3,47921227

asked Nov 10 at 17:14

Mark

726

asked Nov 10 at 17:14

Mark

726

asked Nov 10 at 17:14

Mark

726

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

You might want to consider an approach like this.

Instead of using absolute positioning, just put your .sidebar and .main inside a flex container.

Give .sidebar a flex-basis of 250px, and .main a flex-basis of auto. Both can shrink, but only .main can grow.

Then inside .main, add your bootstrap .container-fluid and start using .row and .col wherever you need.

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

edited Nov 10 at 21:13

answered Nov 10 at 21:02

ksav

3,47921227

Did this help solve your problem?
– ksav
2 hours ago

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',
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%2f53241424%2fcss-bootstrap-fixed-and-fluid-div-fluid-inner-content-seems-offset%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

up vote
0
down vote

You might want to consider an approach like this.

Instead of using absolute positioning, just put your .sidebar and .main inside a flex container.

Give .sidebar a flex-basis of 250px, and .main a flex-basis of auto. Both can shrink, but only .main can grow.

Then inside .main, add your bootstrap .container-fluid and start using .row and .col wherever you need.

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

edited Nov 10 at 21:13

answered Nov 10 at 21:02

ksav

3,47921227

Did this help solve your problem?
– ksav
2 hours ago

add a comment |

up vote
0
down vote

You might want to consider an approach like this.

Instead of using absolute positioning, just put your .sidebar and .main inside a flex container.

Give .sidebar a flex-basis of 250px, and .main a flex-basis of auto. Both can shrink, but only .main can grow.

Then inside .main, add your bootstrap .container-fluid and start using .row and .col wherever you need.

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

edited Nov 10 at 21:13

answered Nov 10 at 21:02

ksav

3,47921227

Did this help solve your problem?
– ksav
2 hours ago

add a comment |

up vote
0
down vote

You might want to consider an approach like this.

Instead of using absolute positioning, just put your .sidebar and .main inside a flex container.

Give .sidebar a flex-basis of 250px, and .main a flex-basis of auto. Both can shrink, but only .main can grow.

Then inside .main, add your bootstrap .container-fluid and start using .row and .col wherever you need.

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

edited Nov 10 at 21:13

answered Nov 10 at 21:02

ksav

3,47921227

You might want to consider an approach like this.

Instead of using absolute positioning, just put your .sidebar and .main inside a flex container.

Give .sidebar a flex-basis of 250px, and .main a flex-basis of auto. Both can shrink, but only .main can grow.

Then inside .main, add your bootstrap .container-fluid and start using .row and .col wherever you need.

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

.flex-container {

  display: flex;

}



.sidebar {

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: 200px;

}



.main {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

}



.bg--red {

  background: red;

}



.bg--blue {

  color: white;

  background: blue;

}



.bg--yellow {

  background: yellow;

  color: black;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="flex-container">



  <div class="sidebar  bg--red">

    <h2>sidebar content</h2>

  </div>



  <div class="main  bg--blue">

    <h1>main content</h1>

    <div class="container-fluid">

      <div class="row">

        <div class="col  bg--yellow">col 1 / 3</div>

        <div class="col  bg--yellow">col 2 / 3</div>

        <div class="col  bg--yellow">col 3 / 3</div>

      </div>

    </div>

  </div>



</div>

edited Nov 10 at 21:13

answered Nov 10 at 21:02

ksav

3,47921227

edited Nov 10 at 21:13

answered Nov 10 at 21:02

ksav

3,47921227

answered Nov 10 at 21:02

ksav

3,47921227

answered Nov 10 at 21:02

ksav

3,47921227

Did this help solve your problem?
– ksav
2 hours ago

add a comment |

Did this help solve your problem?
– ksav
2 hours ago

Did this help solve your problem?
– ksav
2 hours ago

add a comment |

draft saved

draft discarded

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

搜尋此網誌

Ndtyjky