I have a website here
http://trentmcminn.com/
For some reason the bottom of the page (the word Barney) is slightly cutoff by the fixed position footer. I am trying to add padding to the bottom of the body by this but it is not doing what I am trying. I am not sure what is going on. ANy help would be appreciated.
body {
padding-bottom: 100px;
height: 100%;
}
This happens because the absolutely positioned footer is overlapping with column layout.
You could either reduce the size of the columns and give them a negative bottom margin, or apply a padding to the columns like for example:
div#grid.col-4 div.column {
width: 25%;
padding-bottom: 10px;
}
html{ padding-bottom: 25px;}
This pads 25 pixels to the bottom of every page that uses the css that includes this tag. All pages should have tags enclosing the content. This is a better option then body because dynamic content and floating divs may not give the desired effect within the body. It also is handy in that it will give you a constant padding effect on all pages within the site.
Increase the margin of you div#grid.albums div.item from 30px to 50px, for example.
That will solve your problem.
Update following style rule:
div#grid.albums div.item {
margin-bottom: 30px;
margin-right: 30px;
padding-bottom: 1px;
}
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
I was trying to make a border glued to the sides of the screen how represents the picture below :
Picture of how i want
I have html code, but i don´t know if i´m doing in the best way. Can you guys help me?
DIV Rectangle HTMl
<div class="content">
This is a rectangle!
</div
DIV Rectangle CSS:
.content {
width:100%;
min-height: 150%;
border:1px solid #FFFF;
border-width: 100%;
background-color: #FFFF;
border-radius: 5px;
padding-bottom: 50%;
}
It is like this:
Picture of how it is
I want to remove this spacing between border and screen, is it possible to do that?
There are 2 solutions:
You can remove your parent block paddings (set it to 0)
You can wrap your .content with an additional block and set its margins to negative values (adjust numbers to fit your layout):
.wrapper { margin: 0 -5px; }
Divs are block-level elements and will take the full width that is available. So, the issue isn't actually the .content div. It's likely that the body has a margin still set on it. It will probably take care of it if you add:
body { margin: 0; }
This is just a guess that it's on the body, but really it's whatever parent or ancestor has margin or padding.
Same problem here
*,html {
margin:0;
padding:0;
}
Hope this helps, "*" will set the whole page to 0
I have a Wordpress page that uses roots startertheme that is based on Twitter Bootstrap. Everything in this theme is placed under a container for good looks but I have a div that I want to stretch 100% in width. I tried to add a class in which I specify width: 100% to circumvent the container but this did not work.
The container uses padding to center divs so I tried to add padding to 0px in this div but this also did not work.
Is there any way to circumvent the container for this div?
Thanks.
.div1{
position: relative;
top: -20px;
width: 100%;
background-color: #redColor;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
The proper way to do it would be to add the official Bootstrap no-gutters class.
If, for some reason, you cannot do then then, if you have control over the parent container styles you can remove the padding by literally deleting the line.
However, Bootstrap, by default, applies left and right padding to the container class. So if you're trying to override that, then you would create:
.container {
padding-left: 0;
padding-right: 0;
}
You may also have to add the !important tag.
If you cannot modify the HTML or the parent class, you could also set your child div to a fixed width that is the container width + the padding. So if the parent container is 980 pixels wide on desktop, and it has 15 pixels of left and right padding you would make the child container 1010 pixels width, left margin of negative 15. Then, to keep it responsive, add media queries for each size and change it accordingly.
Let me know if you need further clarification.
Here is my jsFiddle
I just have 3 divs. The 2nd div is floated to the right, and 3rd div appears just below the 2nd.
In the 3rd div, I am setting margin-top property, and this property does not have any effect on the layout.
Question: Can someone explain me understanding this behavior of float?
HTML
<div class="header">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>
CSS
.header {
width: 100%;
height: 80px;
background-color: #abcdef;
}
.sidebar {
margin-top: 15px;
float: right;
width: 200px;
height: 200px;
background-color: #abcdef;
display: block;
}
.footer {
clear: both;
margin-top: 20px;
width: 100%;
height: 60px;
background-color: #000000;
}
This is not unexpected at all. The .sidebar is removed from regular flow layout by its float property, as such it doesn't take up any space anymore. The .footer has a clear rule, so it is forced underneath any floats, but that automatically puts it 215px (margin+height of the sidebar) behind the last element that is part of the flow layout. As such its margin requirement of 20px is completely satisfied, and it appears at its logical current position. You can verify this by setting the top margin to 220px instead, it will appear 5px (220-215) below the sidebar.
You can easily achieve the effect you desire by putting margin-bottom:20px on the sidebar since it will then be required to keep that distance to the footer, pushing it down.
The issue is related to the clear rule.
W3C - An element that has had clearance applied to it never
collapses its top margin with its parent block's bottom margin.
Baiscally, if you want to use clear, the general rule is to add an element between the two floated divs to ensure you can correctly space them.
The top margin of the footer div is being collapsed, http://www.w3.org/TR/CSS21/box.html#collapsing-margins
If you add margin-bottom to the sidebar instead of the top of the footer it will work.
This is caused by the fact that floated elements aren't really there with respect to margin calculations. Your .footer is below whatever unfloated elements are above it, (with a margin of 20px). This issue is caused because margins with respect to floats are calculated relative to other floats, (not all other elements).
So to get the desired effect add a margin-bottom element to .sidebar, have a meaningless float added to the .footer, or add a
<div style="clear:both"></div>
between the .footer and .sidebar
How can I get my footer to be at the bottom of the container, after everything in main?
Here's the site: (It's fine on the homepage, but not on any of the others)
You have a few problems in your layout. You must first get rid of fixed heights or increase them as much as possible. Here is the rule that has the problem:
.panels h6 {
border-left: 1px dotted;
border-top: 1px solid;
font-family: verdana;
font-size: 11px;
height: 200px;
/* height 200 px is less than the required height which should be ~244px */
line-height: 1.3;
padding: 10px;
}
Next step is optional but recommended to prevent further problems: Inside all elements that contain multiple floated elements, add the following after all floated elements:
<div style="clear: both;"></div>
This will automatically set the height of that element.
Edit ----
Set .panels h6 { height: 200px; overflow-y: scroll; ... }. Then use JavaScript to get and set the height of all three columns equal to the height of tallest column. You can use Prototype functions such as Element.getHeight( ) and Element.setStyle( ) to do this.
Alternately, google "CSS Faux Columns" or "CSS Equal Height Columns".
is this solve your problem ?
.footer { clear:both !important;}
Remove height: 200px from .panels h6. IT should work for you.
What you are looking for is called a sticky footer. Google for it and you will find a bunch of different options. This is what I use link text
Use clearfix on your main div.
i'e used sticky footer to solve this problem before