I can't understand how this works and why it centers. Why is it width: 70%; and not 50% / 25%?
I cannot get my head around this. I'm just trying to learn the basics on web dev. I'm completely stumpted.
body,
html {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 70%;
}
.top-header {
background-color: yellow;
width: 100%;
height: 100px;
}
.main-content {
background-color: red;
width: 100%;
height: 25px;
}
<div class="wrapper">
<div class="top-header">
</div>
<div class="main-content">
</div>
<div class="bottom-footer">
</div>
</div>
width: 70% is just an option, it very well can be 50% or 25%. It doesn't matter. What matters is having a width when you use margin: auto. Setting the margin to auto will auto-calculate the distant of the element from its container and adjust the element in the center accordingly
setting elements to the centre in CSS, like div here we use the attribute margin: auto;
the width only ensures that it doesn't take the whole page and stretching outside of it's container.
you can also specify the margin values explicitly.
i'd also recommend using max-width instead as it will improve the resizing on your site when you want to use it on mobile.
another thing, if you want to centre text inside the div you use the text-align: center;
Why is it width: 70%; and not 50% / 25%?
This is purely the preference of the author. It could be any width, or max-width.
The important thing is that it is not 100% or auto which would cause the element to fill the entire width and make the idea of centring pointless.
div {
height: 1em;
border: 1px solid black;
background: #aaa;
margin: 1ex auto;
width: 70%;
}
div+div {
width: 50%;
}
div+div+div {
width: 25%;
}
div+div+div+div {
width: 100px;
}
div+div+div+div+div {
max-width: 80ex;
}
div+div+div+div+div {
max-width: 20px;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Related
I have a flex container that is 100% width with a horizontal scroll. I want to have space on left and right in the scroll, but margin-right of the divs doesn't create space on the right side, also I have another container wrapping the container to hide the scrollBar with padding-bottom.
I know that I can use white-space: nowrap in a block container in which margin-right works, but I want to use flex-box. Also I am setting the divs' width with min-width:
Also I know that in this case min-width: 22% = 22vw, but I want to do it with percantage.
jsfiddle code open
body{
width: 100%;
height: 10vh;
margin: 0;
}
div{
height: 100%;
}
.container{
width: 100%;
}
.container > div{
overflow-y: hidden;
display: flex;
width: 100%;
}
.container > div > div{
min-width: 20%;
display: inline-block;
margin: 0 5px;
background: red;
}
Here is little trick about the margin-right which wasn't applied on the last div you can
easily add another div and make it small as possible for example like 0.1px but if it is 0px it won't work this will make the last div left space between them but the last div will not be visible so it will sound like its margin has been applied
body {
width: 100%;
height: 40vh;
margin: 0;
}
div {
height: 100%;
}
.container {
width: 100%;
}
.container>div {
/*overflow-y: hidden;*/
overflow-x: scroll;
display: flex;
width: 100%;
}
.container>div>div {
min-width: 20%;
display: inline-block;
margin: 0 10px;
background: red;
}
.container>div>div:last-child {
min-width: 0.1px;
height: 100%;
}
<div class="container">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
So, I think the issue is your min-width setting. 20% of 100 would only allow 5 blocks without spacing. 7 blocks would need to be ~14% + spacing to allow enough room. So you can take out the min-width, convert your margin spacing to something proportional and add flex:1 to .container > div > div. jsfiddle
Extending #Gad answer:
There is option to not add additional div at the end. You can just use pseudo element ::after/::before and then add something like this. Important note is fact that then div with after pseudo element needs to be position: relative.
.container>div>div:last-child::after {
content: " ";
width: 25px;
height: 100%;
position: absolute;
right: -25px;
}
https://jsfiddle.net/0b4tm5y3/4/
I would like to achieve a layout that looks like this:
I am interested in a css/html only solution, so no javascript required.
The widths of both divs are dynamic, so I cannot use any static margins.
The spacing between the sides of the divs, and the top, should be the same.
I tried using margin: auto auto 0 auto on the inner div, as you can see in this jsfiddle, but it only works for left and right.
Note, the following attempt doesn't answer the question fully, since the width of the child cannot be dynamic.
The idea is to use a percentage width + percentage margin-top values on the child. It's a responsive layout, see the comments in the code, and try it out on different window sizes.
JSFiddle: http://jsfiddle.net/jkoycs6e/
body {
margin: 0;
}
.outer {
height: 100vh; /*for demo only*/
background: teal;
overflow: auto;
}
.inner {
width: 80%;
background: gold;
margin: auto;
margin-top: 10%; /* 100%-80%/2 */
}
<div class="outer">
<div class="inner">
hello<br/>hello<br/>hello
</div>
</div>
This is not possible. At least not without using javascript. There is no css-only solution.
If you put align="center" in your div you'll get to the middle of the screen every time but it's not going to be supported in HTML5 so I recommend the 50:50 approach.
div
{
text-align:center;
margin-top:50%;
margin-bottom:50%;
}
Hope that helps. ^^
Set the outer parent's overflow to auto and give your margin-top a relative value. Something like this:
.outer {
background: blue;
overflow: auto;
}
.inner {
background:yellow;
width: 100px;
height: 100px;
margin: 1em auto 0 auto;
}
<div class="outer">
<div class="inner">
</div>
</div>
This seems to work:
.outer {
height: 500px;
width: 300px;
background: blue;
position: relative;
}
.inner {
width: 80%;
height: 200px;
background:green;
position: absolute;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
margin-bottom: 0;
}
You can change the percentages marked for the margins as per your intended value for k.
Here's the fiddle
EDIT: Note that the width of inner has to be set in terms of percentages for this to work. Also note that when a margin is specified in terms of percentage, the margin's value is computed as a percentage of the width of the container. Even for the vertical margins, the percentage is applied on the width (and NOT the height) of the container.
Here's an SO post that's helpful in understanding how to position elements with respect to their container.
This answer doesn't actually make use of the margin property, nor does it have only two div.
body {
font-size: 26px;
text-align: center;
font-family: monospace;
}
#container {
display: inline-block;
position: relative;
width: 100%;
}
#dummy {
margin-top: 20%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver
/* show me! */
}
#wrapper {
display: table;
width: 100%;
}
#row {
display: table-header-group;
}
#left {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
#incenter {
display: table-cell;
background-color: aqua;
}
#right {
display: table-cell;
background-color: chartreuse;
width: 20%;
}
<div>
<div id="container">
<div id="dummy"></div>
<div id="element">
k (20%)
</div>
</div>
<div id="wrapper">
<div id="row">
<div id="left">width = k (20%)</div>
<div id="incenter">incenter</div>
<div id="right">width = k (20%)</div>
</div>
</div>
</div>
Another example with measurements in pixels is here.
For explanation refer:
https://stackoverflow.com/a/12121309/2534513
https://stackoverflow.com/a/6615994/2534513
I have actually combined techniques mentioned in above two answers to make this one.
Using JavaScript would have been a lot easier.
I have the typical 3 column layout and I need it to be fluid (ish). The specs of the projects are: we need the container to go from 1024px to 1440px max (that's easy). And the center column needs to go from 514 (at 1024) to 626 (at 1440), the sidebars on both sides containing the rest of the space.
I don't see an easy way around this, I've played with max-width and min-width but since the proportions are not the same at the 2 breakpoints, I can't use percentage width to make the columns fill the space on higher resolutions.
Here is my code:
<div id="container">
<nav id="sidebar-left">Left</nav>
<section id="page">Center</section>
<div id="sidebar-right">Right</div>
</div>
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
#page{
min-width: 514px;
margin: 0 20px;
max-width: 626px;
float: left;
background: purple;
height: 300px;
}
And I also made a fiddle:
https://jsfiddle.net/1y59nuxz/
I'd rather have a css only solution, I'm pretty sure is more or less easy to solve using jquery but I'd want to know if this is approachable with using it.
EDIT: I need this to be compatible with IE9+
Ok. You have several solutions to accomplish this task.
One solution is to change order of elements in your html (if possible):
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
For "#page" use next css code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
Example code:
#page {
overflow: hidden;
height: 300px;
}
.page-inner {
height: 100%;
margin: 0 20px;
background: purple;
}
#container{
min-width:1024px;
max-width: 1440px;
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
min-height: 100%;
}
#sidebar-left{
min-width: 230px;
max-width: 387px;
float: left;
background: red;
height: 300px;
}
#sidebar-right{
min-width: 230px;
max-width: 387px;
float: right;
background: blue;
height: 300px;
}
<div id="container">
<nav id="sidebar-left">Left</nav>
<div id="sidebar-right">Right</div>
<section id="page">
<div class="page-inner">Center</div>
</section>
</div>
You can also check the fiddle.
Another solution is to apply flexbox. It's an elegant and easy way.
I think this layout can be achieved using some table & table-cell css like so:
basically set the .container to display: table
then set all direct children of the .container to display: table-cell
now these children will shrink/grow accordingly to their parent, however some tweaks have to be made for the #page to stay put at 626px widh and shrink down accordingly
max-width/min-width combo won't work on the #page div, however we can specify a fixed width, according to the max-width desired, in this case 626px, so that this div won't go past 626px width, but will shrink down if the window is resized
finally since we're using display: table-cell on these children divs, any margin prop. will be ignored, however we can mimic a margin using some border-left & right props. OR add another div inside the #page div that will hold the content and have some margin applied to it and the background accordingly.
Check out the demos bellow:
fake margins to the #page here
OR another div that holds the content for #page here
I have modified your code on fiddle
or else check the code below.
Html
<div class="content">
<div class="content__left">left</div>
<div class="content__right">Right</div>
<div class="content__middle">Center</div>
</div>
CSS
html, body, .container {
width: 100%;
height:100%;
min-width:1024px;
max-width: 1440px;
}
.content__left {
width: 20%;
max-width:200px;
float: left;
background: red;
margin-right:20px;
height:300px;
}
.content__middle {
min-width: 514px;
background: purple;
overflow: auto;
height:300px;
}
.content__right {
width: 20%;
max-width:200px;
float: right;
background: blue;
margin-left:20px;
height:300px;
}
I'm new to HTML and CSS so please bear with me. I am trying to create a responsive grid where a parent div has 4 child divs contained within it. Resizing the browser both vertically and horizontally when there are no margins between the child divs works successfully. However, when I begin to create margins between the child divs, resizing the browser vertically causes the bottom child div to overlap the parent div - which I do not want.
I tried using the overlap: hidden property however this causes the bottom child div to be hidden (truncated) when the browser is vertically changed - again, I do not want this behaviour.
What I want is the child divs to have equal margins and when I vertically change the browser, the child divs to be contained within the parent div, regardless of the browser vertical size.
Here is my code:
html {
width: 100%;
height: 100%;
}
body {
width: 70%;
height: 100%;
background-color: black;
margin: 0 auto;
}
#div_container {
width: 100%;
height: 100%;
background-color: white;
}
#div1 {
width: 94%;
height: 24%;
background-color: green;
margin: 0% auto 1% auto;
}
#div2 {
width: 94%;
height: 25%;
background-color: yellow;
margin: 0% auto 1% auto;
}
#div3 {
width: 94%;
height: 25%;
background-color: blue;
margin: 0% auto 1% auto;
}
#div4 {
width: 94%;
height: 25%;
background-color: red;
margin: 0% auto 1% auto;
}
<div id="div_container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Hopefully my question makes sense - if not then please let me know.
Any help would be greatly appreciated.
Thanks
Like ckuijjer said, the vertical values are relative to the width and not to the height.
One solution would be the usage of calc.
.container div {
height: calc(25% - 21px);
width: 80%;
margin: 0 auto 28px;
background: #f00;
}
Here is an example on codepen. But the browser support isn't very good.
The percentage for the margin-top and margin-bottom is based on the width instead of the height. See the discussion in Why are margin/padding percentages in CSS always calculated against width?
It might be an option to take a look at the vh unit which allows you to set a size as a percentage of the viewports height
Trying to stack 3 DIVs vertically, so that the top DIV is 25% of screen height, middle is 50%, and bottom is 25%, but they seem to extend the screen and I end up having a scrollbar.
body,html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 25%;
background: #464646;
}
#middle {
width: 100%;
padding: 15px 0 15px 0;
margin: 0 auto 0 auto;
min-width: 657px;
height: 50%;
text-align: center;
vertical-align:middle;
}
#bottom {
width: 100%;
padding: 15px 0 15px 0;
height: 25%;
background: #988056;
}
<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>
As Hashem mentions in a comment above, box-sizing: border-box is considered best practice nowadays. Add the following to your CSS and you should be good to go:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Here is a good read-up for you.
That said, if you are working on an existing product and have lots of legacy code that would be broken if you did this, you need to work around the margins and paddings on your site sections, they add height, and that makes it all add up to more than 100%.
And if you are uncomfortable with that as well, look up flex-box layout. Only works in modern browsers though, so don't do it if you need old IE support.
This is due to the padding that you have added to middle and bottom divs.
The width and height styles always specify the width/height of textual area i.e. width/height of the "div's content" and they do NOT include the padding value. The padding is an extra space added apart from the width/height.
Try the following, and it should give you the desired results:
HTML:
<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>
CSS:
body,html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 25%;
background: #464646;
}
#middle {
width: 100%;
margin: 0 auto 0 auto;
min-width: 657px;
height: 50%;
text-align: center;
vertical-align:middle;
}
#bottom {
width: 100%;
height: 25%;
background: #988056;
}
Working LIVE.
The CSS flexbox layout module is especially made to handle requirements like this.
You can use the flex-grow property:
The flex-grow property is a sub-property of the Flexible Box Layout module.
IT defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
#container{
-webkit-display:flex;
-moz-display:flex;
-ms-display:flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
height:100%;
}
#top {
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
background: #464646;
}
#middle {
-webkit-flex:2;
-moz-flex:2;
-ms-flex:2;
flex:2;
background:dodgerblue;
}
#bottom {
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
background: #988056;
}
<div id="container">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
In this scenario, since you're concerned about screen height, you might want to investigate the 'vh' css rule.
For instance, if you wanted to stack your top, middle, and bottom evenly, you could do it with pure css:
#top, #bottom, #middle {
height: 32vh;
}
Or, as pertains to the question:
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height 24vh; } /*24 vh so you have a little wiggle room*/
Examine here:
body { margin : 0; padding: 0}
div { border: #ccc solid 1px; }
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height: 24vh; }
/*24 vh so you have a little wiggle room*/
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>