I have a container div, conteining 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as "relative" if this may influence in my problem), the sidebar and the content render min-height: 100% as I need, the div containing them won't adapt to those 3 elements, acting like overflow: visible, while I don't want the content to overflow, I want the whole page to scroll and the div to adapt to the content size...
I tried to put my code here : http://jsfiddle.net/vhZV6/
I also cut out some of the graphical tweeks wich should not influence at all... here is a screen of my problem too:
I don't need old broweser integration on this matter (as IE 5/6).
Try adding overflow:auto; to your .container div.
I would try this. 'height: auto' is no longer set once any of the height elements are messed with.
min-height:100% !important;
height:auto !important;
It's a very simple problem: your inner divs are floating. The solution is very simple, just add to your css the following (this is the best solution whenever you have floating divs):
.container:before {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Related
I need the border of the title of this page to extend to the right side.
Perhaps there is a better way of doing this but I have used position:absolute and width:100% because the content div underneath needs to overlap.
This causes a horizontal scrollbar to appear. How can I get rid of that?
problem site
Because of your absolute, adding a 100% to the element will extend it the size of the viewport from where it starts.
I believe what you're wanting to do can be accomplished by keeping the absolute there, but also adding a relative positioning to your #content rule:
#content {
position: relative;
}
I thought if I make a box bigger than its container, the box will be restricted to the size of the container and there will be scroll bars around it.
http://jsfiddle.net/Amnesiac/ekT3h/
But the box actually comes out of the container as in the above example.
Thanks,
Chris.
No, you have to use css overflow to make the scrollbars appear. and you have to have content for them to be active, define the div as big as you actually want it to be displayed.
Updated your fiddle with an example http://jsfiddle.net/ekT3h/2/ made everything bigger for it to be easier to understand. A second fiddle http://jsfiddle.net/ekT3h/4/ marked with names for divs and updated your original css to position the child irrespective of any other content.
Use a "overflow:auto" property in your "container" class.
#container{
height:100px;
width: 100px;
border: 1px solid red;
overflow:auto;
}
Apply following css:
overflow:hidden
I'm trying to understand CSS positioning and I'm having trouble figuring out why a simple change that apparently should have no effect on the layout is causing a very disruptive change. I'm obviously missing something.
The initial objective was to place an inner div
vertically and horizontally within another div. That was fairly simple:
html, body {
margin:0;
padding:0;
height:100%;
}
div#container {
position:relative;
background:#4444ff;
margin: 0 auto; /* center, not in IE5 */
height:80%;
min-height:80%;
}
div#childDiv {
position:absolute;
background:#ff5555;
/* next we center it vertically and horizontally */
width:900px;
height:600px;
top:50%;
margin-top:-300px;
left:50%;
margin-left:-450px;
}
...and in the HTML page I used:
<body>
<div id=container>
<div id=childDiv>
test
</div>
</div>
</body>
which worked fine.
The curious part is what happens when I change the position attribute of the #childDiv div from absolute to relative.
My understanding is that first is should not affect the #container div at all since I'm changing only the position of the child element, and second that it should not change the layout since it is the only child element, its parent uses relative position and third I have not specified any offsets (tp, left, etc).
Instead, when I make this change, the parent #container is messed up (shows only up to the half of the viewport instead of 80% height as previously), and the position of #childDiv changes accordingly (also upwards, half outside the viewport).
My questions is: why does that happen? What concepts I'm not taking into account and why was the parent div affected by a change in the children's position setting?
If I remove #childDiv from within #container and place it inside body, then #container is no longer affected by that change so it seems something is propagating up in the DOM, which is odd to me. I've seen the same in firefox, opera, IE and chrome.
I have read W3C's spec on this topic but I haven't been able to figure this one out so far...
UPDATE: I created examples in JS fiddle to show the problem. You can see the original is here: jsfiddle.net/7Pr9y/1 and the affected one is here: jsfiddle.net/7Pr9y/3
Thank you!
Eduardo
When something is absolutely positioned, it is taken out of normal flow so its size, margins, etc. do not affect the things around it.
When something is relatively positioned, it is placed in normal flow (so its size, margins, etc. do affect the things around it) and layout is initially handled as if it were position: static, then it is moved according to the left, right, top and bottom properties.
It looks like your CSS got complex quickly because as soon as you positioned the child div absolutely, your container div would have disappeared, and putting percentage-based widths and heights on it wouldn't work.
The reason for this is that once you position something absolutely, it's taken out of the document flow, so your container div is now acting as if it contains nothing. If it contains nothing, unless you give it absolute dimensions (say, in pixels), you're saying "size yourself to a certain percentage of your container", which in this case, is the body element, which also acts as if it contains nothing.
When you start tossing heights and widths and min-heights on every element to compensate, especially when they are relative values, the results can become unpredictable very quickly. My advice would be to check out this reference on the box model by Chris Coyier: http://css-tricks.com/the-css-box-model/
It's super straightforward and uses some great diagrams to help visualize the different aspects of CSS positioning.
OK, I figured out why it becomes smaller when I change the size to relative.
Happens that because I have set the margins of the #childDiv to a negative value in order to center it, when I change it to relative that negative margin is taken into account when calculating the height of #container, resulting in a smaller #container.
I'm obviously a beginner in this, but seriously, it looks like CSS made it as complicated as possible to lay things out. No surprise most folks coming from table layouts start frustrated. :(
You don't need all these negative margin settings. Do the following:
html, body {
margin:0;
padding:0;
height:100%;
}
div#container {
background:#4444ff;
margin: 0 auto; /* center, not in IE5 */
text-align: center;
height:80%;
min-height:80%;
}
div#container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
div#childDiv {
display: inline-block;
text-align: left;
vertical-align: middle;
background:#ff5555;
width:500px;
height:200px;
}
I have used your code you provided and changed it around a little, to make the ghost spacer (the div#container:before) work.
I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.