CSS - Floating Divs Inside A Container Div - Don't Work :(

Here's the site in Question: http://www.winchps.vic.edu.au

It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6.

Here's the CSS code for the basic layout:

Code:

body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}

#header {
width: 802px;
}

#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}

#content {
padding: 0px;
margin: 0px;
}

#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}

#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}

#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}

#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}

I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc).

Anyone got any ideas?

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.

Iv got my boxes sorted!!!
but im quite newbie to CSS layout and stuff...
so i want to put two boxes in side my container box side by side. i decided to use float... but they float outside my container box, which i suppose is what they are supposed to do.

This is what im trying to achieve.
Code:

----------------------------------------------------
|  ---------------------    ---------------------   |
|  |                    |   |                    |  |
|  |                    |   |                    |  |
|  |   Float Left       |   |     Float right    |  |
|  |                    |   |                    |  |
|  |                    |   |                    |  |
|  ---------------------    ---------------------   |
----------------------------------------------------

Hi, I have 3 div boxes in a container, they sit side by side (i.e. 3 in a row) with different amounts of text in each div. The dilemma is that I need all the div's to be the same height as the tallest div.

can someone tell me how to do this?

thanks

Hi, what I'm trying to do is get two divs next to each other. That much I can do if I give them both a style of 'float:left;', but the problem with that is that they will overflow out of the div that they both sit in. Is there anyway to get two divs to sit next to each other, but to also expand the parent div if necessary? Thanks!

Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it.

Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width.

http://www.obelix.ca/templates/index.html

I am trying to get the blue box (which is the content container) to be big enough to cover both divs "cbox1" and "cbox2". Right now it only covers the <h1> title and neither of the cboxs. I also need these two cbox's to be side by side instead of on top of or below each other. I can achieve one of these at a time but not both when I play around with the float values of the cbox's.

I would appreciate any help at getting the results I desire. Thanks.

Here is the basic html I am working with.

Code:

<!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
#content {
	margin:0px;
	padding:0px;
	background-color:#90C0FF;
}
#cbox1 {
        border-radius:15px;
	border: 2px solid #000000;
	width:250px;
	background-color:#FFFFFF;
	padding:20px;
	float:left;
}
#cbox2 {
        border-radius:15px;
	border: 2px solid #000000;
	width:200px;
	background-color:#FFFFFF;
	padding:20px;
	margin-left:10px;
	float:left;
}
</style>
</head>
<body>
    <div id="content">

	<h2>LOREM IPSUM:</h2>
	<div id="cbox1">
          "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
	</div>

	<div id="cbox2">
          But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
	</div>

    </div>

</body>
</html>

You can pop this right into try it:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

I'm pretty new to using CSS so please be gentle

I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css">
#container {
width: 760px;
width: 780px;
width: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}

#content {
padding: 5px;
margin-left: 215px;
background-color: gray;
background-attachment: fixed;
background-image: url(images/bg_run.jpg);
background-repeat: no-repeat;
height: 400px;
background-position: right top;
}

#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

#footer {
clear: both;
padding: 5px;
margin-top: 5px;

background-color: rgb(213, 219, 225);
}
</style>
</head>
<body>
<div id="container">
<div id="banner">Banner</div>

<div id="sidebar-a">Sidebar</div>

<div id="content">Content</div>

<div id="footer">Footer</div>
</div>
</body>
</html>

Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ...

link to image : xipic.eu/ufiles/njf25uy8_divs.png

Hello,

can anyone help me with this? I'm having trouble floating some divs and I can't find the problem.

1. navigation should be aligned with the bottom of the h1 logo
2. the content div should come next to the list of brands. The content div should overlap the black bg at the top.

www. claeysconsult . be / misskado / index2.html

Thanks in advance...

Here's the template I'm working on: http://dhost.info/justusvizslas/template.php

Here's my problem:
I'm trying to create a centered, two-column layout with a header and a footer, sort of like the tutorial he http://nemesis1.f2o.org/aarchive?id=7

