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!
Related
I have been building websites for way too long not to know how to do this. I'm embarrassed to ask. But I must.
I want a way to make any number of child divs within a parent div automatically span to the full width of the parent div.
My criteria for this fix are:
All of the child divs must be the exact same width
The width of the children divs must be responsive/dynamic
I would prefer a fix that doesn't involve sitting there and testing different percentages to find the exact percent width to prevent one of the children being wrapped or hidden (IE "display: if-there-was-an-easy-fix" instead of "width: 29.468749%")
I would love it if the fix would work with fixed margins and dynamic margins (margin: 10px and margin: 5%)
I'm 99% sure I knew the answer to this like a year ago but my current job requires that I work almost exclusively in tables, so I've forgotten how to do anything that isn't clunky and semantically disgusting.
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
display: block;
}
.box {
width: 29.468749%;
height: 200px;
display: inline-block;
margin: 0;
padding: 0;
border: none;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="three">
</div>
</div>
use display: flex on parent and flex: 1 on child elements to get flexbox
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
/*display:block;*/
display: flex;
}
.box {
/*width: 29.468749%;*/
/*display:inline-block;
/*margin:0;
padding:0;*/
flex: 1;
height: 200px;
border: none;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="three">
</div>
</div>
The first thing that you'll want to do is remove display: inline-block from the elements, and instead give them a float: left. From here you can get a 'default' full-width alignment by giving your elements a width of about 33.33% each. This would total 99.99%, which is 'close enough' to the full-width (unless you're on a screen of 10000px width). To ensure it's perfect though, you can use the CSS calc() property to ensure that it's exactly one third with width: calc(100% / 3).
This will work for regular elements, but your second box also has margin on it, which also factors into the width calculation in accordance with the box model. Because you're adding a 5% margin on both sides, , you'll want to subtract a total of 10% from the width calculation for this element. This can be done with width: calc((100% / 3) - (5% * 2)).
This gives you three equally wide elements, with one element having additional margins, as can be seen in the following:
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
display: block;
}
.box {
width: calc(100% / 3);
height: 200px;
margin: 0;
padding: 0;
border: none;
float: left;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
width: calc((100% / 3) - (5% * 2));
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="one">
</div>
</div>
If you want to change the number of elements, you simply need to update the 3 in each of the width calculations to reflect the number of siblings. This can be made even easier with a CSS variable, meaning you only have to update the CSS in one place:
:root {
--columns: 3;
}
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
display: block;
}
.box {
width: calc(100% / var(--columns));
height: 200px;
margin: 0;
padding: 0;
border: none;
float: left;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
width: calc((100% / var(--columns)) - (5% * 2));
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="one">
</div>
</div>
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);
}
I have 3 elements that I would like to align horizontally, without gaps in between, and centered. I've accomplished lining them up horizontally and equally spaced, but want the touching, ie, to not have white space between them but to also take up 100% width of the page. This is generic html but applies to what I've done on my actual page:
CSS:
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
HTML:
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
I've tried using display:flex, but that leaves a gap on the right hand side. I want to achieve a row of 3 divs, that span 100% of the width with no gaps in between.
You can achieve this by removing the display: inline-block and adding float: left. Also you should consider calculating your width, since 3*33% != 100%:
.content .featureitem{
height: 100%;
width: calc(100%/3);
//display: inline-block;
float: left;
background-color:bisque;
margin: 0;
}
Fiddle
If you'd like to stick with display: inline-block; for layout, there are a number of ways to fight the space between inline block elements. There a number of good solutions in the CSS Tricks article. I typically use the negative margin option (it hasn't come back to bite me in a major way yet):
nav a {
display: inline-block;
margin-right: -4px;
}
or
nav a {
display: inline-block;
margin-right: -2px;
margin-left: -2px;
}
If you're open to another layout, you can use flexbox, or even center a float-based layout with a parent <div>, if that makes sense.
if you use inline-block elements and have indentation in the HTML code, there will be a white space in between each of them.(just like the one you leave in between words)
you may avoid any gap in html or use display : flex or table layout.
You can use HTML comment <!-- comment -->to erase the gap
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33.33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div><!--
--><div class="featureitem"></div><!--
--><div class="featureitem"></div>
</div>
or table/table-cell display
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: table;
}
.content .featureitem {
height: 100%;
width: 33.33%;
display: table-cell;
background-color: bisque;
margin: 0;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
or display:flex and flex:1
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: flex;
}
.content .featureitem {
height: 100%;
flex: 1;
background-color: bisque;
}
.content:after {
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
Centering elements horizontally is easy using margin: 0 auto;
However, it doesn't work if there are two elements stacked in a column and one has a scrollbar and the other does not. In that case, the two horizontal centered elements aren't aligned anymore.
Question: Is there any way to align the two elements without using Javascript to adjust the margin of the first one?
JSFIDDLE DEMO
<head>
<style>
body {
margin: 0; height: 100vh;
}
.header {
height: 50px; background: red;
}
.content {
overflow-y: scroll; background: blue;
}
.inner {
background: rgba(255,255,255,.5); max-width: 300px;
margin: 0 auto; min-height: 50px;
}
.content > .inner {
min-height: 300px;
}
</style>
</head>
<body>
<div class="header">
<div class="inner"></div>
</div>
<div class="content">
<div class="inner"></div>
</div>
</body>
The main problem is obviously the centering. So why not circumvent it and use margin-left?
Try this CSS:
.inner { margin-left: calc(50vw - 150px); } /* half viewport width less half element width
(for precise centering) */
body {
margin: 0;
height: 100vh;
}
.header {
height: 50px;
background: red;
}
.content {
background: blue;
overflow-y: scroll;
}
.inner {
background: rgba(255,255,255,.5);
max-width: 300px;
/* margin: 0 auto; <-- remove */
margin-left: calc(50vw - 150px); /* new */
min-height: 50px;
}
.content > .inner {
min-height: 300px;
}
<div class="header">
<div class="inner"></div>
</div>
<div class="content">
<div class="inner"></div>
</div>
Revised Fiddle
Answer from Wes in chat:
This can be solved by adding a scrollbar to the first one, but hiding it from the user.
.header {
height: 50px;
background: red;
overflow-y: scroll;
width: 120%;
margin-left: -10%;
}
JSFIDDLE DEMO
If you're concerned a user could have a scrollbar wider than 10%, increase it width: 300% and margin-left: -100%. If somebody has a scrollbar as wide as the page, he / she can't use the page anyway.
I'm trying to create 3 columns layout, where structure should be main, left column, right column. The main column is auto-width to fill rest of page.
Unfortunately I cannot change the HTML, which is currently like this:
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
Yes: That means I cannot change the order of divs.
I've found some solutions, one of these is by using display: table-cell, but there is issue when using float. Second solutions is layout by using flexbox, it is pretty good solution, but I cannot use it because of IE9 where this CSS style isn't supported.
Just to restate the aim: My need is to have left and right with fixed width, and main will fill rest of free space.
<---250px--><----------------auto-width-------------><---200px--->
<---Left-----><------------------main------------------><---right----->
Have anyone any solutions for this in pure CSS without any JavaScript?
Here you go. A simple CSS solution. Remember you should always clear your floats.
HTML
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
<div class="clear"></div>
CSS
.main, .left, .right {
min-height: 250px;
}
.left {
float: left;
background-color: green;
width: 50px;
}
.right {
float: right;
background-color: blue;
width: 50px;
}
.clear {
clear: both;
}
.main {
background-color: gray;
}
JSFiddle: http://jsfiddle.net/18rvc23q/
You could try floating the sidebars to the left and right respectively, and then applying some padding to the .main div to keep it from overlapping them.
<style>
.left {float: left; width: 250px;}
.right {float: right; width: 200px;}
.main {padding: 0 200px 0 250px;}
</style>
<div class="wrap">
<div class="right">right</div>
<div class="left">left</div>
<div class="main">main</div>
</div>
https://jsfiddle.net/1ofqkLmw/
Note that in this markup I've moved the main div to be the last child of wrap.
Also note that you can just as well use margin instead of padding - if you don't want the border and background to overlap the sidebars, then margin is the way to go.
You could use a mix of left and right margin on .main and then absolute position the .left and .right columns.
HTML
<div class="wrap">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS
.wrap {
position: relative;
}
.main {
border: 1px dashed red;
margin: 0 100px;
min-height: 300px;
}
.left,
.right {
width: 100px;
min-height: 300px;
position: absolute;
top: 0;
}
.left {
left: 0;
background-color: yellow;
}
.right {
right: 0;
background-color: blue;
}
Here's a jsFiddle of it in action: http://jsfiddle.net/1u9gzyh6/
Two ways to do this:
HTML
<div class="wrap">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
The better (but unsupported in IE9-) way
.wrap {
display:flex;
}
.left {
flex-basis:250px;
}
.right {
flex-basis:200px;
}
.main {
flex-grow:1;
}
The somewhat hackier, but supported in IE9 (but not IE8- or certain mobile browsers) way
.wrap {
display:block;
}
.left {
width:250px;
}
.right {
width:200px;
}
.main {
width:calc(100% - 450px);
}
UPDATE: if you wanted to dynamically add / remove columns, just add a few extra classes in your CSS file:
.main.no-left {
width:calc(100% - 200px);
}
.main.no-right {
width:calc(100% - 250px);
}
.main.no-left.no-right {
width:100%;
}
And apply the classes dynamically via JS as needed. Anything else requires a JS solution that actually sets the width as an inline style, or makes use of position:absolute;, which can get real hacky, real fast.
EDITED:
<style>
div {
margin: 0;
padding: 0
}
div.main-wrapper {
overflow: hidden;
width: 700px;
margin: 0 auto;
}
div.left-wrapper {
float: left;
width: 500px;
}
div.left-col {
float: left;
width: 200px; /*change to what value you desire*/
background-color: #5446EB;
height: 400px;
}
div.main-col {
background-color: #DDEB46;
height: 400px;
}
div.right-col {
float: right;
width: 200px; /*change to what value you desire*/
background-color: #EB838D;
height: 400px;
}
</style>
<div class="main-wrapper">
<div class="left-wrapper">
<div class="left-col">
insert content of the left col here
</div>
<div class="main-col">
insert content of the main col here.
</div>
</div>
<div class="right-col">
insert content of the right col here
</div>
</div>
I think this should solve your problem:
.main, .left, .right {
height: 250px;
}
.left {
float: left;
background-color: green;
width: 50px;
position: relative;
margin-left: -300px; // negative width of main
}
.right {
float: left;
background-color: blue;
width: 80px;
margin-left: 50px; // width of left
}
.main {
width: 300px;
background-color: gray;
float: left;
position: relative;
left: 50px; // width of left
}
.wrap:after {
content: "";
clear: both;
}
<div class="wrap">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>