I would like to have those margins on the left and right like Apple does on its support articles (example: support.apple.com/en-us/HT204306)
Now when I try to make it with the css elements margin-right and margin-left this kinda does not work as the content section must not vary in size but rather the margins.
my css:
.margin {margin-left: 400px; margin-right: 400px;}
It also dows not work when I set a width to the content section and make margin-left and right: auto;
my html:
<div class:"margin">
<p>test</p>
</div>
You could do it kind of this:
<div class="wrapper>
<div class="content">...</div>
</div>
<style>
.wrapper {
width: 100%
}
.content {
width: 800px;
max-width: 800px;
margin: 0 auto;
}
</style>
margin: 0 auto;
centers the .content div inside .wrapper.
Related
I have the following HTML
<div class="container">
<div class="article">
<h2>Article</h2>
</div>
<div class="blog">
<h2>Blog</h2>
</div>
</div>
and this css
.container {
width: 1200px;
}
.article {
background-color: red;
float: left;
width: 600px;
}
.blog {
background-color: blue;
width: 600px;
float: left;
}
now they are perfecly putted inside the parent because 2 x 600px = 1200px ( the parent's width ).
But if i put margin in blog
.blog {
background-color: blue;
width: 600px;
float: left;
margin: 20px;
}
then the layout is broken.
On the mozilla documentation is mentioned that
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model
standard box model does not include the margin it self.
So only padding and border. But i give not padding and border rto my blog div i give only margin and i expect the layout to not be broken and to have still actuil width of 600px.
Can somoene explain me what is happening here and why my layout is broken
It is worth noting that margin will apply outside the borders of the element and padding will apply inside the element.
To understand this better consider the following examples.
Margin
* {box-sizing: border-box;}
.parent {width: 200px; height: 220px; background: limegreen;}
.child {height: 200px; width: 100%; background: red; margin: 20px;}
<div class="parent">
<div class="child">
</div>
</div>
As you can see that the child element is parted way from its parent's initial position and creating a space around it.
Padding
*{box-sizing: border-box;}
.parent1 {width: 200px; height: 220px; background: limegreen;}
.child1 {height: 200px; width: 100%; background: red; padding: 20px;}
<div class="parent1">
<div class="child1">
</div>
</div>
Here the padding is applied inside the child element so it won't leave the parent's width
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
Consider the following HTML. I have a .wrap div which has left and right padding of 50px. Inside that div I have another div .full. I want to increase its default width by overcoming the padding of the .wrap.
I am setting its padding to -50px so that its width becomes equal to the width of the .wrap, but it does not work.
HTML:
<div class="wrap">
<div class="inner">
<div class="normal">xx</div>
<div class="full">should be same width (300px) as wrap</div>
</div>
</div>
CSS:
.wrap{
height: 500px;
width: 300px;
margin: 0 auto;
padding: 0 50px;
background: yellow;
}
.full{
background: orange;
padding: 0 -50px;
}
Demo:
http://jsfiddle.net/WDS6X/
In this case, you'd need to use margin, padding is used for space on the inside.
Using
margin: 0 -50px;
instead of the padding in the .full-div works like you wanted it to, here is the JSFiddle provided by nienn in the comments.
For further understanding, take a look at this SO thread containing a pretty nice explanation.
I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.
I used the Sticky Footer approach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.
I have tried several solutions which involved me adding height:100%, height:auto; position:relative but it did not work.
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#wrapper #content {
background-color: pink;
width: 400px;
height: 100%;
margin: 0 0 -30px 100px;
padding: 25px 30px 25px 30px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
The trick about height:100% is that it requires all of the parent containers to be have their heights set as well. Here's an html example
<html>
<body>
<div id="container">
</div>
</body>
</html>
in order for the container div with a height set to 100% to expand dynamically to the height of the window you need to make sure that the body and html elements have their heights set to 100% as well. so...
html
{
height: 100%;
}
body
{
height: 100%;
}
#container
{
height: 100%;
}
would give you a container that expands to fit your window. then if you need to have footer or header that floats above this window you can do so with z indexing. This is the only solution I've found that fills the vertical height dynamically.
I'm providing a slightly more general solution so it is more useful for others reading this answer and wondering how to apply it to their site.
Assuming you have three divs:
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
where #header is fixed and may have variable height, #contents should consume all remaining vertical space and #footer is fixed and may have variable height you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#header {
flex: none;
}
#contents {
flex: 1;
height: 100%;
overflow-y: scroll;
}
#footer {
flex: none;
}
Note that this will allow the contents to scroll vertically to show it's whole contents.
You can read more about display:flex here.
Try changing your css to this:
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#content {
background-color: pink;
width: 400px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 30px;
top: 150px;
margin-left: 100px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
You probably don't want to be setting the width, padding, margins, ect. of the wrapper. Also, with absolute positioning you can pull the bottom and top of the content to where you want them.
Here's what you are after, I think.
I spend several hours trying to figure this out too and finally have a robust solution without hacks. However, it requires CSS3, which requires a modern browser to support it. So, if this constraint works for you, then I have a real solution for you that works.
http://jsfiddle.net/u9xh4z74/
Copy this code into your own file if you need proof, as the JSFiddle will not actually render the flexbox correctly as embedded code.
Basically, you need to
- set the target container to 100% height, which you seem to already know
- the parent container you set display: flex and flex-direction: vertical (you'll see in the JSFiddle I've also included the alternate styles that do the same thing but are needed for cross browser support)
- you can let the header and footer be their natural heights and dont need to specify anything in that regard
- in the container you want to fill up the remaining space, set flex: 1. You're set! You'll see it works exactly as you semantically have intended. Also in the JSFiddle, I included overflow: auto to demonstrate that if you have even more text than the screen can handle, scrolling works as you would want it to.
<div style="display:flex; flex-direction:vertical;">
...header(s)...
<div style="flex: 1; overflow: auto;">
As much content as you want.
</div>
...footer(s)...
</div>
As a side note, I pursued the option of trying to do this same thing using display: table. It works just fine as well, except that overflowed content does not work as you would expect, instead overflowed content simply expands the container to the size of the content, which I'm pretty sure is not what you want. Enjoy!
Use display:table and display:table-row
Set height:0 for normal divs and height:auto for div that should fill vertical space. Insert a div with {height:100%; overflow-y:auto} into the vertical filler to if the containers height shouldn't expand beyond its preset height.
Behold the power of display:table!
<div style="height:300px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Hello
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px"></div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Gbai
</div>
</div>
</div>
There is no 100% height from 100% continer height exactly. You can't solve it this way. Likewise while using mix of height + margin + padding. This is way straight to hell. I suggest you to take a look for tutorials which are sloving this page layout.
I have two parts to my site. The main body and the sidebar. The body is 6in and sidebar will probably be 200px. How do i center my page? So there is equal space on the left and right side? It should center no matter the resolution.
Using XHTML 1.0 Strict. Should work on all major browsers or at least Firefox and chrome.
You can set margin to auto for left and right margins:
<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
</div>
#sidebar {
float:left;
width: 50px;
}
#main {
width: 150px;
float:left;
background-color: yellow;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 200px;
}
This is pretty portable too, even works on older IE versions.
Update wrapper, sidebar and main need to have widths. Google two column layout, that's a pretty standard way to do it.
http://jsfiddle.net/aXLVv/1/ - see it in action.
What about setting
margin: 0px auto;
to the outermost container.
<div id="wrapper">
<div id="side"></div>
<div id="main"></div>
</div>
#wrapper { margin: 0 auto; width: 800px; }
I dont think margin-left: auto; and margin-right: auto; will work. You need to have a global wrapper.
body {
margin-left: auto;
margin-right: auto;
}