I have a #left, absolute positioned div and 2 other divs on the right side. When I add margin to the #top div on the right side it affects the #left div too. I know there's a margin collapse stuff but is it affects the position:absolute too?
The code is really simple, nothing special, but I can't find the solution.
* {
padding:0;
margin:0;
}
#wrapper {
width:400px;
height:400px;
background:gray;
position:relative;
margin-left:100px;
}
#left {
background:pink;
width:100px;
height:100%;
left:-100px;
top:0;
position:absolute;
}
#right {
background:red;
}
#top {
background:green;
height:26px;
}
<div id="wrapper">
<div id="left">Left</div>
<div id="top">top</div>
<div id="right">Right</div>
</div>
Jsfiddle: http://jsfiddle.net/9thvLfe0/2/
Just add this to #top :
float:right;
width:100%;
JSFiddle
Just give the margin to top and give negative margin same to left.
Well, the problem is that your #wrapper is relative and the #left is absolute.
By inheritance, #top and #right are also relative. So, adding a negative margin to top in these conditions, it's adding it to #wrapper.
You could change #wrapper to position "fixed" but you would have to manually set the margin/padding to #hide-top because as it is, he will be hidden under #wrapper. Unless you set it like that :
#hide-top {
position: relative;
top: 400px;
}
Yet, my solution wasn't to change your CSS but your JQuery. You could just hide #top with the hide() function. See my JSFiddle for example ;).
Related
I'm trying to get several inline and inline-block components aligned vertically in a div. How come the span in this example insists on being pushed down? I've tried both vertical-align:middle; and vertical-align:top;, but nothing changes.
HTML:
<div>
<a></a><a></a>
<span>Some text</span>
</div>
CSS:
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div {
background:yellow;
vertical-align:middle;
}
span {
background:red;
}
RESULT:
FIDDLE
vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:
div > * {
vertical-align:middle; // Align children to middle of line
}
See: http://jsfiddle.net/dfmx123/TFPx8/1186/
NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.
Give vertical-align:top; in a & span. Like this:
a, span{
vertical-align:top;
}
Check this http://jsfiddle.net/TFPx8/10/
Simply floating both elements left achieves the same result.
div {
background:yellow;
vertical-align:middle;
margin:10px;
}
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
span {
background:red;
display:inline-block;
float:left;
}
For fine tuning the position of an inline-block item, use top and left:
position: relative;
top: 5px;
left: 5px;
Thanks CSS-Tricks!
I have a container with position:relative and three children
with position:absolute.
HTML
<div class="container">
<div>left</div>
<div>middle</div>
<div>right</div>
</div>
CSS
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
height:190px;
position:absolute;
}
.container > :nth-child(1){
background:red;
left:0;
}
.container > :nth-child(2){
//background:green;
margin:auto;
left:0;
right:0;
}
.container > :nth-child(3){
background:blue;
right:0;
}
http://jsfiddle.net/7xqwrtq2/
The children are positioned in this order: left, center and right.
How can I prevent the centered div from taking all remaining width?
I want it to be like the others where the width is adjusted to the
content. I don't want to set a fixed width neither.
Thanks in advance.
The kind of layout you are looking for cannot be achieved through absolute positioning. You've to use floats instead.
<div class="container">
<div>left</div>
<div>right</div>
<div>middle</div>
<div class="clear"></div>
</div>
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
height:190px;
}
.container > :nth-child(1){
background:red;
float: left;
}
.container > :nth-child(2){
//background:green;
float: right;
}
.container > :nth-child(3){
background:blue;
overflow: hidden;
}
.clear{
clear: both;
}
is this what you need?
http://jsfiddle.net/7xqwrtq2/1/
just add 33% width to them
.container > div{
height:190px;
position:absolute;
width:33%;
}
The reason the center column is stretching is because you specify: left: 0; and right: 0; pushing the margins of the column all the way out to where it will fit.
If you change your .container > div like so:
.container > div{
height:190px;
max-width: 33%;
box-sizing: border-box;
float: left;
}
and remove all left: and right: properties from the nth-child section of the CSS, I think you'll get closer to the results you are looking for. You can tweak it, but if you fail to define at least a max-width, you may risk your furthest right column dropping down a line. Using floating columns may not be the best approach, so be sure to clear:both; to reset the layout underneath.
The box-sizing border-box property is to make sure borders and padding are taken into account with the "width" property.
If you see here:
http://jsfiddle.net/7xqwrtq2/6/
I set the 1st and 3rd columns to max-width: 25%, and the center to 50%. (I took out the max-width: 33% in .container > div) However, the three columns never take it to the full 100% width because the content in the center column isn't enough to take it there.
Assuming you don't want "equal sizes", but rather "each div expands to fill only the necessary space, let all the divs use inline-block:
.container > div{
height:190px;
display: inline-block;
}
and change only the color with the :nth-child selectors.
Here's the JSFiddle that shows it.
http://jsfiddle.net/7xqwrtq2/5/
This is feeling simple question but i'm struggling to get the exact output. I need to align 3 div's inside a div in footer. I have tried lot in google, and worked before too. but in footer fixed position its not working exactly.
In that image, white color container div for footer, red- left, green -right, and center.
here is my CSS :
div .footer-container
{
height:53px;
width:100%;
position:fixed;
}
div .footer-container div .footer-left
{
background-color:#f00;
float:left;
width:33%;
height:31px;
}
div .footer-container div .footer-right
{
background-color:#0f0;
float:right;
width:33%;
height:31px;
}
div .footer-container div .footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}
here is HTML :
<div data-role = "footer" class="footer-container">
<div>
<div class="footer-left"></div>
<div class="footer-right"></div>
<div class="footer-center"></div>
</div>
</div>
What am doing wrong ? pls explain.
Get rid of all the floats. Add Display: inline-block to each of the three inner div's and adjust their width (to 32%) so they fit side by side.
div .footer-container {
height:53px;
width:100%;
position:fixed;
background:#ccc
}
div .footer-container div .footer-left {
background-color:#f00;
display: inline-block;
width:32%;
height:31px;
}
div .footer-container div .footer-right {
background-color:#0f0;
display: inline-block;
width:32%;
height:31px;
}
div .footer-container div .footer-center {
background-color:#f0f;
display: inline-block;
margin:0 auto;
height:31px;
width:32%;
}
Here is a FIDDLE
Make the middle div also float left. If that doesn't help, give the three child divs the property position:relative or position:static.
If that doesn't help, I suspect the problem lies in your html code.
This is because you center div don't have float,
Add this code to div .footer-container div .footer-center
float: left or float:right
use float:left
here's my code
<div style="width:100%; background-color:#FF6600">
<div style="width:33%; background-color:#FF1100; float:left">div1</div>
<div style="width:33%; background-color:#FF6655; float:left">div2</div>
<div style="width:33%; background-color:#FF3333; float:left">div3</div>
</div>
This should work, u lose 1% of width, but it works great for me.. the colors are just to see the 3 differnt divs.. u can put it into css..right?
Take the floats off the left and right and absolutely position them inside the container. This is assuming you want to accomplish what the image is showing. If you just want all 3 side by side your CSS works fine, just remove everything from the names but the class names (like I have it below)
http://jsfiddle.net/calder12/rnjtb/2
.footer-container
{
height:53px;
width:100%;
position:fixed;
}
.footer-left
{
background-color:#f00;
width:33%;
height:31px;
position:absolute;
bottom:0;
left:0;
}
.footer-right
{
background-color:#0f0;
width:33%;
height:31px;
position:absolute;
bottom:0;
right:0;
}
.footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.