I'm working on a new website and on one my pages I just cant get my #main div which is my page content's containing DIV to stretch long enough to cover the inner DIV's.
Please check it out and point out the parts of my CSS that need fixing. Many thanks to all.
#bikey; just right
#main {
background: none repeat scroll 0 0 #101010;
border-color: #333333;
border-style: solid;
border-width: 1px 1px 0;
margin: 15px auto 0;
overflow: hidden;
padding: 20px;
width: 920px;
}
The problem is in your #main div there are floated element's so you have to clear it first.
in the example above i write overflow:hidden & remove height:100%
Just remove height: 100% from layout.css at #main{...} (line 31 or so)
and add <br style="clear:both;" /> after <div id="content">...</div>
Related
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
On this website: http://www.bestcastleintown.co.uk/pg/
I am trying to get the coloured area of each <div class="awards_square_home"> to be a click-able link by nesting an <a> tag inside the <div> and adding padding. However I am already using padding on the <div> to position the <a>. With the padding in this rule:
.awards_square_home {
border: 10px solid rgb(195, 195, 195);
height: 90px;
margin-bottom: 20px;
padding: 90px 20px 20px;
}
Now when I add padding to the element it is not spreading the padding in the way that I desire, which is to to make the entire coloured area of the div click-able.
.awards_square_home a {
padding: 120px 0 20px;
}
I am trying to make the from the <a> fill this area of the <div>:
If I did not misunderstand you, you want your div all to be clickable rather than the text only.
<a href="#" class="text220 centertext capitalise_text home_feature_turqoise NG">
<div class="awards_square_home turqoise podium">
<span>Best</span>
<span>University</span>
<span>Campaign</span>
</div>
</a>
Fiddle here
I believe I have fixed the issue by amending the the CSS as follows:
.awards_square_home {
border: 10px solid #c3c3c3;
height: 200px;
margin-bottom: 20px;
}
.awards_square_home a {
display:block;
padding: 90px 0px 20px 0px;
}
Instead of setting background / padding / height on the parent <div>, you can just set the <a> element to behave like a div and set them there instead:
a {
display: block;
background-image: url("../images/icons/globe_v3.gif");
background-repeat: no-repeat;
background-position: 50% 15%;
padding: 95px 20px 20px 20px;
height: 90px;
}
Don't forget to remove these properties from where they currently exist.
and why you can't add <div> into <a> tag?
a {
display: block;
}
and add your content into <a> tag.
Or remove padding from div and set padding only for <a> tag.
if you want the a to fill the div,why do you use padding on the div,and margin on tha a, which the sole purpose is to prevent the a from filling the div?
delete the padding on the a,it should work
I have a div and I've tried to set the height to 100% so the content of it makes the div grow to fit.
I've tried the following and it won't work:
Adding 100%:
#latest{ height: 100%; background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}
Leaving having to height setting at all, so the div would just fit the content in:
#latest{ background: #e3e3e3 url(banner_grad.jpg) repeat-x; border: none; margin-top: 10px;}
Unless I set a specific height (e.g. height: 370px;) the div will not even show it's outline in design view in Dreamweaver. Very odd.
Any ideas?
Thanks
The height property will correct here.But instead of this use following code.If you go on adding content the div will also increase in height.
#largest {
background: url("firefox-gray.jpg") repeat-x scroll 0 0 #E3E3E3;
border: medium none;
margin-top: 10px;
overflow: auto;
}
Unfortunately you can not set heights of divs as percentages, mainly as content tends to make divs grow downwards, so you would be limiting yourself.
Take a look at the min-height css property though. That, I think, will go some way to sorting your problem.
Does the content of the div have a "float: left" or a "float: right" attribute?
html, body{
height:100%
}
div{height: 50%}
I don't know the browser compatibility of this so you may need to test it.
http://jsfiddle.net/ZKZFa/
may be you have to write like this:
html, body{
height:100%
}
#latest{
height: 100%;
background: #e3e3e3 url(banner_grad.jpg) repeat-x;
border: none;
margin-top: 10px;
}
I have a stack of divs inside of each other, all of which have an ID which specifies CSS only.
But for some reason the surrounding DIV tag only expands to it's anointed height value, and not it's default auto, meaning that although the content is inside, the backing DIV is only a specific height. I need it to adjust the heigh to the size of whatever is inside of it (As there will be user submitted data being echoed out possibly in paragraphs with 500+ words.)
#albumhold {
width: 920px;
padding: 10px;
height: auto;
border: 1px solid #E1E1E1;
margin-left: auto;
margin-right: auto;
background-color: #E1E1E1;
background-image: url(../global-images/albumback.png);
background-position: top center;
background-repeat: repeat-x;
}
#albumpic {
display: block;
height: 110px;
width: 110px;
float: left;
border: 1px solid #000;
}
#infohold {
width: 800px;
background-color: #CCC;
float: right;
height: 20px;
}
#albumhead {
width: 800px;
height: 20px;
text-indent: 10px;
border: 1px solid #000;
color: #09F;
}
#albuminfo {
margin-top: 5px;
width: 800px;
float: right;
color: #09F;
word-wrap: break-word;
}
<div id="albumhold">
<div id="albumpic">Pic here</div>
<div id="infohold">
<div id="albumhead">Name | Date</div>
<div id="albuminfo">Information</div>
</div>
</div>
Help is greatly appreciated.
Floated elements don’t take up any vertical space in their containing element.
All of your elements inside #albumhold are floated, apart from #albumhead, which doesn’t look like it’d take up much space.
However, if you add overflow: hidden; to #albumhold (or some other CSS to clear floats inside it), it will expand its height to encompass its floated children.
There are two solutions to fix this:
Use clear:both after the last floated tag. This works good.
If you have fixed height for your div or clipping of content is fine, go with: overflow: hidden
You probably need a clear fix.
Try this:
What methods of ‘clearfix’ can I use?
Add <br style="clear: both" /> after the last floated div worked for me.
Putting a <br clear="all" /> after the last floated div worked the best for me. Thanks to Brent Fiare & Paul Waite for the info that floated divs will not expand the height of the parent div! This has been driving me nuts! ;-}
You have a fixed height on .infohold, so the .albumhold div will only add up to the height of .infohold (20px) + .albumpic (110px) plus any padding or margin which I haven't included there.
Try removing the fixed height on .infohold and see what happens.
You didn't typed the closingtag from the div with id="infohold.
div will not expand if it has other floating divs inside, so remove the float from the internal divs and it will expand.
So Ive run into this problem where overflow: hidden on a div in a container will limit the divs width when its supposed to be fluid. So basically I have a structure similar to this:
<div id="container">
<div id="leftColumn">
//content
</div>
<div id="rightColumn">
//content
</div>
</div>
In this situation, the leftColumn div is of fixed width and the rightColumn is supposed to be fluid and fill the remaining width. The problem is that when I add overflow: hidden to the rightColumn (it has a background color) the width shrinks to the min-width that Ive given it. Is there any way to make it expand to the remaining width space? Here is what I have for CSS currently:
#container {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 800px;
}
#leftColumn {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
width: 230px;
position: relative;
float: left;
}
#rightColumn {
margin: 0px 0px 0px 250px;
padding: 10px 10px 10px 10px;
min-width: 530px;
overflow: hidden;
background: #fff;
}
Thoughts?
It works for me (FF 3.6.13). Check and see if there is anything else on the page (Styles or elements) that might be interfering. Also check different browsers. And if you are manually changing the page when testing, be sure to do a hard refresh on your browser (Ctrl-F5) to make sure that the new styles load.
It worked exactly as you described within my fiddle... shrinking to the min-width with overflow : hidden applied.
I hate nesting divs unnecessarily, but potentially this is a scenario where it may work for you?
http://jsfiddle.net/cVNaJ/
I turned your right column into a 'wrapper' where overflow : hidden content is contained within a child div, named after the original. Maybe this helps perchance?