Issue's with DIV within DIV aligning

So I've always used tables to make my websites. I always found it easier for me to get the alignment working and everything. But I have decided for SEO purposes it would probably best to use DIV as it would reduce a lot of the text on the page!

Well long story short, I've been playing around with a design I was making and I can't seem to get the alignment correct.

http://www.pcbytescorp.com/prnt/index2.php

As you can see on that page in the body just under the H1 tag I have 2 div containers. I want the top container to align left, and the other container to align right and sit flush with the other container but I can't get it to work right!. Ive tried float: left float: right but then it makes the containers sit on top of each other.

Any pointers on what I am doing wrong would be appreciated.

Here is the css file too.

http://www.pcbytescorp.com/prnt/style.css

Its DIV id bodycontainer and quotecontainer that I'm trying to align

 

I did not follow that. If you don't get a reply that answers your question make it look the way you want it to look with tables and let me see that.

As a general statement, closing one div before you open another is the way to get the float right. The free scripts site in my sig link uses a single container and has 3 divs to form the body. Feel free to copy the CSS and play with it.

 

Thanks colbyt... I have been using that, and I looked at your CSS and DIV's and they look just the same as mine, so I'm unsure why this is being the way it is.

Here is a screenshot of what it looks like. Perhaps people can get a better understanding.

As you can see right underneath "color catalog printing" I have a div container... Inside there are two containers... the container on the right where it says "get free quote instantly for your print job" is sticking out through the container and going into the other containers!



Here is the HTML and CSS snippet for the containers.

index.php

<div id="container">
	<div id="bodycontainer">
		This is the text where the body should be. bla bla bla bla bla.
	</div>
	<div id="quotecontainer">
		<script src="scripts/quote.js" type="text/javascript" language="javascript"></script>
	</div>
</div>

HTML:

style.css

#container 
{
	margin: 0 auto;   /* align for good browsers */
	text-align: left; /* counter the body center */
	border: 2px solid #000;
	width: 773px;
}
#bodycontainer 
{
	margin: 0 auto;   /* align for good browsers */
	position: relative; top: -1px; left: -1px;
	width: 523px;
	float: left;
}
#quotecontainer
{
	margin: 0 auto;   /* align for good browsers *//
	width: 250px;
	float: right;
}

HTML:

 

by the way.. this looks JUST FINE in Internet Explorer... its FireFox that is not rendering this correctly.

 

figured it out finally.

For firefox to render it correctly. the containers below the floated containers should have "clear: both;" applied to them. Boom!

Thanks

 

Glad you figured it! CSS can be a bit of a nightmare as far as browser support is concerned.

It might also be worth pointing out that TWO float: left options can work with containers positioned side by side - it forces one beside the other, just as if they were table cells.

I don't know if strictly speaking it's 'good' CSS, but it's certainly used in a lot of layouts.

 

No. Internet Explorer is in error, as always. Firefox was performing correctly and you would find all modern browsers would do the same thing. What you are witnessing is an IE bug. Parent containers are NEVER to expand to contain floated elements.

Never, ever trust IE to do ANYTHING right.

 

Glad you got it. This cross-browser stuff is a major PITA.