Why doesn't my background stretch behind my contentbox? - html

I cannot get the background to stretch behind the contentbox. The strange thing is, it works with Internet Explorer, but not with Firefox.
I hope it is enough to give you a link, since I do not know where the problem is in the code, it would not make much sense to post the whole code in here.
http://www.yiip.de/arbeit/testlayout/standard_template.html

You can also add overflow:hidden; to #shadow. That will clear the floats without having to put additional markup in your html.

try adding the following 'clearfix' style to your wrappers
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {display:block;}

You need to clear your 3 floated divs for the containing div to expand vertically around them. The easiest way to do this is to add
<br clear='both' />
after the third floated div (but within the container div).

Related

positioned elements disappear under next positioned element in the flow in MSIE7

sometimes got into this problem but I have always avoided it using some alternative code.
Unfortunately, this time I need a hand.
in IE7 if two brother DIVS have "position:relative" absolute-positioned children of them disappear under the "next brother DIV"
http://jsfiddle.net/qN74X/
<div style="width:200px;position:relative;background:yellow;">XXX
<div style="position:absolute;z-index:1;background:red;
height:70px;top:0;left:50%;">ZZZ</div>
</div>
<div style="position:relative;width:200px;background:pink;">YYY</div>
how can I solve this?
thanks
When hovering over the element, set it's z-index as well (not just the tip). Here's the main change:
body > div{
position:relative;
z-index:1;
}
body > div:hover{
z-index:5;
border:0 none;
}
Basically, on the outer container (where the background was) was what needed to have it's z-index changed. I am also unsure of why I needed to put border:0 none but without it, it didn't work.
jsfiddle: http://jsfiddle.net/qN74X/3/

CSS content will not wrap multiple divs

OK this is fairly complicated to explain so I've put it online here:
http://jsfiddle.net/zSgPr/10/
I need the yellow container to wrap around the lower brown div and red footer div in this set-up, leaving the footer at the bottom of the page, ideally where I can then adjust it by pixel margins. I have tried multiple ways of clearing it with some luck, however I can't figure out how to get the footer to behave or the content to encapsulate properly. Could somebody suggest a means of doing it? Thanks guys.
This is what I am trying to achieve
Answer:
Was overlooking the obvious that I needed another container div. If anyone wants to see it's on-line here: http://jsfiddle.net/zSgPr/21/
Add bottom:0 to .textbox
Plcace the .textbox div outside the container which means when you are giving position:absolute the parent div should have Position:relative so add relative to main div which is .page
LIVE DEMO
SOLUTION
Change .textbox style like this mayble helpful
.textbox{
margin:0px 10px;
background-color:#262626;
width:700px;
position:relative;
z-index:40;
border:2px dashed #381e01;
float:left;
}
DEMO

css elements aligment

I am trying to position few elements correctly, here is my code: http://jsfiddle.net/Tjz6D/
Now the problem is that block_under doesn't go below image, i've noticed that if delete all floats everything is fine but i need floats for two divs that contains text to be in the same level as image.
So what's causing block_under to overlap with image?
Add the clear property:
#block_under{
outline:1px solid green;
clear: both;
}
Use clear:both on the block_under element.
Demo at http://jsfiddle.net/gaby/Tjz6D/1/

drop down sliding underneath content.. i have tried EVERYTHing.. :(

Hey guys, ive been working on this drop down for wayyy to long now. I just cant get the drop down to fall on top of the main content on the page. I have tried adding position: relative and z-index on all relevant areas.
I think what may be causing the problem is "overflow: hidden" in some places.. but that is by far my favorite way to contain floats..
http://dev.redstoneinvestments.com/index.php?s=&p=redstone&v=home
Any suggestions?
Remove position: relative and overflow: hidden from both header and maincontent. If you need to clear the floats, use the clearfix method: http://net.tutsplus.com/tutorials/html-css-techniques/css-fudamentals-containing-children/ (this article specifically explains why clearfix is a better solution than overflow: hidden when you have absolutely positioned elements that need to extend outside the container).
change #header css to
#header {
background-color:#FFFFFF;
height:140px;
width:900px;
}
that enough, it fixed the problem on my firefox.

Title appears right aligned!

http://www.perfectclaims.com/ppiclaimsnew/
I dont understand why the first part of the title is right aligned?
any ideas?
Thanks
<div id="breadcrumb">
That div is creating space. I would guess you want to give it a width of 100% to make it fill horizontally so the title below has the full width to work with.
Incidentally, I was able to find out the information easily by using firebug, which is an extension for firefox.
Because that breadcrumb div is floating in the way of it. You can move the title paragraph down manually, or you can use the CSS property clear to avoid this.
It's because you're floating the breadcrumb trail to the left (and for no apparent reason, I might add). You can either remove the float CSS attribute from #breadcrumb or add clear: both; to .title.
add clear: left; to your paragraph <p class="title" style='clear: left;'>
Just remove the line float:left from id #breadcrumb.. Here float:left is not needed
so your code looks like below
#breadcrumb {
background-color:#FFFFFF;
color:#999999;
font-size:10px;
margin-top:5px;
padding-bottom:10px;
position:relative;
width:550px;
}
Cheers !!
If you are using google chrome, place the mouse over the element, right click and select 'inspect-element'.