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
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'm trying to build a 'table' with CSS but I'm having trouble getting some of the <DIV>s to fill the width of the layout if the content is too short.
It's difficult to explain in words so here's a fiddle:
https://jsfiddle.net/fatmonk/r2sodp7p/
Basically I don't want to see the pink bit in the example - I want the light blue box to expand to fill the width regardless of how much or how little content is in it.
Using display: table-row does the right thing with regards filling the line, but doesn't allow a border to be set.
(The fiddle isn't the whole page - there are more 'rows' to add and the whole 'table' will be repeated with link sand link code and other bits and pieces.)
It's quote possible that in the process of trying to get this working I've over-complicated the HTML as well - I've ended up adding container <DIV>s to try to force the width, so it may be that the HTML needs trimming down as well, but I've run out of ideas.
Remove width:auto from the inline style tag of all .menuContentInPopup and add width: 100% to it in your css, so
<div id="poster2" class="menuContentInPopup" style="width: auto;">
would become
<div id="poster2" class="menuContentInPopup">
And the css:
.menuContentInPopup{
display: table;
height:auto;
border: 1px solid rgba(99,99,99,.75);
border-top: none;
background-color:rgba(235,245,255,1);
padding:5px;
font-size: 10pt;
text-align: justify;
left: 0px;
right: 0px;
float: none;
width: 100%;
}
Here a fiddle showing the result: Fiddle.
I have also adjusted the box-sizing of all elements so that adding padding to the elements does not make it overflow its parent when width is 100%, this is achieved by
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
}
i might understood it wrong but here is how i would fix it.
[Fiddle][1]
I changed the width to 100% so it will fill your full div. Also removed the width: auto in the HTML.
[1]: https://jsfiddle.net/r2sodp7p/10/
FYI, another clean solution for your case here:
[http://jsfiddle.net/giaumn/f99ub6ro/]
You just need to care about 2 properties:
overflow: auto;
on .menu-content and
float: left;
on .poster-thumb
set your width:auto; to width:100%; and add width:100%; to menuContentInPopup class. remove width:auto from html inline styles.
fiddle
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;
}
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