everyone!
I got a problem with changing height of block when form height inside it becomes more(maybe it's only looks like so,don't know).
My sample on http://jsfiddle.net/vXNCD
Maybe I have this problem, because I gave position for form using
position: relative;
left: 13em;
top: 9em;
If it's so, how to make positioning correctly?
How make my #content covering all inputs ??
If you want to position your form a little offside, use padding in the parent element instead of position relative.
Here is the fiddle: http://jsfiddle.net/vXNCD/13/
What i did was remove position relative and add padding to #content div plus added box-sizing to make sure padding is counted as a part of width.
#content
{
width: 70%;
min-height: 30em;
background-color: rgba(62,96,111,0.9);
position: relative;
margin: 5em auto;
-webkit-border-radius: 0.42em;
-moz-border-radius: 0.42em;
-o-border-radius: 0.42em;
-ms-border-radius: 0.42em;
border-radius: 0.42em;
padding: 9em 13em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You should add a padding-bottom: 9em to #content > form. The value should be equal to or greater than top: 9em. In this way your form will stay inside the block. See this jsfiddle.
#content > form
{
position: relative;
left: 13em;
top: 9em;
padding-bottom: 9em;
}
Or better, you should use padding-top: 9em instead of top: 9em so you avoid this problem altogether. See this jsfiddle.
#content > form
{
position: relative;
left: 13em;
padding-top: 9em;
}
Your element is positioned relative. Use padding to position the contents instead of top and left.
#content > form {
position: relative;
padding: 40px 60px;
}
If all you want is to get the form within the box, I don't see why you should use relative positioning at all. Just removing it, you will be fine. Then you can center the content (if you wish) with margin : 0 auto; where it's needed.
http://jsfiddle.net/9jNZG/
#content
{
width: 70%;
min-height: 30em;
background-color: rgba(62,96,111,0.9);
margin: 5em auto;
padding:1em;
}
Just added some padding to make it look a little better with some breathing room :), and of course. Removed the relative positioning.
Just remove the following styles,
content > form
{
position: relative;
left: 13em;
top: 9em;
}
What you are doing here is adjusting the form with respect(RELATIVE) to the #content,Then changing the left and top positions.
By default,the position of an element is static..Thus the #content will cover all the form data.
Related
Can anyone explain why this button is not absolute-positioned to the right? I would expect it to be 3px from every edge.
HTML:
<div class="wrapper">
<button>Hello world</button>
</div>
CSS:
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
position: relative;
}
.wrapper button {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
}
Also, how is it that the button is able to align its contents vertically?
button, like most form elements, is a replaced element. Replaced elements behave differently from regular non-replaced elements (such as div) when absolutely positioned. The following two points from section 10.3.8 of CSS2.1 apply:
The used value of 'width' is determined as for inline replaced elements. If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below.
...
If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
The width of the button is determined not based on the specified offsets, unlike for non-replaced elements, but by the contents of the button itself. Since the used value of width is not auto, and the specified values of left and right are not auto, the values are over-constrained and the browser is forced to ignore right in order to respect width.
If you want the button to fill the entire height and width of the wrapper, don't use absolute positioning. Instead, specify 100% height and width on the button, and use padding on the wrapper to offset the button:
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
padding: 3px;
box-sizing: border-box;
}
.wrapper button {
height: 100%;
width: 100%;
}
<div class="wrapper">
<button>Hello world</button>
</div>
(If you can't use box-sizing, subtract the padding from the dimensions of the wrapper.)
The vertical alignment of the text probably has to do with how the browser draws button controls by default, which is usually based on system button controls.
You can use calc to get the exact width minus the padding you get from the positioning:
width: calc(100% - 6px);
JSFiddle
You might want to use inherit/100% value for width and height css properties.
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
padding: 3px;
}
.wrapper button {
width: inherit;
height: inherit;
}
Fiddle
NOTE: If you want to have the dimensions exactly 300 then subtract padding. (which will be 294px)
please use below css ..
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
position: relative;
padding: 3px
}
.wrapper button {
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:100%;
}
I think you are trying to put button in center.You declared top and left 3px so no matter what you define bottom and right button is going to to be 3px from top and left ignoring other.To put button in center use marginFirst define width of button and set marginLike thia
.
wrapper button{
Width:100px;
margin:0px auto;
}
not margin doesn't work with absolute position.
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
position: relative;
}
.wrapper button {
position: absolute;
top: 3px;
bottom: 3px;width:97.5%;
right: 3px;
}
Try this.
You need to set the width of the button, to make it fill the space.
The easiest way to do this is to set it to the correct size.
.wrapper {
height: 300px;
width: 300px;
background-color: #f33;
position: relative;
}
.wrapper button {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
height: 294px;
width: 294px;
}
My Problem is that I have fixed div at the bottom on my page with disclaimer and so on.
This DIV is overlapping the vertical scrollbar so I have deleted the overflow from the parent element.
Now that is working but I need the overflow for the parent element to see the further content when scrolling the page.
Can someone help me?
Look at this:
jsfiddle
#scrollable
{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
margin:0;
padding:0;
}
div.bottom
{
background-color: #fa0000;
position: fixed;
bottom: 0%;
/*height: 10%;*/
height: 80px;
width: 100%;
margin:0;
padding:0;
z-index:9999;
}
div.test
{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
position: absolute;
top : 10px;
background: #000000;
height: 1500px;
width: 100%;
margin-bottom: 80px;
margin:0;
padding:0;
}
You have to set the height of your container. The height should be such that it will just be enough for the disclaimer div to be visible. Then give the overflow:auto to the container. This will take care of scrolling and overlapping.
THe height can be calculated depending on the DOM structure of your page. But Please give proper height.
The concept of overflow is really simple, when your content "oveflows" a scrollbar appears if u have given overflow attribute. In your case, the overflow is occuring , but since the available height is more, it is going beyond your disclaimer div. Just make it less so that your disclaimer div and container div do not overlap. And you should be fine
If you had posted the code and page structure, it would have been simpler to explain.
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you
I would like to make the blue element sit halfway up the green circle and behind it. How can I do that? Also, why is there a random marginal-space between the green circle and the blue element?
#profile-circle {
margin-right: auto; margin-left: auto;
height: 164px; width: 164px;
border-radius: 84px 84px 84px 84px;
}
#main-container {
margin-right: auto; margin-left: auto;
height: 400px; width: 450px;
}
http://jsfiddle.net/LqJ79/
position: relative will help you here. It allows you to use z-index to put the circle over the box, and also you can use top which will move the box relative to its current position. The problem with position: absolute is that it takes the element out of the flow, which is not what you need here I think.
#profile-circle {
position: relative;
z-index: 100;
}
#main-container {
position: relative;
z-index: 50;
top: -100px;
}
See the demo
Use attributes "position: absolute;" in the second box, I updated js fiddle CSS with the following:
#main-container {
margin-right: auto;
margin-left: auto;
height: 400px;
width: 450px;
background-color: blue;
position: absolute;
top: 80px;
}
The easiest way to move the blue element up is to set a negative top margin:
margin-top: -82px;
However, with your current markup, the blue element will sit on top.
You can either put the green element below the blue one in your HTML, then use CSS to slide it up, or you can:
use position: relative; on both elements
set a z-index on the blue and green elements to determine which appears on top (give the green element a higher number so it appears on top)
set top: -82px; on the blue element to slide it up under the green one
The space between them is due to your margins:
margin-top: 15px;
margin-bottom: 5px;
you can make the position: fixed;
top:10px;
left: 10px;
z-index: 1;
and what not in the css to move them around. like this:
http://jsfiddle.net/LqJ79/
The 'magical' space between the two is due to the margin in the div user-info. I changed the CSS to the following:
#user-info {
height: auto;
width: 380px;
margin-right: auto;
margin-left: auto;
}
This will removed the space.