first of all, sorry for the title not really explicit
Here is my problem:
I've container, inside it a sidebar which is 280px, and I would like to make the home page full width. But if I write something like this
.container {
width: 100%;
.sidebar {
width: 280px;
}
.home {
width: 100%;
}
}
the home page goes underneath, and I would like to position aside the sidebar.
But I have no idea how to do it
Here is a CSS solution using calc() function to minus the .sidebar width from .home
#container {
width: 100%;
height: 300px;
}
#container .sidebar {
width: 280px;
height: 100%;
background: blue;
display: inline-block;
color:#fff;
}
#container .home {
width: calc(100% - 285px);
height: 100%;
background: yellow;
display: inline-block;
}
<div id="container">
<div class="sidebar">SideBar</div>
<div class="home">Home</div>
</div>
This should work:
https://jsfiddle.net/0bsygLsh/
.container {
width: 100%;
overflow:hidden;
.sidebar {
width:280px;
display:inline-block;
float:left;
}
.home {
width:auto;
}
}
It seems like you need to read about the CSS display property. This is perhaps the most important thing to know when dealing with CSS. See here https://www.w3schools.com/cssref/pr_class_display.asp
Here's an example of using display: flex to solve your problem.
Your problem could be solved in several ways though. Consider attempting it yourself using display: inline.
.container {
display: flex;
height: 100vh;
}
.sidebar {
flex-basis: 100px;
background-color: red;
}
.home {
flex: 1;
background-color: blue;
}
<div class="container">
<div class="sidebar">
I'm the sidebar
</div>
<div class="home">
I'm the home page
</div>
</div>
The following will create a sidebar with a fixed width of 280px and a div (.home) with a fluid width:
SCSS
.container {
width: 100%;
overflow:hidden;
.sidebar {
float:right; /* or float:left for left sidebar */
width:280px;
}
.home {
margin-right:280px; /* or margin-left for left sidebar */
}
}
HTML
<div class="container">
<div class="sidebar">
</div>
<div class="home">
</div>
</div>
If you want to make the home div full width and the sidebar div should be on top of it then the css will be following:
.container {
width: 100%;
position: relative;
}
.sidebar {
width: 280px;
position: absolute;
top: 0;
left: 0;
}
.home {
width: 100%;
padding-left: 280px;
}
Or if you want to keep them side by side then the css should be following:
.container {
width: 100%;
}
.container:after {
display: table;
content: "";
clear: both;
}
.sidebar {
float: left;
width: 280px;
}
.home {
float: left;
width: calc(100% - 280px);
}
Related
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I have a current issue in my current project, where i have an area in which i want to center some text. This text can be different from each use of the area.
This part i have fully understood, but i want to place another piece of text, exactly in the center of the remaining space between the end of the first text and the end of the area.
How would i structure my css and html to make this possible?
The image below should help display what it is, that i want to do:
html,
body {
height: 100%;
text-align: center;
}
#left {
width: 200px;
display: inline-block;
background: #f00;
height: 200px;
justify-content: center;
}
#right {
display: inline-block;
background: #0f0;
height: 200px;
}
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
Edit:
Sorry about not including code
An attempt i took: http://jsfiddle.net/5jRaY/298/
I get the red block to fit as wanted, other than the div should wrap the container. My issue is that i can't get the green box to fill the remaining space of the page.
You can try a different layout. This is what I will use:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: table;
width: 100%;
text-align: center;
}
#one,
#two,
#three {
display: table-cell;
width: 33.333%;
}
#one {
width: 200px;
height: 200px;
background: white; /*Change color to see it*/
}
#two {
background: red;
height: 200px;
}
#three {
height: 200px;
background: green;
}
<div id="wrapper">
<div id="one"></div>
<div id="two">CONTENT</div>
<div id="three">Other content</div>
</div>
Let me know if it works for you!
Hope this helps:
#container {
height: 200px;
text-align: center;
position: relative;
}
#left {
width: 200px;
margin: auto;
height: 100%;
background: #f00;
}
#right {
top: 0;
right: 0;
bottom: 0;
background: #0f0;
position: absolute;
width: calc(50% - 100px); /* 100px is 50% of #left */
}
<div id="container">
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
</div>
I want to have a side nav of width: 150px; and then the content floating next to it. I want the content to be 100% minus the 150px side nav width. Is this possible?
I know I can do it in Javascript, but I would much rather know a simple CSS solution, something that would be:
width:100%-150px;
Is there such a solution?
I want the content to be 100% width, minus the 150px side nav width.
Is this possible?
Yes:
width: calc(100% - 150px);
N.B. Be sure to leave a space either side of the minus sign. The CSS parser needs to be clear it is parsing a minus sign, followed by a positive integer.
There are many different ways to achieve that, here are a few of them.
1. using float + overflow:
Note, the content box shouldn't set any float on it, and overflow:auto can prevent wrapped text going under the sidebar box.
.container:after {
content: "";
display: table;
clear: both;
}
.sidebar {
background: pink;
width: 150px;
float: left;
}
.content {
background: gold;
overflow: auto;
}
<div class="container">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
2: using float + calc:
See the browser support tables - IE9+ basically.
.container:after {
content: "";
display: table;
clear: both;
}
.sidebar {
background: pink;
width: 150px;
float: left;
}
.content {
background: gold;
width: calc(100% - 150px);
float: left;
}
<div class="container">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
3. using display:inline-block + calc:
.container {
font-size: 0; /*remove white space*/
}
.sidebar, .content {
font-size: 16px; /*reset font size*/
display: inline-block;
}
.sidebar {
background: pink;
width: 150px;
}
.content {
background: gold;
width: calc(100% - 150px);
}
<div class="container">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
4. using CSS table:
.container {
display: table;
width: 100%;
}
.sidebar, .content {
display: table-cell;
}
.sidebar {
background: pink;
width: 150px;
}
.content {
background: gold;
}
<div class="container">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
5. using flexbox:
See the browser support tables - IE10+ with prefixes.
.container {
display: flex;
}
.sidebar {
background: pink;
flex: 0 0 150px;
}
.content {
background: gold;
flex: 1;
}
<div class="container">
<div class="sidebar">sidebar</div>
<div class="content">content</div>
</div>
Another ways is to make the side nav float and then have the main content be width 100% and include a padding of 150px on the same side as the nav
An option would be to specify
.content {
left: 0;
position: absolute;
right: 150px;
}
.sidenav {
float: right;
margin-right: -150px;
}
instead of width: 100% for the content. Note: I assumed relative positioning on the parent element (which would contain both the content and side nav).
Good luck!
Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.
Here is my code.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Use inline-block over float:left to avoid problems with clearings, but when using inline-block better use vh over % to fill the viewport.
And to have a fixed sidebar, just give it a fixed width and use calc to calculate the remaining space.
you can do something like this:
Snippet
html,
body {
height: 100vh;
margin: 0;
}
#content {
width: 100vw;
font-size: 0; /* fix inline-block gap */
}
#content > div {
font-size: 16px; /* revert font-size 0 */
}
#left {
width: 150px;
height: 100vh;
display: inline-block;
vertical-align: top;
background-color: red;
}
#right {
display: inline-block;
width: calc(100vw - 150px);
height: 100vh;
background: green
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: calc(100vw - 150px);
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Here's what you should do :
First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.
The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().
A demo :
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 100px;
height: 100%;
display: table-cell;
background-color: red;
}
#right {
display: table-cell;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
right : 0;
left : 100px;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
See also this Fiddle.
Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.
Here is my code.
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
}
#left {
width: 20%;
height: 100%;
float: left;
background-color: red;
}
#right {
float: left;
width: 80%;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 80%;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Use inline-block over float:left to avoid problems with clearings, but when using inline-block better use vh over % to fill the viewport.
And to have a fixed sidebar, just give it a fixed width and use calc to calculate the remaining space.
you can do something like this:
Snippet
html,
body {
height: 100vh;
margin: 0;
}
#content {
width: 100vw;
font-size: 0; /* fix inline-block gap */
}
#content > div {
font-size: 16px; /* revert font-size 0 */
}
#left {
width: 150px;
height: 100vh;
display: inline-block;
vertical-align: top;
background-color: red;
}
#right {
display: inline-block;
width: calc(100vw - 150px);
height: 100vh;
background: green
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: calc(100vw - 150px);
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
Here's what you should do :
First, replace the float:left; with display: table-cell; for your #left and #right selectors.
Then, use display: table; for your #content selector.
Then, remove the width: 80%; of your #right and #right footer selectors
Add right : 0; to your #right footer selector
Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.
The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().
A demo :
html, body {
height: 100%;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#left {
width: 100px;
height: 100%;
display: table-cell;
background-color: red;
}
#right {
display: table-cell;
height: 100%;
background-color: green;
}
#right header {
background: blue;
text-align: center;
color: white;
padding: 20px;
}
#right footer {
background: brown;
text-align: center;
color: white;
position: absolute;
bottom: 0;
right : 0;
left : 100px;
}
<div id='content'>
<div id='left'>Testing</div>
<div id='right'>
<header>TITLE</header>
<div class="content">
<p>lorem ipsum and the like.</p>
</div>
<footer>FOOTER</footer>
</div>
</div>
See also this Fiddle.