I've got everything working correctly and it looks fine in IE. However, in FireFox, the container div doesn't automatically adjust its height to be the same as the height of the divs inside. Instead, I have to set the height at a certain number of pixils to even get the container div to show up. When I do that, in IE the container div defaults to the same height as the larger of the two inner divs, but in FireFox the container div just stays at whatever pixil height I specified. That becomes problematic because I don't plan on having all my pagecontent divs with the same height.

Any insight will be greatly appreciated. I've been looking at this for hours and haven't gotten it to work like it should. Here's the relevant code too:
CSS
Code:

#container {
		width:792px;
		height:50px;
		margin: auto auto;
		color:#000000;
		background-color:#FFFFFF;
		background-image:url(design/menuimage.gif);
		background-repeat:repeat-y;
		}
		
#navigation {
		width:125px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		vertical-align:top
		}

#pagecontent {
		width:667px;
		height:auto;
		padding:0px;
		float:left;
		margin-top:auto;
		color:#000000;
		background-color:#FFFFFF;
		text-align:center
		}

PHP
Code:

<div id="container">
  	<div id="navigation"><?php include "nav.php"; ?></div>  
	<div id="pagecontent">
  		<br />Some more content here<br />
	</div>
</div>

Again, thank you in advance for any help with this. If you're stumped and think it should work as-is, go ahead and go to the actual template I'm working on (first http link in this post) and look at it in IE and in FireFox to note the difference.

--links aren't working so if you have the patience to put the files defined for page and style sheet below after evaxu dot com this is a challenging problem!--

Hey Guys,

I've recently got back into web design by making my girlfriend a professional homepage in dreamweaver and css. So far so good, and pretty simple, however I've been trying to format the CV page but now it's starting to unravel...

