How to set a div in the center of the screen/parent div, and make it fixed, which will ignore the width changes after it has been placed in the center? I have a div which contain a table, it looks like this:
I am not sure whether the outer div is necessary or not. I want my table to be placed in center, and fixed, which it will ignore its width changes. Result below is what I get:
As you can see, the table moves left when its size changes to remain the table in center, I want to prevent this, any idea?
This is what I have so far:
.main
{
position: relative;
width: 600px;
left: calc(50% - 300px);
border: 1px solid #000;
}
.table
{
margin: 0 auto;
}
<div class="main">
<table class="table">
<tr><td>Username: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
<tr><td>Password: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
</table>
</div>
Try using this style inside the div, it works for me and you may use help text instead of them inside a table.
<div style="text-align:center">
<input/><br/><input/><br/><button/>
</div>
Change you position to fixed
position:fixed;
and re-align other divs that might have been rearranged with top bottom left right
Why the use of a table for lay-out? Tables should be used for data output or HTML mails (correct me if I'm wrong but that's what I know).
Also you can use this code to vertical and horizontal center a specific element (keep in mind this is absolute but please feel free to play around with this):
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
Regarding the fact you want the error messages not to inflict the width of the form. I would advice using position absolute.
I've wrote an example for you see https://jsfiddle.net/bdwte97g/
Hope this helps.
Remove margin: 0 auto; from .table
and put this lines
`.table{
position: relative;
left: 45%;
}`
Related
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
I have seen the layout similar to the image below used on some sites before and I really like the design but don't exactly know how to implement the overlapping image (Profile Image). I am using bootstrap if that helps. Any ideas?
Thanks!
I can see three ways to do this generally.
position: absolute
You could give the image or the image's wrapper the attribute of position:absolute and giving its container (in your example the green box) position:relative. Then you would apply top: -100px or whatever and a left attribute of left: 100px or whatever. This gives the effect of the image being out of flow, aligned to the left and offset by 100px, and 100px offset from the top of the green container. The disadvantage of this approach would be that any body content in your green container could appear under the image.
position: relative
This is the same approach as the first one with the exception of how the image flows in the document. Instead of giving the image position:absolute, you would give it position:relative. Relative works differently from absolute. instead of being x and y coordinates of the parent container, it's just shifted by however much you give as a value for top and left. So in this case, you would apply top:-100px and just leave the other directional values as default. this would shift your element by that amount but also leave its original spot in the document flow. As such you end up with a gap below the image that other content will flow around.
negative margin
I honestly would prefer this method in your case. In this method, you can give the image a negative margin (e.g. margin-top:-100px). This will offset the image, collapse the area below the image, and it will still retain some of its flow in the document. This means that the content of the green container will flow around the image but only around the part that is still inside the container. It won't have a ghost area that content flows around like with relative positioning, but it also doesn't entirely take the image out of flow like absolute positioning. One thing to keep in mind, however, is that if you try to use overflow of any kind other than the initial value, it will cause undesirable effects to your image.
Demo
Here's a quick little demo demonstrating all three methods in a simple use case: http://jsfiddle.net/jmarikle/2w4wqfxs/1
The profile image can be set with position: absolute; top: 20px; left: 20px, or something like that to keep in from taking up space in the flow of the page.
make the html element that holds the header image "position:relative". Then put the header image and the profile image in that element. then make the profile image "position:absolute" and utilize "top: XXpx" depending on how far you want it from the top of the header element. Same for "left".
see fiddle here
<div class="header">
<img src="" alt="my image" class="floatdown">
this is my header, image could go here too
</div>
<div class="body">
this is my body content
</div>
.header {
position: relative;
width: 100%;
height: 150px;
border: 2px solid #000;
text-align: right;
}
.body {
position: relative;
width: 100%;
border: 2px solid #000;
height: 500px;
text-align: right;
}
img {
width: 90px;
height: 90px;
border: 2px solid #ddd;
}
.floatdown {
position: absolute;
top: 100px;
left: 20px;
}
You can use the float property on your profile image to take it out of the "flow" of the document, and play with the margins to place it properly.
CSS :
#profile-image{
width: 100px;
height: 100px;
float: left;
margin: 100px;
}
The marginis used to push it down and place it properly.
You can see an example of this in a Fiddle : http://jsfiddle.net/y706d77a/
I wouldn't recommand using position: absolute as you can get very strange results with different resolutions. I would only use that as a last resort.
This can be done many ways.
Anytime you see something like that on the web you can just use your inspector or firebug and see how they are doing it to get some ideas.
It wouldn't hurt to do some research on the web about CSS positioning.
http://www.w3schools.com/css/css_positioning.asp
Another great site.
http://css-tricks.com/
I just finished it.
Here is a codepen link:
http://codepen.io/anon/pen/zxYrxE
HTML:
<div class="main-container">
<div class="header">
<p>This is the header div</p>
</div>
<div class="profile">
<p>Profile</p>
</div>
<div class="content">
<p>Some dummy content div</p>
</div>
</div>
CSS is to big to be pasted here, so just open the link.
Put the profile image in the header, make the position: absolute; and the image position: relative;, and give it a negative bottom value that's half the height of the image, and set left to position it horizontally to taste.
HTML
<header>
<img class="profile">
</header>
<div>Content</div>
CSS
header, div{
min-height: 110px;
background: darkgray;
}
header{
position: relative;
background: gray;
}
img{
position: absolute;
bottom: -50px;
left: 100px;
}
http://jsfiddle.net/dekqn84c/
I have a very teasing issue. I have a div positioned absolutely to a point. But when i resize the window, it is moved to other place and not pointed towards where i set it before. How can i resolve this problem?
Here is my HTML -
<div style="position:relative;">
<div id="intro_message">
content
</div>
</div>
And the CSS for "intro_message" div -
#intro_message
{
position: absolute;
left: 322px;
top: 0;
padding: 20px;
width: 505px;
}
You can clearly see even i used relative position to its parent it still doesn't work for me.
EDIT -
Here from 'clearly see..." means if i would have not tell that i used relative positioning then everyone here would suggest me to use it. Therefore i told you all in advance.
EDIT 2 -
#David - After reading you solution, i understood it, actually i had to do one little but crucial change in my css. Now, i have following css for my main container div -
margin: auto;
position: relative;
width: 505px;
and for the inner div #intro_message i have changed some values to position it fine -
#intro_message
{
position: absolute;
left: -137px;
top: -4px;
padding: 20px;
width: 505px;
}
Now it is placed nicely pointing towards a link where i wanted it to be. On resize it still well, but when i go on resizing it is moved again -
on full window by default -
on resize - issue arises again -
So how to solve it?
I assume that you do not actually want the div to be fixed to a coordinate point, because that is what absolute positioning relative to the window does: resizing the page will move everything but the div. So you must want it to be fixed relative to the document.
Though you mentioned you tried relative positioning and it didn't work for you, that is actually the answer to this problem. You used it incorrectly.
Let me explain:
Divs naturally fill the entire width of their parent containers, so placing your absolutely positioned element inside a plain div essentially did nothing. In order for it to matter, you need to have the parent container be in the right spot. I would assume that your parent container would probably be centered inside your page and be a fixed width.
To do this, you can create your div and assign a width and automatic margins to center it:
div[c]{
width: 400px;
margin: auto;
}
As you can see in the following fiddle, both the div positioned relative to the window and the div positioned relative to the yellow div end up in the same place because the div has the full width of the page, but the div positioned relative to the blue div is moved where it should be and will stay there if you resize the page.
JSFiddle
Just use this css:
<style type="text/css">
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 4%;
width: 505px;
}
</style>
In CSS
.contains{
position:relative;
margin:0 auto;
width:900px;//or whatever you want
}
Html:
<div class="contains">
<div id="intro_message">
you are not clearly define your problem so i assume that you have problem in left postion.
I think when you are resize the window inner div will be plot left will be change according to you.
There is no problem regarding to position but your logic was not cleared.
if you want left inner div perfectly than use "percentage" rather than "pixel"
example:
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 20px;
width: 505px;
}
my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:
margin: auto;
For the x-axis. Any ideas?
I am talking about the following piece of code, empty page, align one image in the center.
<div id="main" style="display: block;">
<img style="margin: auto; display: block;"
src="http://www.example.com/img.jpg" />
</div>
Any help will be appreciated! :)
Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?
If you know the height of the element that you're trying to center, you can do this:
img {
display: block;
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px; /* 50% of your actual height */
}
I know only one way for that:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
This is for x and y axis - but width/height and margins have to be changed for every element. I hate it :-)
Additionally you get problems if the element is larger than the browser-window.
The best known method is to use absolute positioning. You set the top amount to 50% and then set a margin top of minus half of the element.
#main {
position: relative;
}
#main img {
position: absolute;
top: 50%;
margin-top: -(half your image height)px;
}
Here is a variation using vertical-align
http://jsfiddle.net/audetwebdesign/r46aS/
It has a down side in that you need to specify a value for line-height that will also define the height of the containing element that acts like the viewport (outlined in blue).
Note: You may be able to get around the window height issue by setting a height to the body or html element (100%) but you would need to try it out (see 3rd reference).
However, the good thing is that you don't have to do some math based on the dimensions of the image.
Here are some references related to vertical alignment:
http://css-tricks.com/what-is-vertical-align
http://blog.themeforest.net/tutorials/vertical-centering-with-css
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
and sometimes I have to remember the basics so I reread:
http://www.w3.org/TR/CSS21/visudet.html
This may not solve OP's problem, but may be useful in other contexts.
Using #menu img { vertical-align: middle; } in my style sheet works great for the latest versions of FireFox, Opera, Safari and Chrome, but not in IE9. I have to manually add style="vertical-align: middle" to every line of img code. For example:
<li><a href="../us-hosts.php">
<img src="../images/us-button.png" width="30" height="30"
alt="US Hosts" style="vertical-align: middle;"/> US Hosts</a>
</li>
Try this css:
margin-top:auto;
margin-bottom:auto;
display:block;
How can I align a DIV to the center of my page while its position is absolute? If possible without using javascript.
UPDATE: This is an old answer and the answer currently just below this gives a nicer solution which works even if your div has dynamic width. Another alternative, using margin: auto, can be found here, on a different, but related, question.
You can do this if you know the width of the DIV you want to centre.
CSS:
div
{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
}
You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.
position: absolute;
left: 50%;
transform: translateX(-50%);
Try this:
position: absolute;
width: 600px;
left: 50%
margin-left: -300px;
It's not possible to get HTML to automatically center anything that is absolutely positioned. Heck, HTML barely centers anything horizontally using CSS margins :-)
As the name implies absolute positioning is absolute where you get top and left fixed positions and any margins are applied relative to those positions. Auto is ignored with absolute positioning.
There are solutions using JavaScript and jQuery. Here's one that I wrote and use a lot:
jQuery .centerInClient() plugin
Hope this helps.
The meaning of position: absolute is exactly that you want to specify how far from the margins of the page your div should be placed. Since you do not know the width of the screen a priori, there is no way to center it.
I guess you just want to remove the div from the page flow, while keeping it centered. In this case it may be enough to add a container div, like
<div id="external">
<div id="internal">
</div>
</div>
and the CSS
#external {
position: absolute
}
#internal {
margin: 0 auto
}
I did not test the above layout, but I think it should work.
Here's a simple method using percentages:
div {
width: 80%;
position: absolute;
left: 10%;
}
Simply set your desired page width, and set the left margin as half of the remainder. In this case, the width is 80%, leaving 20%. Set left:to 10% and it will center the div on the page.
Using this method will allow the div to scale with different window sizes and screen resolutions as well.