I have a div which works to divide content up on my page. I need it to have horizontal padding and vertical margin to space out my content.
The problem is that the CMS puts this div on the page even when it doesn't have content. When this happens I need the div to behave as if it wasn't on the page and not add any spacing between the other divs which do have content.
When I tested this on my site it seemed like horizontal padding and vertical margin achieved this. However the demo below behaves differently:
div {
padding-left: 50px;
padding-right: 50px;
margin-top: 100px;
margin-bottom: 300px;
}
https://jsfiddle.net/m3xfspj8/
Related
I can't seem to get these social buttons to fully right align. I've set the margins of the page to "0" and have set the alignment to right="0" - any ideas what else to do?
The url is: http://www.radiobootcamp.org/TEST.html
Thanks!
add
style="text-align:right"
to that twitter div
This will allow to align the social media buttons to the right.
The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block.
.twitter {
border: 0 none;
height: 150px;
position: fixed;
right: 5px;
top: 400px;
width: auto;
}
The thing is that they have float defined as left. I would suggest to add float:right !important; and if not working put each button in a different div with height:auto and width:auto and put float:right on that div container.
I want to upgrade my website's template.
I want the content to be in a fixed width centered div. This is not a problem and there are many examples on the web.
Since I have already content with text & tables, I want to make sure that the div will not cut the content of some pages.
I don't want to use Javascript to adjust the width.
Is there a way to do this with a div or should I use table instead?
Not getting your question right, centered as in vertically too? If you want it vertically centered than you need to use position: absolute; and if you want it horizontally centered you just need to use margin: auto;, as simple as that...
/* Totally center fixed width content */
.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: /* Half of the total height of the container div */
margin-left: /* Half of the total width of the container div */
}
If you need the content horizontally centered, you need to use
.horizontal {
margin: auto;
}
Content won't be cropped unless and until you use a fixed width div and overflow: hidden; at the same time
Why is this the default padding for twitter bootstrap on the body?
body {
padding-top: 60px;
padding-left: 20px;
}
I was under the impression that "reset" css-ish files usually removed all padding/margins.
The padding on the body overrides the the .css files.
As odupont mentioned, "It's useful when you have a navbar navbar-fixed-top at the top of your page"
The padding will set a 20px vertical clearance between the top-fixed positioned nav bar and your document's body. As show in the above code, padding-top: 60px;
40px vertical padding, to clear out the height of the top-fixed nav-bar, that has a 40px height. And then, 20px vertical clearance between the nav-bar and body. So, 60px for the padding-top was declared.
That css thing was inserted in the body for specificity purpose, it overrides whatever padding styling you have in the .css file.
Try to comment the above code, and see the result.
It's useful when you have a navbar navbar-fixed-top at the top of your page, like the example on Bootstrap Doc.
If you have a div and wanted to have the background of the div stretch across the page, consider using negative margins equivalent to the padding on the body, and then adding the padding to the div:
margin-left: -20px;
padding-left: 20px;
margin-right: -20px;
padding-right: 20px;
I've tried so many things on this page
https://boycottplus.org/campaign/reclaim-our-time-say-no-time-wasting-websites
On the right column, I can't get a padding or margin of 10px between it and the left column without a scroll bar appearing. I've tried using a wrapper div but everything I do seems to bring the scroll bar :-/
The style I am focusing on
.subsection .inner {
padding-left: 10px;
}
in firefox
Add overflow:hidden to your body style.
Are you setting width and padding on the same element?
For example, if you have:
.subsection .inner {
width: 100%;
padding-left: 10px;
}
then the total width of the inner div will be 100% + 10px, which will result in a scroll bar.
If you want to remove scrollbar in horizontal direction, then use overflow-x: hidden; in that particular HTML element, keeping your vertical scrollbar intact.
I am trying to make a pinned down style menu like this:
http://www.w3.org/Style/Examples/007/menus
Except I want the horizontal positioning to be more flexible.
I know that I can do that having a percentage value in "right:" instead of a constant, but i want the menu to fit snugly in a centered blog layout as the sidebar, which means when the page is resized, the sidebar shouldn't cover the content. Similarly, the box shouldn't spread away from the content if i make the page bigger.
Any way to do this with only css? If not, perhaps an easy javascript solution?
Here's one way to do this with some generic code:
HTML:
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
CSS:
Set an explicit width on the container and the content, leaving room for the sidebar in the container. Horizontally center the container.
#container {
width: 200px;
margin: 0 auto;
}
#content {
width: 150px;
}
Now we're going to position: fix the sidebar relative to the center of the page instead of relative to the right edge of the page. Make it the width of the left over space in the container and give it a margin-left (or padding-left, depending on other things you may want to do with it) equal to the width of the content. Then set right: 50% (for a right sidebar, switch these values to left for left sidebar) and margin-right to negative one half the container width:
#sidebar {
width: 50px;
margin-left: 150px;
position: fixed;
right: 50%;
margin-right: -100px;
/* other styles such as "top", etc. */
}
Resize the window and it stays snug to the content and vertically positioned wherever you place it.
Here's a fiddle (with some extra styles for visual clarity): http://jsfiddle.net/blineberry/UkEkS/