How to seperate sidebar and content?
I'm trying to make a side bar and a content div but I don't know how to keep them separated and the content goes under the sidebar and obviously I don't want that. I'm pretty new to coding so I don't know what to do or if there's a better way to do this.
Here's the code:
<div id="content" style="margin:50px; background-color:blue; padding:10px;">
<div id="sidebar" style="margin:25px; background-color:red; width:200px; border: 2px solid lime; position:fixed;">
<p>h</p>
</div>
<div id="stuff" style="background-color:orange; margin:20px;">
<p>Lorem ipsum blah blah</p>
</div>
</div>
html css web
edited Nov 25 '18 at 13:16
kit
1,1063816
asked Nov 25 '18 at 4:26
caydencayden
135
add a comment |
I'm trying to make a side bar and a content div but I don't know how to keep them separated and the content goes under the sidebar and obviously I don't want that. I'm pretty new to coding so I don't know what to do or if there's a better way to do this.
Here's the code:
<div id="content" style="margin:50px; background-color:blue; padding:10px;">
<div id="sidebar" style="margin:25px; background-color:red; width:200px; border: 2px solid lime; position:fixed;">
<p>h</p>
</div>
<div id="stuff" style="background-color:orange; margin:20px;">
<p>Lorem ipsum blah blah</p>
</div>
</div>
html css web
edited Nov 25 '18 at 13:16
kit
1,1063816
asked Nov 25 '18 at 4:26
caydencayden
135
Welcome to stackoverflow. Please post code as text. This makes it easier for other users so you are more likely to get helpful answers.
– Simon.S.A.
Nov 25 '18 at 4:34
1
my bad. i'll update it!
– cayden
Nov 25 '18 at 4:35
add a comment |
I'm trying to make a side bar and a content div but I don't know how to keep them separated and the content goes under the sidebar and obviously I don't want that. I'm pretty new to coding so I don't know what to do or if there's a better way to do this.
Here's the code:
<div id="content" style="margin:50px; background-color:blue; padding:10px;">
<div id="sidebar" style="margin:25px; background-color:red; width:200px; border: 2px solid lime; position:fixed;">
<p>h</p>
</div>
<div id="stuff" style="background-color:orange; margin:20px;">
<p>Lorem ipsum blah blah</p>
</div>
</div>
html css web
edited Nov 25 '18 at 13:16
kit
1,1063816
asked Nov 25 '18 at 4:26
caydencayden
135
I'm trying to make a side bar and a content div but I don't know how to keep them separated and the content goes under the sidebar and obviously I don't want that. I'm pretty new to coding so I don't know what to do or if there's a better way to do this.
Here's the code:
<div id="content" style="margin:50px; background-color:blue; padding:10px;">
<div id="sidebar" style="margin:25px; background-color:red; width:200px; border: 2px solid lime; position:fixed;">
<p>h</p>
</div>
<div id="stuff" style="background-color:orange; margin:20px;">
<p>Lorem ipsum blah blah</p>
</div>
</div>
html css web
html css web
edited Nov 25 '18 at 13:16
kit
1,1063816
asked Nov 25 '18 at 4:26
caydencayden
135
edited Nov 25 '18 at 13:16
kit
1,1063816
asked Nov 25 '18 at 4:26
caydencayden
135
edited Nov 25 '18 at 13:16
kit
1,1063816
edited Nov 25 '18 at 13:16
kit
1,1063816
edited Nov 25 '18 at 13:16
kit
1,1063816
1,1063816
asked Nov 25 '18 at 4:26
caydencayden
135
asked Nov 25 '18 at 4:26
caydencayden
135
asked Nov 25 '18 at 4:26
caydencayden
135
135
Welcome to stackoverflow. Please post code as text. This makes it easier for other users so you are more likely to get helpful answers.
– Simon.S.A.
Nov 25 '18 at 4:34
1
my bad. i'll update it!
– cayden
Nov 25 '18 at 4:35
add a comment |
Welcome to stackoverflow. Please post code as text. This makes it easier for other users so you are more likely to get helpful answers.
– Simon.S.A.
Nov 25 '18 at 4:34
1
my bad. i'll update it!
– cayden
Nov 25 '18 at 4:35
Welcome to stackoverflow. Please post code as text. This makes it easier for other users so you are more likely to get helpful answers.
– Simon.S.A.
Nov 25 '18 at 4:34
Welcome to stackoverflow. Please post code as text. This makes it easier for other users so you are more likely to get helpful answers.
– Simon.S.A.
Nov 25 '18 at 4:34
1
1
my bad. i'll update it!
– cayden
Nov 25 '18 at 4:35
my bad. i'll update it!
– cayden
Nov 25 '18 at 4:35
add a comment |
3 Answers
3
active
oldest
votes
You can use display: flex at top level. It's easier to use than position: fixed or any other positioning strategies.
#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
add a comment |
Instead of position:fixed do position:relative for the sidebar. This will prevent the text from going under the sidebar.
If you want the sidebar to occupy the full width of the parent container you could do height: 100%.
I would also suggest that you keep the style and html separated. Either inside a <script></script> tag or in another file.
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
add a comment |
remove position: fixed. This property is used to position an element at a particular location on the browser window, yet you are not providing any position properties to support it.
Add display: inline-block css properties to the sidebar and stuff divs if you want to allow the content of the other div to wrap around the sidebar.
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
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
});
}
});
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%2f53464648%2fhow-to-seperate-sidebar-and-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use display: flex at top level. It's easier to use than position: fixed or any other positioning strategies.
#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
add a comment |
You can use display: flex at top level. It's easier to use than position: fixed or any other positioning strategies.
#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
add a comment |
You can use display: flex at top level. It's easier to use than position: fixed or any other positioning strategies.
#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
You can use display: flex at top level. It's easier to use than position: fixed or any other positioning strategies.
#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>#content {
margin: 20px 0;
padding: 10px;
background: blue;
display: flex;
}
#content #sidebar {
background: red;
width: 150px;
border: 2px solid lime;
padding: 10px;
}
#content #stuff {
background-color: orange;
flex: 1;
margin-left: 10px;
padding: 10px;
}<div id="content">
<div id="sidebar" style="">
<p>h</p>
</div>
<div id="stuff" style="">
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
<p>Lorem ipsum blah blah</p>
</div>
</div>answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
answered Nov 25 '18 at 4:54
Dinesh PandiyanDinesh Pandiyan
2,6161926
2,6161926
add a comment |
add a comment |
Instead of position:fixed do position:relative for the sidebar. This will prevent the text from going under the sidebar.
If you want the sidebar to occupy the full width of the parent container you could do height: 100%.
I would also suggest that you keep the style and html separated. Either inside a <script></script> tag or in another file.
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
add a comment |
Instead of position:fixed do position:relative for the sidebar. This will prevent the text from going under the sidebar.
If you want the sidebar to occupy the full width of the parent container you could do height: 100%.
I would also suggest that you keep the style and html separated. Either inside a <script></script> tag or in another file.
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
add a comment |
Instead of position:fixed do position:relative for the sidebar. This will prevent the text from going under the sidebar.
If you want the sidebar to occupy the full width of the parent container you could do height: 100%.
I would also suggest that you keep the style and html separated. Either inside a <script></script> tag or in another file.
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
Instead of position:fixed do position:relative for the sidebar. This will prevent the text from going under the sidebar.
If you want the sidebar to occupy the full width of the parent container you could do height: 100%.
I would also suggest that you keep the style and html separated. Either inside a <script></script> tag or in another file.
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
answered Nov 25 '18 at 4:37
Enes T.Enes T.
506
506
add a comment |
add a comment |
remove position: fixed. This property is used to position an element at a particular location on the browser window, yet you are not providing any position properties to support it.
Add display: inline-block css properties to the sidebar and stuff divs if you want to allow the content of the other div to wrap around the sidebar.
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
add a comment |
remove position: fixed. This property is used to position an element at a particular location on the browser window, yet you are not providing any position properties to support it.
Add display: inline-block css properties to the sidebar and stuff divs if you want to allow the content of the other div to wrap around the sidebar.
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
add a comment |
remove position: fixed. This property is used to position an element at a particular location on the browser window, yet you are not providing any position properties to support it.
Add display: inline-block css properties to the sidebar and stuff divs if you want to allow the content of the other div to wrap around the sidebar.
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
remove position: fixed. This property is used to position an element at a particular location on the browser window, yet you are not providing any position properties to support it.
Add display: inline-block css properties to the sidebar and stuff divs if you want to allow the content of the other div to wrap around the sidebar.
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
edited Nov 25 '18 at 5:12
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
answered Nov 25 '18 at 4:41
tshimkustshimkus
807919
807919
add a comment |
add a comment |
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.
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%2f53464648%2fhow-to-seperate-sidebar-and-content%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
Welcome to stackoverflow. Please post code as text. This makes it easier for other users so you are more likely to get helpful answers.
– Simon.S.A.
Nov 25 '18 at 4:34
1
my bad. i'll update it!
– cayden
Nov 25 '18 at 4:35