I have a problem with margin on my site: link , when i want increase space between left_sidebar and right_content with margin then there is no change.
CSS{
.left_sidebar{
float: left;
padding: 30px 0;
width: 28.2%;
margin-right: 20px !important;
}
.content_right {
float: right;
padding: 30px 0;
width: 69%;
}
You are floating left and right while using percentage widths. This doesn't leave any room for margin. There are different ways to fix this, but I would suggest decreasing the percentage of both divs to allow more room between them.
Related
I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;
I have a border which I am wrapping around the page using <div>. The parent element is the actual page. I can't seem to figure out why the margin-bottom is not working.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin-top: 24px;
margin-bottom: -24px;
margin-left: 24px;
}
<div class="page_border"></div>
I think the fact you have the bottom margin set to a negative value might be the issue if what you want to do is put a margin between the div and the bottom of the page. If you remove the negative sign that should work. See below.
.page_border {
border: 20px solid;
height: 960px;
width: 720px;
margin: 24px 0 24px 24px;
}
<div class="page_border"></div>
Not sure on what you are asking completly.
Could you not put a height value onto the body tag, and then adjusting the height: value; from div, by doing so though the body will have a fixed height and you may need to set overflow: auto; on the div.
Should be simple enough. I have a div with a width of 1100px which contains divs of width 300px. I need to space them out equally and clear to the next line below once no more can fit within the 1100px width. Best way to do this? I've never needed to do it.
I think this is what you're looking for. You can use nth-of-type to add margin to the middle boxes
.background{
background: black;
width: 1100px;
margin: auto
overflow: hidden;
}
.box{
width: 300px;
height: 300px;
float: left;
margin: 0 0 20px
}
.box:nth-of-type(3n+2){
margin: 0 100px 20px;
}
FIDDLE
Everything looks fine in both the HTML & CSS, so the div in question should be centered on the page. I have included some code snippets below, but the real code can be found here: http://jsfiddle.net/stbx08mk/
test-div at the bottom should be centered in the 1024 area, but it isn't. Why not?
#page-wrapper {
background-color: white;
margin: 0 auto;
overflow: auto;
padding: 0;
width: 1024px;
}
#test-div {
background-color: orange;
float: left;
height: 100px;
margin: 0 auto;
width: 800px;
}
Based on your fiddle, you need to adjust your #test-div style to float: none; and clear: both;
#test-div {
background-color: orange;
clear: both;
float: none;
height: 100px;
margin: 0 auto;
width: 800px;
}
Your JSFiddle Updated
floating divs to center "works" with the combination of display:inline-block and text-align:center.
First, remove the float attribute on the inner divs. Then, Text-align:center on the main outer div. And for the inner divs, display:inline-block.
Just tested it - display:inline-block on the inner divs works. Might also be wise to give them explicit widths too.
For your problem
Check this fiddle
Remove float:left; and add clear:both; to #test-div.
It just worked for me..
This will solve your problem
Try it..
The reason your #test-div is not centered, is because you're using the property float: left; on it in your CSS. The auto margins don't work on floated elements.
Try removing the float: left; property to get your desired result.
Float: left is whats making it ignore your margin: 0 auto;
Make sure your <html> and <body> tags take up the entire width of the browser and the margin and padding are both 0. This caused my content to be almost centered, but a little bit offset from center. Use this CSS:
html, body {
width: 100%;
margin: 0;
padding: 0;
}
In addition, in your #test-div use:
#test-div{
margin: 0 auto;
}
I am trying to get three columns on one line. It worked until I added some padding to the divs. I am using percentages for making it kinda responsive. The below is the CSS:
.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: 1%;
padding: 1%;
position: inherit;
}
.contentLine .last {
margin-right: 0;
}
Here is my fiddle
Did I make a mistake with the percentages?
Demo HERE
Use margin-right:.5%;
.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: .5%;
padding: 1%;
position: inherit;
}
and change last column div like this. because you are using class attribute two times and you can use class attribute only one time in a single tag.
Use
<div class="column last">
not<div class="column" class="last"> it is worng.
Reduce the width of your columns. With all the percentages and extra space added in, it all adds to over 100% which is why the third column will always be on the next line. Instead of 31%, try 30%.
Reduce the width of .column to 30%.
It currently goes to next line because, there are 3 boxes with width 31% (total 93%). They have padding (right and left) of 1% (so that totals upto 6%) and you have margin-right of 1% (which totals to 3%) and all together exceeds 100%.
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
}