In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
Related
I've looked around and can't seem to find a solution to the problem.
How come the bottom two divs appear cut in perfect halves to the left and right on a windows 8, but on my android s5 it is not centered?
http://danny4help.com/
#grad4_left img {
height: 100%;
width: 100%;
border-radius: 10px 0px 0px 10px;
}
#grad4_right {
z-index: inherit;
height: 700px;
background-color: #F1EEF7;
top: 705px;
width: 50%;
left: 50%;
text-align: center;
font-size: 80px;
line-height: 40px;
color: #4A4A4A;
}
.grad#grad4_left {
z-index: inherit;
height: 700px;
background-color: black;
top: 705px;
right: 50%;
color: #4A4A4A;
width: 50%;
}
You have several divs that have fixed widths in pixels, both above and below the incorrectly centered divs. These divs are wider than the body, so the viewport automatically expands to show the full width of those elements, making it seem as though your divs are incorrectly centered. Simply replace the pixel units of the width of the too wide divs with either percents of viewport units and you'll be good to go (e.g., .grad has a width of 1280px. Change that to 100vw). For a quick and dirty fix, add this block to the top:
* {
max-width: 100vw;
}
EDIT: Some other answers are advising you not to use absolute positioning in responsive layouts. Using position: absolute is actually OK as long as you are using relative units (e.g., %, em, vw) and not fixed units (e.g., px, in, pt).
Actually it's already centered in mobile. The reason why you see it's not aligned center is because you have set your grid div to width: 1280px while the body element is only 100%. Also as #Michael_B mentioned, besides having no height, it can't get the width of your elements inside your body element. I would advise you to not build a layout solely with position: absolute elements, because it will be better for responsive layouts, and I assume that you are targeting mobile.
Anyway, below are the few fixes I can suggest to you.
html, body add width 100%
.grad remove width
.grad1 remove height
.grad#grad1 img add max-width to 100%, add display: block
#shade remove position: absolute, remove width
#grad1.grad #scrolling_text change to width 100%
#block_text remove width
#nested_skills change to font-size: 16px so that your grad3 div can take the width of your text
.grad#grad4_right add overflow-y: scroll. If you do not want to have the scrollbar then set height: auto but it will be a different height than the image on the left. Also it will not show the left margin on the left div as well as the right margin on the right div because you are using absolute.
.grad#grad5: you have to adjust the font size for this yourself
.grad#grad6 add left: 0; right: 0; margin: 0 auto
.grad#grad7 add display: block
This should be good.
I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has border-right which also needs to show over the full screen height.
My CSS looks like(sample one) better check my demo
demo page
html,body {
height: 100%;
background-color: #fefefe;
}
.cover {
height: 100%;
}
.left_side {
float: left;
height: 100%;
border-left: 1px solid #ccc;
width: 31%;
}
and html is
<body>
<div class="cover">
<div class="left_side">
</div>
</div>
</body>
and the bgcolor and childs border seems up-to some limited distance only like
what is that problem guys i need that background and border as 100% height.
Remove height:100% from your body and html style.
Instead of having a border set to the left container, try setting the border on the content container instead.
your css would be something like:
.large-9 .columns .right_side{border-left:1px solid #333;}
the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.
css for that would be something like:
.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}
Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/
and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/
you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG
You could use absolute position and setting top and bottom:
body {
position: absolute;
top: 0;
bottom: 0;
}
I cannot get positioning, max-width, and 'right: 0px' to work together in harmony! I'm creating a div that is fixed on my site in the upper right corner. The content of the page has a max-width of 1000px, however the label only obeys my rule of 'right: 0px' and sticks to the right, disobeying once max-width has been reached. It should also be noted that by default, the div is in the upper left and obeys the max-width (if I type 'left: 0px;' though, it does not obey the rule and it sticks to the left).
CSS:
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
Here are some alternatives that I've already tried:
width: 100% (with text-align: right) <--- not quite right, and I don't like the 100% width as opposed to 150px
adding code to position the div "manually" in the html (not CSS)
I've discovered that float and text-align don't affect to fixed positioning
Help is greatly appreciated! Thank you.
If I understand correctly, this is what you're after.
You need to add a container with an absolute position to get the content over to the right and then use a fixed position container to keep it top right where you need it.
Alternative if you don't want to add additional absolute container
#div {
width: 150px;
position: fixed;
right: calc(50% - 500px); /* will move the div as far as 50% of viewport
then move it back to 500px (that is half of max-width) */
}
/* if needed, you can add media query */
#media (max-width: 1000px) {
right: 0;
}
I got it working with no problem in a jsfiddle. You may want to look around at the CSS that is affecting the area. You may have an issue if #content is not a block level element (no width will be applied and such. More code from you would be greatly helpful so we know exactly what is going on and can help you out more.
I think you need this one:
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
position:fixed is not relative to any container. It is relative to the html element of the DOM. That is the reason you're seeing it at extreme right whatever you do to the #content.
I have a <div id="wrapper"></div> with
#wrapper {
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
When I resize the viewport so that horizontal scrollbars appear, the right margin disappears; I can only scroll as far right at the element's content, but I want the margin to be present on all sides. It also happens to the left margin if right: 0; is applied, and to the bottom margin if the viewport is made shorter. Giving wrapper a position: static; (default) makes no difference.
Why is this happening? It doesn't follow normal margin collapse rules. How can I get my margin back? I've tried giving the body padding/margin.. nada.
jsFiddle
Background Info
The default width of the body element is the html width which is also the window width (or iframe width in such a case). The default behavior of a block level element is that the scroll only accounts for the actual element (hence, it doesn't care about the right margin if there is nothing more to display on the right). This causes your right margin issue. (By the way, according to this article, the scroll bars are actually appearing on the html element, not the body.)
For Position: Absolute
By having #wrapper with position: absolute, the body element ends up with zero height. This causes your bottom margin issue in this case.
A solution is to account for the margins like so (see fiddle):
body {
min-height: 320px;
min-width: 420px;
}
This assigns a minimum dimension to the body equal to the width + margins and height + margins of the absolute element.
Now, I'm not sure what you expect to happen if you have right: 0 set, as forcing a left margin to "remain" just ends up causing, in my opinion, a premature scroll bar to activate. See this fiddle.
Regarding Position: Static
The default block level behavior can be changed by forcing a shrink-wrap like behavior on the body element using (see fiddle):
body { display: inline-block; }
Note: that body { float: left; } did not give me the same shrink-wrap behavior (see fiddle).
The inline-block element will account for the margin of its inner elements to determine its own width, which then allows the right margin to work.
The reason the display: inline-block; solution does not work on the #wrapper being position: absolute is because it makes the body have a zero width and height, since the absolute positioning takes that element out of flow and there is nothing left inside body to give it dimension.
The above was currently only tested on IE9.
I'm afraid there's only one simple and quick solution, and that is to create a new div inside the wrapper div.
http://jsfiddle.net/QHKmN/2/
CSS
#wrapper {
background: black;
height: 300px;
margin: 10px;
position: absolute;
top: 0;
left: 0;
width: 400px;
}
#inwrapper {
background: green;
height: 290px;
margin: 5px auto;
position: relative;
width: 390px;
}
HTML:
<div id="wrapper">
<div id="inwrapper">
</div>
</div>
And there's your margin.
See the box stuck the bottom right. Right now it as a fixed height of 300px. Instead I would like to be just as high as necessary. Meaning I need the height to adjust automatically to the content. When I remove the height property it assumes full height.
Additionally, I would like to be able to "refresh" the height whenever I update the content via javascript (jQuery).
Your seeing a height of 100% because your style for html, body, div, iframe specifies height of 100%. To override this, just set your height to "auto". Like this:
div.sidebar {
border-left: thin solid #66CCFF;
border-right: thin solid #66CCFF;
bottom: 0;
display: inline-block;
height: auto; /* <-- New Value */
/*height: 300px; <-- Old Value */
overflow: hidden;
position: absolute;
right: 40px;
width: 200px;
}
This will size the box so that it is only the same size as the content. You might also want to consider using the max-height property to set an upper limit though. Say something like max-height:640px;.
Change this properties:
div.sidebar {
position: fixed;
height: auto;
}
I think you won't need jquery to change height, just change content.
Change height: 300px; to height: auto;.