I have a ul inside of a div, and want the containing div to not be affected by the child ul in terms of height.
Jsfiddle: http://jsfiddle.net/9eCq6/3/
Referring to the jsfiddle, I'd like the yellow div to not be any taller than the blue divs, and for the block of text below the colored divs to not be pushed down by the red ul - that is, I'd like it to overlap the block of text below.
I suspect the answer lies in positioning and is affected by the floats being applied, but I haven't been able to find the solution yet. What should I do, or read, to find the solution?
Edit: I want to not give the parent a fixed height, because I don't know what content might get added to it.
Use absolute positioning to breakaway from parent. Also you will need overflow: visible and a clearfix:
.wrap {
position: relative;
overflow: visible;
}
.wrap::after {
content: "";
display: table;
clear: both;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.right ul {
position: absolute;
top: 100%;
left: 0;
}
This old BrainJar article is a great, thorough reference on CSS positioning. It is absolutely dated, but holds up surprisingly well. You will run into these sorts of issues far less often if you spend the time first to get a solid understanding of the underlying systems you're dealing with.
That said, a (partial) solution to your problem is straightforward. Put the div.under inside the div.wrap, and add clear: left; to the CSS .under selector. See this fiddle.
Give the parent fixed size, and use overflow:hidden.
Related
The red footer gets up in the middle. How to make it keep it self at bottom? Like clear: both and overflow: hidden.
I have tried many things, is there something I am doing wrong?
Demo
The code is too large to be pasted here (30000 chars limit). Please, send me working fiddle.
update: it works now.
#footer {
position: relative;
height: 274px
bottom: 0;
margin-top: 274px;
}
You have
#footer {
margin:-274px 0 0;
}
Which is giving it a negative top margin and moving the footer up. Try removing that line. Though you may also need to tweak the content of the page. You should use the clearfix on the content so it doesnt go behind the footer.
Try this :
#footer {
position:fixed;
bottom:0;
}
clear: both is invalid with position: absolute elements, because they are out of the normal flow.
set a position: absolute; bottom: 0; style on the div.gallery element and it will be on the bottom of its container.
But it won't be enough for you, you should yet move your <div class="gallery"> to move out of its container div.
It works in chrome , and not in ff/opera.
Demo here: http://booksnearby.in/browse_items.php . The 'location: Dhoolsiras Village, delhi' line 'hangs' in the middle. I am trying to make it stay at the bottom of its container.
For this I tried
Child span tag- {
bottom: -5px;
font-size: 11px;
left: 115px;
line-height: 20px;
position: absolute;
}
Parent:- element.style {
height: 100%;
position: relative;
}
But it doesn't work, except in chrome. Please help
Thanks.
Do you have to use a table? Because your problems come from the td element's height. Tables have the worst cross browsers support out of all the html elements :)
Is it possible to change the structure to use div elements instead?
OR you could give the position: relative to your .listtd instead of the div (which means remove the position property from the div). This solution will do the trick.
I have a website whose layout has been shown in the diagram. The body consists of a main container, which comprises of header, parent div and footer. The parent div further contains several child div as shown.
The problem being height of all the child div is finite. But the parent div contains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.
The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for.
Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.
Please comment if I am unclear in asking my doubt !
Seems like you got a case for the clearfix class.
So I'm guessing you're floating the child div and that's why the parent div's height is 0.
When you use floats, the parent doesn't adapt to the height of the children.
You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.
Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Try adding the following to your stylesheet:
#parentdiv:after {
content: " ";
display: block;
clear: both;
}
As Daedalus suggested in his comment, you're probably floating the child divs. If so, the line above fixes it.
The problem when you float things is that their parent element "ignores" them.
The line above creates and inserts a (pseudo-)element into the #parentdiv which is pushed down past all of the floated divs. Then the parent div, which although ignores the floated children, doesn't ignore this pseudo element - acting as it should, it expands to contain the pseudo element. Now, since the pseudo-element is below all of the floated children, the parent div happens, or better yet, seems to "contain" the floated children as well - which is really what you want.
#João-Paulo-Macedo 's work, as implemented in a styled div:
export const HeadroomWrapper = styled('div')`
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 2;
&:after {
content: " ";
display: block;
clear: both;
height: 1px;
}
`;
I'm confused here... Here's my site that I'm working on: http://s361608839.websitehome.co.uk/marbleenergy/
The div #main is sitting about 10px below #navigation and I've tried bringing it up 10px by adding:
#main {
margin-top: -10px;
}
Had no luck there unfortunately. I'm learning CSS here, what is it I need to do?
Thanks
using absolute positioning isn't so flexible since you're aligning your div's in hard pixel measure. This will probably cause some error on several browser
Use relative positioning instead, and use top attribute to lift that div up
this is the code
#main{ position: relative; top: -10px; }
Add the following to the #main div
#main {
position: relative;
top:-10px;
}
position: relative; Will position the element relative to where it normally sits and aligning -10px from where it would sit will bring it into the gap you have made in your menu div. Haven't checked your site but can't see any reason why this won't work. I prefer not to set my elements to position: absolute; as the above member answered as any content under the div will be pulled up under the absolutely positioned div.
As the other answer more clearly details, you need to make sure that positioning is absolute, in order for any 'px' CSS specification to make sense, if not, it defaults to relative (to nearest parent container) I believe.
USE
#main {
position relative;
margin-top:-10px;
}
See Demo: http://jsfiddle.net/rathoreahsan/fSDpJ/
I browse your website in your case you need to use the following css:
#main {
position absolute;
margin:-10px 0 0 12px;
}
OR
#main {
position relative;
margin:0 0 0 12px;
top: -10px;
}
I have placed an absolutely positioned element (header) after relatively positioned element (body content). Due to some reason and this works fine in all the browsers except IE8.
The header is overlapping the content element with not positioned at its absolute position.
The css rules I have used:
#bodyContent{
clear: both;
display: table;
width: 920px;
margin-top: 173px;
_margin-top: 178px;
position: relative;
}
#headerContainer {
position: absolute;
top: 0px;
left:0px;
}
The header part is rendering from the content element postition with space in its position.
Is this the bug in IE8? Can anyone help me sort out this issue?
This sounds like an old IE7 bug.. can you place an element between them? That fixed it for me.
I've also had similar problems. I used the float command which solved the issue. Try float: left; in #headerContainer