Left-floated image drops to below side menu... can't figure out why...

8 replies [Last post]

Wed, 2010-07-14 16:18

cosmocanuck

Offline

Regular

Timezone: GMT-7

Joined: 2007-10-08

Posts: 50

Points: 25

Hi all!

I have a classic two-column layout on this site (link is to the post with the problem I'm having):

http://cityoperavancouver.com/archives/1560

I'm discovering that when I apply a left float to an image in the content area, it drops down to below the bottom of the left-side menu. In this case, it's the "Give Art to Make Music" graphic of the painting on a music stand that's having the problem.

Below is the relevant (I think) CSS I'm using for the site structure, side menu, and left-floated images. I've tried quite a few things but nothing seems to work. Since text in the right-hand content area stays where it's supposed to and "floats to the top", I'm puzzled that images don't.

Hope you can point me in the right direction - thanks!

Adam

SITE STRUCTURE:

#wrapper {
	background-color: white;
	margin: auto;
	padding: auto;
	width: 700px;
	text-align: left;
}
 
#header {
	text-align: center;
	height: 193px;
	width: 700px;
	margin: 0;
	padding: 0;
}
 
#page {
	float: left;
	background: white url(<a href="http://www.cityoperavancouver.com/wordpress/wp-content/themes/cov/images/bgcols.gif" rel="nofollow">http://www.cityoperavancouver.com/wordpress/wp-content/themes/cov/images/bgcols.gif</a>) left top repeat-y;
	clear: both;
}
 
#content {
	width: 450px;
	margin-left: 238px;
	padding: 25px 0;
}

SIDE MENU:

.sidemenu, .sidemenu li ul{
z-index: 1000;
list-style-type: none;
margin: 0;
padding: 0;
width: 217px; /*WIDTH OF MAIN MENU ITEMS*/
}
 
.sidemenu {
	float: left;
	margin-top: 0;
}
 
.sidemenu li{
position: relative;
}
 
.sidemenu li a {
background: #CCCC99;
border-bottom: 1px dotted black;
font: 14px Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 24px;
color: black;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
 
.sidemenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
 
.sidemenu li ul li{
float: left;
}
 
.sidemenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}
 
.sidemenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(<a href="http://www.cityoperavancouver.com/wordpress/wp-content/themes/cov/images/arrow.gif" rel="nofollow">http://www.cityoperavancouver.com/wordpress/wp-content/themes/cov/images/arrow.gif</a>) no-repeat center right;
}
 
.sidemenu li a:visited, .sidemenu li a:active{
color: black;
}
 
.sidemenu li a:hover, .sidemenu ul li a:hover, .sidemenu li#currentpage a {
background: #996600;
}

LEFT-FLOATED IMAGES:

img.alignleft {
	float: left;
	padding: 0;
	margin: 0;
	display: inline;
	clear: none;
	}

Tags:

Wed, 2010-07-14 16:20

Deuce

Offline

Guru

Timezone: GMT-6

Joined: 2005-11-20

Posts: 4416

Points: 1835

This image

This image -http://cityoperavancouver.com/wordpress/wp-content/uploads/2010/07/art-music-websize.jpg - has a float: left applied to it and it's not below the left column.

Please further explain your issue.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Wed, 2010-07-14 16:59

Ed Seedhouse

Offline

Guru

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3544

Points: 643

Vancouver eh? Is it snowing

Vancouver eh? Is it snowing up there in the far north yet? Here in the southern tropical climes of Victoria the weather is holding up so far.

Ed Seedhouse

Posting Guidelines

High on a hill, in Wrangellia.

Tue, 2010-07-20 17:52

cosmocanuck

Offline

Regular

Timezone: GMT-7

Joined: 2007-10-08

Posts: 50

Points: 25

Hi guys! Sorry not to reply

Hi guys! Sorry not to reply sooner, I managed to not have notifications turned on for this topic! D'OH!

Anyway, to explain further, and add some possibly helpful new discoveries:

The image is supposed to be at the top of the article, on the left side, next to the text. But as you can see, it gets "pushed down" to just below the bottom of the side menu DIV. It's almost like a float drop, but if so, I don't understand why the text is not similarly affected.

If I take the "float:left" attribute off of .sidemenu, then the entire article gets pushed down to the same spot, BUT, the image aligns correctly!

See image of this behaviour:

Hope that extra info is helpful... thanks!
adam

PS - Ed, I have my snow shovel at the ready, but so far, it has not been required... yet.

Tue, 2010-07-20 18:59

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

validate yer code

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Thu, 2010-08-19 22:31

cosmocanuck

Offline

Regular

Timezone: GMT-7

Joined: 2007-10-08

Posts: 50

Points: 25

Validated but still a problem...

Thanks, I have now validated it - mostly by adding ALT tags and closing my DIV's - however the issue persists.

In a seemingly related issue, any image, whether aligned left or right, is pushed down to below the side menu, in this post:

http://cityoperavancouver.com/archives/1606

Something about the side menu seems to be triggering float drop, but I can't for the life of me figure out what...

adam

Thu, 2010-08-19 22:43

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Wrap both #verticalmenu and

Wrap both #verticalmenu and #homelogos in a container element and float that left instead. Then remove the margin-left from #content and instead float it right.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Fri, 2010-08-20 05:49

Hugo

Offline

Moderator

Joined: 2004-06-06

Posts: 15096

Points: 2191

Or put overflow:hidden on

Or put overflow:hidden on .post

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

Fri, 2010-08-20 20:40

cosmocanuck

Offline

Regular

Timezone: GMT-7

Joined: 2007-10-08

Posts: 50

Points: 25

THANK YOU TYSSEN! I went for

THANK YOU TYSSEN! I went for your solution and it worked perfectly.

Still not quite sure what happened there... the menu was set to a precise width yet it was "pushing" the pic down... but not text? Weird.

I guess the left-margin technique, for creating space to the left of the main column for the menu, isn't really the best, or at least not in this situation. At any rate I think I will avoid it in future...

Again many thanks.
Adam

_________________________________________________________________________________________
Please VOTE (and vote again!) for my "Mad Men" Casting Call contest entry. Ends September 6! http://bit.ly/99bVfN

Left-floated image drops to below side menu... can't figure out why...

This image

Vancouver eh? Is it snowing

Hi guys! Sorry not to reply

validate yer code

Validated but still a problem...

Wrap both #verticalmenu and

Or put overflow:hidden on

THANK YOU TYSSEN! I went for

New forum topics

User login

Navigation