Basically, each element has had a div box put around it so that these can be arranged and floated to the positions I want. This seems to have worked in theory, however the bottom div (or 2 as they're columns next to each other) overlap the container and remove the whole container's background.

I have put this online on /resumecssfail.html and you can use the navigation to see how the container background is supposed to be working as on other pages.

The /style.css style sheet can be found and the relevant id's are container, maincontent and those starting with cv at the bottom. All that has been changed for this page really are width, float and some padding. However I have tried to use attributes like clear, positioning, display and various re-sizing and float changing to the last elements - whilst also putting the whole CV in other css boxes etc etc.

I have put the code through the WC3 CSS validator which says it's valid to css 2.1. I've trawled through blogs and forum posts but just can't seem to find a solution :\

One thing that does seem to help is removing the last div tag (or putting in another tag and putting a character after it - I'm thinking of using a white ".") but this wouldn't be valid css now would it?! I'm going to use these for now on the official site page, but please use the link above to see my error page that I'd like help with.

Thanks!

I am having a problem with a couple divs not rendering correctly. I'm building an online tournament bracket system, and I'd like the divs to be flush with each other, but in all browsers it's rendering incorrectly.

css Code:
Original - css Code <style type="text/css"> div { font-family: Arial, Verdana, "Times New Roman", sans-serif; font-style: normal; color: Black; } .gamecontainer { position: absolute; width: 120px; } .player { font-size: 12px; background-color: lightblue; width: 100%; text-indent: 0.5em; border: solid 1px; margin: 0px; padding: 0px; } .infoblock { border-right: solid 1px; font-size: 10px; width: 100%; text-indent: 0.5em; margin: 0px; padding: 0px; } </style>

  

  


     <style type="text/css">


         div {


             font-family: Arial, Verdana, "Times New Roman", sans-serif;


             font-style: normal;


             color: Black;


         }


         .gamecontainer {


             position: absolute;


             width: 120px;


         }


         .player {


             font-size: 12px;


             background-color: lightblue;


             width: 100%;


             text-indent: 0.5em;


             border: solid 1px;


             margin: 0px;


             padding: 0px;


         }


         .infoblock {


             border-right: solid 1px;


             font-size: 10px;


             width: 100%;


             text-indent: 0.5em;


             margin: 0px;


             padding: 0px;


         }


     </style> 

html4 Code:
Original - html4 Code <div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> <div id="W-R1-G1-P1" class="player">Player 1</div> <div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> <div id="W-R1-G1-P2" class="player">Player 2</div> </div> <div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> <div id="W-R1-G2-P3" class="player">Player 3</div> <div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> <div id="W-R1-G2-P4" class="player">Player 4</div> </div> <div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> <div id="W-R2-G1-P1" class="player">Player 1</div> <div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> <div id="W-R2-G1-P2" class="player">Player 2</div> </div>

  

<div id="W-R1-G1" class="gamecontainer" style="top: 10px; left: 1090px;"> 
<div id="W-R1-G1-P1" class="player">Player 1</div> 
<div id="W-R1-G1-I" class="infoblock" style="height: 20px;">W-R1-G1</div> 
<div id="W-R1-G1-P2" class="player">Player 2</div> 
</div> 
 
<div id="W-R1-G2" class="gamecontainer" style="top: 75px; left: 1090px;"> 
<div id="W-R1-G2-P3" class="player">Player 3</div> 
<div id="W-R1-G2-I" class="infoblock" style="height: 20px;">W-R1-G2</div> 
<div id="W-R1-G2-P4" class="player">Player 4</div> 
</div> 

<div id="W-R2-G1" class="gamecontainer" style="top: 30px; left: 1210px;"> 
<div id="W-R2-G1-P1" class="player">Player 1</div> 
<div id="W-R2-G1-I" class="infoblock" style="height: 45px;">W-R2-G1</div> 
<div id="W-R2-G1-P2" class="player">Player 2</div> 
</div>

Hello all, sorry if this is a "newb" question, but I am having trouble with the code on my site. The element "#arrival" is not displaying the proper height unless I literally type code in to fill it up the full 400px. I haven't implemented any paragraph styles, I just want to get the basic elements done for this landing page.

How would I go about fixing this? Also, do I have to "float" the "#arrival" element? I would like to have the dog house overlap the first div element of the dog jumping (#dog) like in the jpg. Any help would be greatly appreciated.

Here is what it should like: http://i33.tinypic.com/2uh7evm.jpg

But this is actually what is happening:
http://www.amandambruce.com/DROH/index.html


Thanks in advance,
Amanda


p.s. here is the code directly from the source:
Code:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"

"(URL address blocked: See forum rules)">
<html xmlns="html://(URL address blocked: See forum rules)/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />
<title>The Dachsund Rescue of Houston</title>

<style type="text/css">

body{
background: url(images/background.jpg) no-repeat top center;}

#contain{
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#menu{ width: 466px;
height: 98px;
float: right;
margin-top: 15px;
}
#dog{ width: 491px;
heigth: 257px;
margin-top: 19px;
margin-left: 22px;
float: left; }
/* margin-top is the menu plus the remaining pixels (19) so,

from the very TOP of the page. I guess you keep "adding"
*/



#community{ float: right;
background: url(images/community_spot.jpg) no-

repeat;
width: 231px;
height: 259px;
margin-top: 19px;
margin-right: 22px;
}

#arrival{
clear: right;
background: url(images/arrivals.png) no-repeat;
width: 800 px;
height: 400 px;


}

p{
font-family: helvetica;
font-size: 12pt;
color: #000000;
padding-left: 10px;
margin-right: 10px;
}

</style>
</head>
<body>
<div id="contain">
<div id="menu">
<a href="about.html"><img src="images/about_btn.png" alt="About

button" title="About" border="0"/></a>
<a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt

button" title="Adopt" border="0"/></a>
<a href="help.html"><img src="images/help_btn.png" alt="Help

button" title="Help DROH" border="0"/></a>
<a href="resources.html"><img src="images/resources_btn.png"

alt="Resources button" title="Resources" border="0"/></a>
<a href="contact.html"><img src="images/contact_btn.png"

alt="Contact button" title="Contact" border="0"/></a>
</div>
<div id="dog">
<img src="images/jumping.jpg" border="0"/> </div>
<div id="community"> </div>
<div id="arrival"> lll
</div></div>
</body>
</html>
Reply With Quote

[code]

<div id="wrapper" style="background-color:black;padding:2px;overflow:visible;">

<div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div>
<div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div>

</div>


[code]


here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you.