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
7 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

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
7 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
7 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
7 hours ago

add a comment |

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

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

add a comment |

draft saved

draft discarded

draft saved

draft discarded

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

搜尋此網誌

Myujth