My Float Won't Float

[Andrea]

http://www.aandbwebdesign.com/roatan/

 

This is driving me nuts - added a language widget which displays my language flags. I added this widget to the header, which creates this html:

 

<div id="header-sidebar">
	<div id="hsidebar" class="widget-area">
		<ul class="sid">
			<li id="qtranslate-2" class="widget-container widget_qtranslate">
				<ul class="qtrans_language_chooser" id="qtranslate-2-chooser">
					<li class="lang-en active"><a href="http://www.aandbwebdesign.com/roatan/octopus-dive-school-staff/" hreflang="en" title="English" class="qtrans_flag qtrans_flag_en"><span style="display:none">English</span></a></li>	
					<li class="lang-es"><a href="http://www.aandbwebdesign.com/roatan/es/octopus-dive-school-staff/" hreflang="es" title="Español" class="qtrans_flag qtrans_flag_es"><span style="display:none">Español</span></a></li>
					<li class="lang-de"><a href="http://www.aandbwebdesign.com/roatan/de/octopus-dive-school-staff/" hreflang="de" title="Deutsch" class="qtrans_flag qtrans_flag_de"><span style="display:none">Deutsch</span></a></li>
				</ul>
				<div class="qtrans_widget_end"></div>
			</li>
		</ul>
		<div class="clear"></div>
	</div>
</div>

 

All I want is for the flags to move down below the FB icon - but even so I've tried floating about everything I can think of, while I got things to move to the right, it won't float this div out of the flow and do what I want.

 

Surely, it's something totally simple I'm missing here....

 

PS - the CSS I've been messing with is at the bottom of the css page under the 'custom header

Edited March 31, 2013 by Andrea

[khanahk]

ul.qtrans_language_chooser {
clear: both;
position: absolute;
top: 95px;
right: 175px;
}

 

does the job. Not sure if absolute positioning is something you want to go for though

Edited March 31, 2013 by khanahk

[Andrea]

It doesn't - I mean it moves the flags, but the water you see above the octopus and under the upper border should not be there. That appeared when I added the flags, which seem to have pushed themselves above the actual header. I don't want that space there.

 

Shouldn't floating the flags remove them from the actual flow of things so they do NOT take up any space - hence they should NOT open this gap.

 

That's what I'm puzzled about and need to fix.

 

But definitely thanks for looking into this for me, this just isn't the solution I need.

[khanahk]

It doesn't - I mean it moves the flags, but the water you see above the octopus and under the upper border should not be there. That appeared when I added the flags, which seem to have pushed themselves above the actual header. I don't want that space there.

 

Shouldn't floating the flags remove them from the actual flow of things so they do NOT take up any space - hence they should NOT open this gap.

 

That's what I'm puzzled about and need to fix.

 

But definitely thanks for looking into this for me, this just isn't the solution I need.

 

Floating the flags should indeed do that (not interfere with the page layout flow). But I even removed the flags <div> altogether, and the gap is still there for me.

 

Ah. The problem seems to be on #slider.

 

Try this

 

#slider {
min-height: 200px;
margin-top: 0px;
position: relative;
bottom: 28px;
}

Edited March 31, 2013 by khanahk

[falkencreative]

Personally, you need to recode your header area's CSS. It's a bit of a mess -- lots of set heights and widths, lots of floats, lots of negative margins (which are usually a sign that something strange is being done). Fixing things with more position:relative and negative margins isn't a good way to do it -- you'll just end up being more confused if you ever need to make any additional changes in the future.

 

In your case, #branding is floated left, but has a set width (100%) and height. This means that any elements that are floated have to be positioned below the #branding area. You're trying to use negative margins to adjust for that fact, but it's a bit of a mess and I think it's more confusing than necessary, causing weird gaps.

 

Personally, I think you can make things a lot simpler if you set a height on <header>, and remove any height or negative margins from #branding or any other element within <header>. Then, set the widths on both #branding and #social so they can both fit on the same line, with #branding floated left and #social floated right. Then adjust positioning as necessary.

 

Also, if you are wanting to position the site tagline over the logo, I'd highly suggest doing that using absolute positioning rather than your current negative margins.

[Andrea]

Thank Ben, for the explanation.

I guess that's what happens when using templates and someone else's themes. Looks like I'll have to tackle some major realignment.

[khanahk]

Granted, quick fixes are generally a no-no. But if you already have a large mess of CSS rules and other-folks' code and you haven't got the time to overhaul the site's design then it can be better for simplicity's sake... especially when editing a site that you didn't create originally!

 

Therein lies the "get the job done right, the first time" philosophy. Haste makes waste.

[falkencreative]

Granted, quick fixes are generally a no-no. But if you already have a large mess of CSS rules and other-folks' code and you haven't got the time to overhaul the site's design then it can be better for simplicity's sake... especially when editing a site that you didn't create originally!

 

Therein lies the "get the job done right, the first time" philosophy. Haste makes waste.

Sure. But when you are talking about 15 minutes of work adjusting some CSS properties, especially when there are options like Firebug or the Chrome Web Inspector to make these sort of changes easy, then you may as well do it.

[grabenair]

I would take all that stuff and put it in one div then use margins.

[Andrea]

I would all kinds of things, but since this was created by someone else and is very camouflagedly intertwined, I rather tread lightly - no telling what all will fall apart due to one minor change. For now, it's doing what I need it to do. Maybe some day, when all else is done... what the heck is the German word for "lettuce sea slug" for example??? I'll stretch beyond my boundaries and see what happens when I do 'X'.

 

CSS can be a scary world to live in.

[grabenair]

I know what you mean. I have used templates and changed stuff with out going and checking to see what happens to my changes soon enough. Then all heck breaks out.

 

Just for fun the German word for lettuce sea slug is salat maeeresschnecke. And the scientific name is tridachia crispata. I started spring break this week and am to old to go party so looked this up instead.

[Andrea]

Just for fun the German word for lettuce sea slug is salat maeeresschnecke. And the scientific name is tridachia crispata.

 

It's not that easy - just because the words 'lettuce' 'sea' and 'slug' translate to Salatmeerschnecke, the animal itself is called Blumenkohl Sackzungenschnecke which actually would translate back to 'Cauliflower-Bag-Tongue-Snail. {the underline won't come off}