I'm building a responsive website, and I have a div (named 'wrapper'), that I want to be in the center of the page at all times. I figured out how to center it horizontally, because I have a set width percentage. How would I center this vertically, if I DONT have a set height percentage?
.wrapper{
width: 50%;
height: auto;
margin-left: 25%;
padding: 3%;
}'
Try this tutorial
Centering div vertically and horizontally
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Try this jQuery plugin: TailorFit
and check out the demo.
One way you could use it would be like this:
$('#your-div').tailorfit();
Because your height is auto, that alone should do the trick.
Full disclosure - I'm the author of the plugin.
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
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.
For a division to place at the top or somewhere in the window we will give some relative margin for it. Is there any way to set the div at the bottom, like just above the footer? I will give explanation for my question:
I have a footer.
I have a div with height = 200px
I have another div with height = 400px
Now I want to place them in the window, such that they should look like, they are placed on the footer. How can I do that? Thank you
Your main content should be something like this:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40em; /* The -40em should be adjusted to your page, just play around with it */
}
Then goes your div heitgh200, div height400 and footer.
Here is a full working example:
http://jsfiddle.net/bn72w/1/
Here is a good tutorial on sticky footers: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
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
Here's what I'm trying to achieve:
I have a centered lay out with a sidebar on the right and a container wrapping the sidebar and the content.
The container however has a grungy look and the borders extend out. The content is 960px and the backdrop for the content is 1200px.
When I center it using the normal margin-right/left auto method it is centered but when someone with a browser smaller than 1200px visits the site it will be pushed off to the side.
Since the content in the page will be dynamic using an absolute div for this would not give me the result I'm looking for since it won't resize if there is more content inside of it.
Any solutions to this issue or am I going to have to get my hands dirty in javascript?
Link to an example: http://duedate.wordtgetest.be/TEMP_LAYOUT/
If that's an option:
Place the image you're currently using in the 1200px wrapper in the body-Tag and use
background-position:top center;
background-repeat:no-repeat;
and just remove the wrapper
body {
background-image:url(bigBackdrop.jpg);
background-repeat:repeat-y;
background-position:top center;
}
#content{
width: 960px
margin:0px auto;
background-image:url(bigBackdrop.jpg);
background-repeat:repeat-y;
background-position:top center;
}
That should to the trick.
Here's what you want to achieve:
http://www.fabsn.de/trash/stackoverflow/ThomasVanNuffel/index.htm
You don't always need to use a container div to center content with a background. You can just as easily apply margins to the body element and use a centered image. Something perhaps like this:
body {
margin: 0 auto;
width: 960px;
background-image: url(myimage.png);
background-repeat: repeat-y;
background-position: top;
}