4 replies [Last post]
volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 8 years 49 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

Hi all,

Pardon my newbness. Checked the forums. Searched, did the FAQ thing, and no matter how I apply floats and clears, I can't seem to get this dang container to expand.

You know story.

Markup:

<div id="container">
	<div id="pageHeader">
		<h1></h1>
		<h2></h2>
	</div>
	<div id="bigsaying"></div>
	<div id="dontsettle">
		<div id="pageHeader">
			<h3><span><span></h3>
		</div>
		<p>...</p>
	</div>
		<div id="whatwedo">
			<div id="pageHeader">
				<h4><span>What We Do</span></h4>
			</div>
		<ul>
			<li></li>
		</ul>
	</div>
</div>

and the associated CSS:

#container	{
	position:relative;
	background: url("img/containerbg.gif") repeat-y;
	width: 849px;
	margin:0 auto;
	}

...

#dontsettle	{
	position:absolute;
	float:left;
	clear:both;
	background:transparent;
	left:300px;
	top:180px;
	width:308px;
	}

I've only included snippets of the code for the sake of time/space. If you want to see what I've got at the testing server, hit my testing server. The associated .html and .css files can be found at the root there.

I apply the float and clear to the dontsettle div because it's the longest--contains the most copy, as you'll see if you clicky the link--so, I figure, it should clear the background around it. And I've tried it on the other divs themselves, as well as a couple of clear hacks (like the div.clearer hack mentioned in an article in the FAQs). Nothing seems to work here.

Any and all help would be greatly appreciated, as I'm still learning. Learning quickly, but still a newbie.

This isn't displaying correctly in any browser that I try, BTW. I know I'm making a mistake, but I don't know where it is or how to fix it.

Thank you!

Big Sweater Design - No, I do not knit

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Absolute positioning and expanding container (sigh)

Hi Volfro,

Remove the position absolute you cant have absolute and float together.

The clearing needs to be on the floats parent container as this is the element that will not expand with the float. Have a look for the link to clearing float containers on the index page on the forum for the best technique.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 8 years 49 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

Absolute positioning and expanding container (sigh)

Thanks for that. The container is now expanding as it should.

But without position:absolute, I can't get it in the right place. margin-left and margin-top display totally differently in my Firefox and IE. Neihter displays correctly, except in Dreamweaver. It does fine there.. I'm confused.

I tried using position:relative, with the same results. It's very strange. What am I missing?

Thanks,

Vincent

Big Sweater Design - No, I do not knit

volfro
Offline
Regular
Atlanta, GA, USA
Last seen: 8 years 49 weeks ago
Atlanta, GA, USA
Timezone: GMT-4
Joined: 2005-08-17
Posts: 26
Points: 0

Absolute positioning and expanding container (sigh)

Figured it out!

I would set the margin-left and the margin-top and it would display fine in one and not the other. So I declared a right margin as "auto" and it works perfectly.

Thanks for all your help! You've been a lifesaver. JUST met today's deadline.

vincent

Big Sweater Design - No, I do not knit

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Absolute positioning and expanding container (sigh)

You need to get rid of all the position absolutes along with the left/top positioning and the clear:both rules and then work with margins on those floats.

You also have used an ID twice on the nav and nav ul this is not allowed they can only be used once. Rename one of them or group the selectors if you want the rules to apply to both as in:
#navbar, #navbar ul {}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me