float - how to contain it? 2

[1DMF]

I have a design that I've been asked to float 2 columns either side of the main page, for adverts etc....

so now the design has 3 columns, however I cannot seem to get them to stay within the containing div.

how do you make a div float, within a div?, it seems as soom as i use float:left; it breaks out of the containing div and floats over it, how do you place floating divs relative to a containing div rather than relative to the screen?

eg..

<div id="centerwrapper">
  <div id="mainwrapper" >
    <div id="side_left">
	  This is the left hand side
    </div>
    <div id="wrapper" >	  
		<div id="header">
			<div id="ram">
				    logo			                </div>
			<div id="menu">
                         MENU goes here
                        </div>
               </div>
               <div id="mainbody">
               main page goes here
               </div>
   </div>
   <div id="side_right">
	  This is the righthand side
   </div>
  </div>
</div>

css...

/************* Container *************/

#centerwrapper {
margin: 0 auto;
border-style:solid;
border-color:blue;

}
#mainwrapper {
border-style:solid;
border-color:red;

}

#wrapper {
width: 500px;
text-align: left; 
float:left;
border-style:solid;
border-color:green;

}

/************* Side Bars *************/

#side_left {
width: 100px;
height:600px;
text-align: left;
float:left;

}

#side_right {
width: 100px;
height:600px;
text-align: left;
float:left;

}

is it possible to float divs within a div?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BabyJeffy]

Make the enclosing element (in this case the enclosing DIV) position:relative should do what you are after.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[1DMF]

I've tried but it doesn't seem to do anything?

I've applied it to #centerwrapper & #mainwrapper yet the contained divs still float hard left!

I've also tried it the other way round so #wrapper, #side_left & #side_right (which are the floated divs) have position:relative; it makes no difference.

I've even put borders on them to (a) see what was going on & (b) eliminate margin collapsing, but it's made no difference. I'm ... that close to using a table and being done with it, but I don't want to , I want to do it right , I just can't seem to work it out, here is a the link , any chance you can explain why I can't get my divs to float within their containers?

The way I see it they should center themselves withing #centerwrapper as it has a margin:0 auto;, but they just float over the top no matter what positioning I give anything? I'm lost, but what's new lol!

http://www.independentmortgagenetwork.co.uk/index-1.html

Thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

isn't it funny how things just hit you after posting here on TT!

get rid of the first wrapper (#centerwrapper), make the #mainwrapper the correct width to hold all three divs side by side and place the margin:auto on the #mainwrapper!

and bingo!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

What I don't understand is why i have to give #mainwrapper a fixed width to contain the divs, surely not specifying a width with magin auto should find it's own positioning, but instead the floats seem to break out of the div and float over it, get if you give the containing div a width, they stay inside it.

what's that all about?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Unless a div has a specified width it expands to a 100% of its container. Unlike tables, which by default have a width of auto, or just enough to fit the content. So, margin: 0 auto; call on a div that has no width specified will do nothing. Auto margins on left and right, but left and right actually extend all the way. I don't really know what problems you had before, but this is the way elements always work in HTML.

 

[1DMF]

it's not just the 100% width by default that was confucing me as I said , the floated divs were not CONTAINED within the div unless a hard coded width was given, this I do not understand. if a width is given to the containing dive the elements stay WITHIN the div (even if they don't fit and have to stack! rather than float side by side) , but if no width is given to the containing div, they break out and float over the div, so the containing div has NO CONTENT , is 100% wide and ZERO in height, with no content, that's what i'm getting at.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

but if no width is given to the containing div, they break out and float over the div, so the containing div has NO CONTENT , is 100% wide and ZERO in height, with no content, that's what i'm getting at

Like I said, 100% wide is by default. What you're seeing (the zero height) is actually the behaviour of the floated elements -- they don't contribute to the size of the parent. So, providing that you did not specify height for your container, it will default to auto, or make it as big as the content. However, when you float elements, they don't contribute to the content of the parent (in this respect they are taken from the document flow). So that's why they hang over, or if all the elements with the parent are floated, the parent then has no normal content and is zero sized. IE sometimes incorrectly expands such a container. In order to make the parent expand to the bottom of the floated elements, you need to put a clearing element at the bottom of floated ones.

Please see this example of what I think you're saying -- working like I think it should:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
  <head>
    <title>Float Test</title>
    <style type="text/css">
	#container {
		margin: 0 20%;
		background: #cac;
		border: 1px solid red;
	}

	.float {
		height: 300px;
		width: 150px;
		background: #688;
		border: 1px solid yellow;
	}
		
	.right {
		float: right;
	}

	.left {
		float: left;
	} 

	.clearer {
		clear: both;
	}

    </style>
  </head>
  <body>
   <div id="container">
     <div class="float left"></div>
     <div class="float right"></div>
     <div class="clearer"></div>
   </div>
  </body>
</html>

 

[1DMF]

thanks that explains it at least!

What you're seeing (the zero height) is actually the behaviour of the floated elements -- they don't contribute to the size of the parent.

Yes this is the phenomenon i was experiencing, though I don't understand why, I would expect the parent/containing div to be expanded with the content of the 'child' divs, but unless you hardcode a width to the containing/parent div they break out and float over the parent div. I find this odd and unexpected, especially it seems do defeat the point of trying to make 100% fluid websites if you have to force a static width to enable the childs to fit correctly in the parent.

But once again, how i'd like or expect it to work and how it actually works are two completely different things...what's new - lol

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

I don't know if it's practical for your situation or not, but it's something you can remember for a future date - you can also float the parent element to make it stretch around all it's childrent elements. But then you have to deal with the floated parent element - which isn't always an ideal situation.

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[1DMF]

yeah thanks kaht, it's certainly something I now know, but floating the parent div, then gives you the same problem, with its containing/parent div.

would float:center; work? hmmm , I'm going to continue with the rigid layout I've got at the momentt, getting the content in place is my priority, they keep changing their mind over the template anyhow, i don't like the new left & right divs, the whole point of the template was to make it small, sleek and neat, they just saw the space either side of the main content as "wasted", and mine is not to reason why, the background is now green, there is now boxes either side, the site looks busy and ugly, but hey if that's what they want, they're the boss!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.