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
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'm trying to make a navbar on my site that contains 5 links, but one of them is an image that is in the middle of the group. You can look at the JSFiddle of what I have here: http://jsfiddle.net/kylerm42/fgtLv/4/. I have my header set at 40px tall and am trying to get all the text links centered vertically within the div. The image is taller than the div and should be at the top, with the bottom hanging over.
I've tried vertical-align, line-height set to the height of the div, display: flex; align-items: center;, and anything else I could find online, but nothing works. I've also tried taking the image out of the rest of the header div, and then move it up 40px using position: relative, and that made it look correct visually, but the image's div was covering up the rest of the links, making them unclickable. Any idea how to get this working like it should? Thanks!
You've tried everything but not position: absolute; which is an appropriate way to go for.. In the snippet below, I used left: 50%; to first position the logo in the center but still it isn't centered, so I negated 1/2 the size of the image which is 75px in width so I used -38px
Demo
img#logo-nav {
max-width: 75px;
position: absolute;
left: 50%;
margin-left: -38px;
}
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/
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
when i use top:50% and left:50%
the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.
how can i resolve this ?
top and left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-top and margin-left to negative of one-half the height and width respectively, you'll get a centered box.
Example for a 300x200 box:
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
using translate will perfectly achieve that. simply apply this
div.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
source
Horizontal: Use a fixed width and
margin-left: auto;
margin-right: auto;
vertical: That's not that easy. You could use
display: table-cell
for the surrounding DIV and then give it a
vertical-align: middle
You can assign the box a fixed width and heigth, and then give it's margin-top and margin-left properties the negative half of the height and width.
EDIT: Example
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
One way is to assign a specific width to the box, then halve the remaining distance on each (left and right) side. This may be easier if you use percentages instead of pixel widths, e.g.,
<div style="margin-left:25%; margin-right:25%">...</div>
This leaves 50% width for the div box.
The very bizarre CSS "language" does not provide a simple way to center a element in the screen. Kludges must be made! This is the only solution I came to elements that are AUTO in both height and width. Tryed in FF19 (Win+Mac), CH25 (Win+Mac) and IE9.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
The above would centre your box centrally horizontally on the page with a 10px margin at the top and bottom (obviously that top/bottom margin can be altered to whatever you want). The 'text-align' on the body is required for IE, which as usual doesn't quite get the hang of it otherwise. You then need the left text-align on your box (unless you want text it in centred too) to counteract the text-align center on the body.
Trying to centre vertically is just about impossible using pure CSS though. Though there's a vertical-align in CSS, it doesn't work like the HTML vertical align in tables, so in CSS 2 there's no in-built vertical align like the HTML one. The problem is that you're dealing with an unknown height - even if you know the height of your box, the height of the page is unknown, or rather what are you trying to fix the box in the centre of? The page? The viewport? The visible screen area's going to be different for everyone, depending on their screen resolution, browser, and all of the browsers interpret the height differently.
There are various methods that claim to have solved the problem, but usually they don't reliably work in all browsers. I found this one the other day, which doesn't seem bad, but it doesn't work in Google Chrome (works in Firefox and Opera, but I didn't get chance to check out IE). There's an interesting discussion on the problem though on this thread on Webmaster World that summarises the various methods and pros and cons of them and is well worth a look.
Edit:
Dav's solution in the first response works okay as long as you (or the visitor to the site) don't increase the font size or line height. The container will be centred, but as soon as the font size is increased or more content added, it'll overflow the container.