So I followed this tutorial on centering content, it's a two column layout.
Tutorial
Here is the code for the completed product:
https://jsfiddle.net/dppttuvn/
My problem is, as soon as I change the #wrap width and then #main and #sidebar width so it fills the #wrap width, the layout completly screws up. As shown in this link:
https://jsfiddle.net/dwzvoarv/
The sidebar isn't to the right of the main section.
Can someone briefly explain why this happens and also fix it?
Thank you! (I'm still learning web development clearly lol)
It's because of the box-sizing. By default, browsers separate padding and width, so basically the total width of your element is padding + width.
Lets say your element is 1000px, with a padding-left: 100px. What the browser will do by default is paint the element as being 1100px because that extra padding isn't included in the width (by default).
Add this selector to the top of your stylesheet...
* {
box-sizing: border-box;
}
...and what this is doing is telling every element on the page (thats what the * selector with no parent selectors does) and sets the box-sizing property of it to border-box, meaning that the browser will now respect the width property as the actual total width.
So now if you have a 1000px element with padding-left: 100px, then the total width will still actually be 1000px including that padding.
You have to account for padding when you set widths. So to get 1000px you set #main to 700px and #sidebar to 300px. However since there is a 10px padding all around you have to subtract those pixels 10px left and 10px right. so your #main should be 680px and #sidebar should be 280px. Run this code in JS Fiddle and you can see it working.
body,
html {
margin: 0;
padding: 0;
color: #000;
background: white;
}
#wrap {
width: 1000px;
margin: 0 auto;
background: #99c;
}
#header {
padding:5px 10px;
background:#ddd;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:#c99;
}
#main {
float:left;
width:680px;
padding:10px;
background:#9c9;
}
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:280px;
padding:10px;
background:#99c;
}
#footer {
clear:both;
padding:5px 10px;
background:#cc9;
}
#footer p {
margin:0;
}
/* Navigation Bar */
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
display: inline;
margin: 0;
padding: 0;
}
That's because the actual size of the divs is width + padding + border.
Use:
div{
box-sizing:border-box;
}
To get the desired behaviour. Read more at https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
Updated fiddle: https://jsfiddle.net/dwzvoarv/4/
Specifically for your example, you can fix it by changing the wrap width to 1040px:
#wrap {
width: 1040px; /*instead of 1000px*/
}
width of wrap = width of main + width of column + padding of main (right and left) + padding of column (right and left)
= 700 + 300 + 20 + 20 = 1040px
Related
I have a problem with styling with CSS.
I can't fit the #main to the screen. I have a menu on the left side and i would like to have the main screen from the right next to the menu.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main{
position: relative;
width: 80%;
float:left;
padding:10px;
}
Here you are the screenshot how it is looking now:
How should I place "Content of the document" (#main) to be next to the nav?
EDIT: I have placed my code here: http://jsfiddle.net/47tjbnrt/
The problem is caused by your adding padding to the width. width is the width of its content and you set one to 80%, the other to 20%, and then add padding on top of that. Padding is the area around the content and, therefore, the width. That is why your second div drops down.
Either remove the padding or reduce the width of your elements.
body {
background-color: lightgray;
padding: 30px 100px 0 100px;
}
header {
text-align: center;
}
nav {
line-height:30px;
width:20%;
float:left;
padding:5px;
}
#main {
width: 70%;
float:left;
padding:10px;
}
I changed the width to 70%, since you have a lot of padding. (Also removed the position: relative from your #main, do you have anything with position: absolute inside the main section?)
Also changed the width to 70%, since you have a lot of padding.
Let's keep this simple and short, I've made 2 dummy examples of my problem.
I have a container section which is 600px wide, this section will container list of products.
each product is a 100x100 block, and there is a margin of 62px between each product.
The ul is set on display: inline-block so it won't go one under each other.
Now in the following pen example: http://codepen.io/anon/pen/yujLf
You can see what I want to do, can you see how the first row of squares, touch the border of the container & then the next element goes under?
(source: gyazo.com)
You can see how it's perfectly aligned for the width, as there's a perfect equal margin between each element.
Now this solution is a problem, because now the second row will have extra margin on the left side:
(source: gyazo.com)
I do have a solution for that, simply by changing margin-left to margin-right and disable margin-right for ul li:last-child.
But if I do that, I will not be able to align the last element with the border, like I did with the first example, take a look: http://codepen.io/anon/pen/wdhrJ
As you see, I had to change the margin to 40px instead of 62px to make it 4 elements per row.
Is it possible to implement what I want with using ul?
If your container is fixed at 600px, then the following solution will work:
ul li {
width: 100px;
height: 100px;
background-color: red;
margin-right: 62px;
display: inline-block;
}
ul li:nth-child(4n+4) {
margin-right: 0;
}
What I've done is change margin-left to margin-right in both of the above selectors. I've also changed your second selector from first-child to nth-child, to select the 4th element and every 4th element after that.
CodePen Example
Have you tried this hack instead? http://codepen.io/anon/pen/IgKtD
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
text-align:justify;
vertical-align:top;
font-size:0.001px;
}
ul::after {
content:'';
display:inline-block;
width:100%;
height:3px;
background:blue;
}
ul li {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
box-shadow: inset 0 0 0 1px purple;
margin:0 20px;
}
ul li:nth-child(4n), ul li:last-child {
margin-right:0;
}
ul li:nth-child(4n-3) {
margin-left:0;
}
I have a simple div with width:100%and position:fixed to bottom.
This is my CSS:
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
bottom: 0;
margin:0 5px;
}
When I apply margin left and right using the shorthand property, the footer is being pushed to the right which is very strange.
I created a fiddle for you to play with: Fiddle Demo
You could use calc():
jsFiddle example
#footer {
width: calc(100% - 12px);
border: 1px solid #000000;
position:fixed;
margin:0 5px;
}
body {
margin:0;
padding:0;
}
The 12px in the calc comes from the 5px of each margin, plus the 1px for the left and right border.
Or option #2 (no width or calc() needed). Simply set the left and right to 5px and the footer will stretch the full width, minus those amounts:
#footer {
border: 1px solid #000000;
position:fixed;
left:5px;
right:5px;
}
body {
margin:0;
padding:0;
}
jsFiddle example
I would do two things:
Set box-sizing: border-box. This will ensure paddings dont affect the outer width of your element.
Set margin and padding to 0 for html and body elements as these have applied a margin by default in most browsers.
You can now set the element padding instead of trying a workaround with the margin values.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#footer {
width: 100%;
border: 1px solid #000000;
position:fixed;
padding:0 5px;
}
Can be tested in this JSFiddle
You could use bottom: 0; In my code below I also used padding rather than margin, padding will affect the 'margins' within the div where as margin refers to the outside.
#footer {
width: 100%;
border: 1px solid #000000;
position: fixed;
margin: 0px;
bottom: 0px;
padding: 0px 5px;
}
http://jsfiddle.net/3w6xE/3/
As an alternative to using calc(), (which I think is a good solution, despite the limited browser support), you could wrap the element:
<div class="footer_wrapper">
<div class="footer">test</div>
</div>
The parent, wrapper element is fixed with a width of 100%, and the child .footer element has the margin. As others have mentioned, use box-sizing:border-box in order to include the border in the element's width calculations. Support for box-sizing can be seen here.
Example Here
.footer_wrapper {
width: 100%;
position:fixed;
}
.footer_wrapper > .footer {
border:1px solid #000;
margin:0 5px;
box-sizing:border-box;
}
As an alternative to using a margin, you could also just add left:5px/right:5px.
If you want the reason behind why your example was behaving as it was, it's simply because a fixed element's position is relative to the viewport. The element therefore has a width of 100%, of the window thus explaining why the margin wasn't behaving as expected. Usage of calc() allows you to subtract the margin from the width.
I have this code:
<style>
.floatright
{
float: right;
margin-right:800px;
}
.menu {
padding: 0;
float: right;
width: auto;
position:relative;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display:inline;
padding:0;
margin: 0px;
}
.menu a:link,
.menu a:hover {
text-decoration:none;
padding:0 5px 5px 0;
margin-right: 8px;
}
</style>
<div class="floatright">
<ul class="menu">
<li>api</li>
<li>tools</li>
<li>blog</li>
</ul>
</div>
it is meant to float to the right of the page (not in the right corner - just to the left) and have gaps between each link.
The gaps work ok but when the screen is resized ti does not stay where it is supposed to
any ideas?
Charlie, because you have a 800px margin on the right of the div it will always have that margin regardless of the screen resolution.
If you're wanting the margin to become less based on screen resolution maybe look at using percentages or media queries.
wou need to center the parent div ...and then the menu will float right.
.floatright {
width:1000px;
height:50px;
margin:0 auto;
}
Where the width should be the width of the "orange box".
The menu already floats well in its parent div.
here is a jsfiddle example: http://jsfiddle.net/hvLkh/
Additional advice: 1) do not put divs outside the body tags, 2) add a hight attribute to the div to push the box down, and 3) add the font formatting straight into your css and avoid font tags ... like this:
.floatright {
width:1000px;
height:50px;
margin:0 auto;
font-family:"Trebuchet MS",Arial,Verdana,Tahoma;
}
And here is an updated fiddle: http://jsfiddle.net/n6mnP/1/
I created a navigation bar for my school project (I'm doing basic design, then we're adding the mysql database), and the bar works great, but it does not extend to the bottom of the page, it's just a little box right now.
Here's my style script
style type='text/css'>
#navigation {
display:block;
width:150px;
float:left;
margin-left:7px;
margin-right6px;
margin:5px;
border-style:solid;
}
#navhead {
text-align:center;
margin-left:7px;
margin-right:6px;
}
#links {
display:block;
width:60px;
}
</style>
Am I missing any attributes that say 'extend to bottom of frame?'
Thanks!
You need to use the height property. You can set the height to 100% (the height of this parent, so the <body>) but it will looks weird, because it will render the height + the padding + border + margin.
You need to use the border-box property with the height. It allows you to define if the padding and/or border (or none, by default) are count in the height and width properties. You also needs to kill the margin-top and margin-bottom.
After those changes, here what your CSS should look like :
#navigation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 150px;
height: 100%;
float: left;
margin-left: 7px;
margin-right: 5px;
border-style: solid;
}