|
CSS - Background Disappears When I Float Containers Or Images??
When I am floating two containers or images my background color disappears. Why is that and what should I do instead?
Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! Similar TutorialsIf you are getting results as in the above image, simply add "clear:both;" to the container (blue) div which you do not want affected and it will flatten its ceiling and stop any float's escaping. -Luke Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu. The id of the div that should show the bg is #topNavContainer. Page: http://hopewwamericorps.org/index.php Style: PHP Code: #topNavContainer { background: #000000 url(../images/topNavBg.gif) repeat-x scroll; } #topNav { height: 40px; width: 760px; margin: 0px auto; text-align: left; padding: 0px 0px 0px 100px; color: #bcd5df; float:left; } #siteSearch { padding-top: 10px; width: 300px; float: left; display: block; } HTML: PHP Code: <div id="topNavContainer"> <div id="topNav"> <ul class="sf-menu"> -**REMOVED FOR POST**- </ul> </div> <div id="siteSearch"> <form action="http://hopewwamericorps.org/page.php?Page=Search_Results"> <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="Page" value="Search_Results" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> </div> </div> Thank you for your help! Please ask me to clarify if needed, thanks. I have a basic div: Code: <div id="box1"></div> The CSS for the div: Code: #box1 {
position: relative;
width: 75%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 100px;
background-color: #FFFFFF;
*background: none;
z-index: 1;
left: 50px;
top: 50px;
background-image: url(images/1px_trans75percent.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1px_trans75percent.png', sizingMethod=scale, enabled=true);
background-repeat: repeat;
border: 1px solid #FFFFFF;
}
The transparent background flashes and disappears when the page is loaded in IE6. Any ideas on how to get it to appear and stay appeared would be much appreciated... thanks! The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! hi everyone, i'm having some trouble with using floats and a background image. here's is how it's setup: > Div holder that holds floats / background image --> Float that has content to the right --> Content on the left now before you guys start scratching you head trying to figure out my logic, this is my first dive into using CSS so i'm still learning. lastly, it only seems to do this in firefox but works in IE. here's the example: http://vsm.intriguemedia.net/ and here's the CSS file: http://vsm.intriguemedia.net/lib/css/base.css any head would be appreciated, thanks. Hello. I use List (<ul>,<li>), to make a menu. When I add float:left; parameter to li{} selector, the green background of the list becomes transparent. I give the bgcolor to the list like this: ul{ background-color: #00CC00; } here are tha sample pages, so you can view the source. without float:left http://www.dinal.ru/test/liul.htm with float:left http://www.dinal.ru/test/liul2.htm my question is: where is the green color, where does it go? Thank You Artashes Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here My CSS practice site (http://stallinswebdesign.com/vs/index.php) is coming along - no tables! - thanks to those of you who have helped along the way. I've used the float property to construct a 3-column site. Two short questions include: 1. I want to display a small image at the top of my middle column. When I drag from either side to make the browser window smaller, IE forces the image and everything below it to the bottom of the page. FF and Opera simply slide the side-column content under the image, which I much prefer. Is there a way to tell the image to stay at the top so that IE can't push it to the page bottom? 2. If you look, you will see that my site is designed with a narrow column on either side of the main wider column. It would look really great if I could occasionally split that center column into two equal-width columns. For example, if each line segment below represents a short paragraph or image, could I do the following when I've already designed the site with float and not the position property? _____ _______________ ______ _____ _______________ ______ _____ _______ _______ ______ _____ _______ _______ ______ _____ _______________ ______ _____ _______ _______ ______ etc. etc... Thank you all for your time. http://www.mrossana.com/storage/bel.../template1.html In Firefox, the background of #topmenu2 and 3 extend the entire width of the surrounding div, which is what I want it to do. In Internet Explorer, the floated #logo_wrapper div stops the background of #topmenu2 and 3. Is there any way I can get this to work in Internet Explorer the way it does in Firefox? Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. Hi there, I'm trying to get the background image to repeat down the page, but I think the float is messing it up since it's outside the element, or something like that. The background image call works fine, you can test it if you enlarge the #Middle height values. http://www.wpforrealestate.com/prod...es/Design2/www/ I've had this problem before, but figured it out through the help here and some links on floats, but this time I'm just not getting it for some reason. Any ideas? Thanks. Essentially I'm creating a 'drop-up' menu without javascript. Here is my test page: http://38.99.165.179/kalle/cssmenu/index3.html PROBLEM: I am using 'float: left' to arrange my main menu items horizontally. With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears. Why is this happening? This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left. Here is my code: Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #555555;
color: #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#top {
width: 100%;
height: 80%;
text-align: center;
}
/* MENU BAR */
#menu_container {
width: 100%;
margin: 0 auto;
/* doesn't work!!! */
background-color: #CC6666;
}
#menu {
font-size: 16px;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
}
#menu ul {
}
#menu li {
position: relative;
display: block;
height: 1.2em;
margin-right: 50px;
text-align: left;
/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?
float: left;
/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */
}
#menu li ul {
background-color: #BBBBBB;
position: absolute;
bottom: 1.2em;
display: none;
list-style: none;
width: 110px;
padding: 0px;
}
#menu li:hover ul {
display: block;
white-space: nowrap;
}
#menu li:hover ul li {
display: block;
}
#menu li:hover ul li:hover {
background-color: #777777;
}
/* END - menu bar */
#bottom {
margin-top: 70px;
height: 150px;
text-align: center;
clear: both;
padding-top: 2px;
background-color: #222222;
}
</style>
</head>
<body>
<div id="top">
content
</div>
<div id="menu_container">
<ul id="menu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Anything</a></li>
<li><a href="#">Needed</a></li>
<li><a href="#">Here?</a></li>
</ul>
</li>
<li><a href="#">Something 1</a>
<ul>
<li><a href="#">Imagine</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Possibilities</a></li>
<li><a href="#">of Magic!</a></li>
</ul>
</li>
<li><a href="#">Something 2</a>
<ul>
<li><a href="#">Taste</a></li>
<li><a href="#">the</a></li>
<li><a href="#">Sensation</a></li>
<li><a href="#">of the Bubbles</a></li>
<li><a href="#">on your Tongue!</a></li>
</ul>
</li>
<li><a href="#">Something 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="bottom">
content
</div>
</body>
</html>
Hi, I have been a CSS/XHTML developer for about 6 months now and I just came accross a problem that I have had difficulty solving... I have spent about a week on this problem, and still no luck... I kind of restarted too with no luck... I am thinking this may be a bug... But it works fine in IE... In firefox, the content division background does not continue, instead a footer background is moved up... This is so weird, I dont know how this can be possible... This has been extremely frustrating... If anyone can help, that would be great! Thanks a lot! subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box. HTML Coding ************* <div id="special_feature_top"> <img src="images/specialfeatures.jpg" width="800" height="30" alt="" /> </div> <div id="special_feature_mid"> <img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" /> <img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" /> <img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" /> </div> <div id="special_feature_btm"> <img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" /> </div> CSS Coding ************* #special_feature_mid { padding: 1px 0px 1px 10px; background-image: url('images/content_bg.jpg'); } That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks Matta Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? Hi there, hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image. this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves. here is my code but none of the top or bottom background images show. please help, thanking you in advance. css: #feature { float:right; width: 287px; height: auto; } .featuretop { background-image:url(../images/css/featuretop.gif); background-position:top; background-repeat:no-repeat; } .featuremiddle { background-image:url(../images/css/feature.gif); background-position:center; background-repeat:repeat-y; } .featurebottom { background-image:url(../images/css/featurebottom.gif); background-position:bottom; background-repeat:no-repeat; } html code: <div id="feature"> <div class="marTOP10"> <div class="featuretop"></div> <div class="featuremiddle"></div> <div class="featurebottom"></div> </div> </div> |
|||||||