CSS simple concept missing

Place the content link markup before the other (right side stuff) and float it left. To the right side element remove width and just use a left margin slightly greater than left column width.

I want the content link to be on the left side - so does that make a difference?

ok, I'm still not getting it, grrr..

http://pylorns.boldlygoingnowhere.org/settlement/

there is the link where you can see it - here is what i've changed:

#content_top {
width:621px;
height:23px;
background:url(img/content_top.png);
}
#content_link_top {
margin-left:622px;
height:18;
background:url(img/content_link_top.png);
float:left;
}

here is the HTML

The Settlement II Subdivision in Round Rock Texas HOA Website

And is that not what I described? content_links I presume are the links that you want on the left hand side, so you must place them first in the source order of your markup (they seem to still be after) then you float them left, the right side(content_top) is just margined away from the left.

You seem to have margined the links and left them after the content_top

The content top is the content on the left hand side - which is where i want it.

The content link top needs to be on the right hand side. I adjusted what you initially suggested but doesn't seem to work.

here is what it is going to look like:

http://pylorns.boldlygoingnowhere.org/settlement/img/thesettlement_final.jpg

With the margin, you don't float the links. Plus, you left the units off the height, so height is likely ignored making the zero height container 'disappear'.

#content_top {
  float: left;
  width: 621px;
  height: 50px;
  background: yellow url(img/content_top.png) no-repeat;
}

#content_link_top {
  margin-left: 622px;
  height: 50px;
  background: yellow url(img/content_link_top.png) no-repeat;
  }

cheers,

gary

The content link top needs to be on the right hand side

:?

I'm sorry but you're just confusing the heck out of me , you must describe and name things very clearly, when you're referring to links then one assumes an identifier with the word links in is in fact the one that is.... anyway I'm sure Gary has straightened it out

ok, well there was part of my dumb mistake - leaving the units off - that kept the image from not being displayed correctly I think. Thanks.
here is what I have done now - i've made it a bit more understandable with the nameing.

/* The area in question */ #content_left_top { width:619px; height:23px; background:url(img/content_top.png); clear:left; }

#content_right_nav_box_top {
margin-left:620px;
height:18px;
background:url(img/content_link_top.png);
}
/* end area in question */

Now it displays the image - but its still off.. is this unit problem or because my margin is too long? See below link. http://pylorns.boldlygoingnowhere.org/settlement/

hmm, this is bugging the heck out of me. I was thinking this was something simple that I was missing?

Why clear? What happened to float?

/* The area in question */
#content_left_top {
width:619px;
height:23px;
background:url(img/content_top.png);
clear:left;
}

And the background image needs to be no-repeat, as I showed you. Else you will have a nasty surprise when you add content.

cheers,

gary

When I did the float, the whole thing (wrapper, everything shifted to the left and the nav bar disapeared.) - the clear doesnt seem to work.

Here is a pic with the float.
http://pylorns.boldlygoingnowhere.org/settlement/settlement2.png

And here is a pic with no float, no clear or if i leave the clear it doesnt matter.

http://pylorns.boldlygoingnowhere.org/settlement/settlement3.png

I made this even simpler, got rid of the images - it still displays on the next line instead of inline.

/* The area in question */ #content_left_top { width:600px; height:23px; background:green;

}

#content_right_nav_box_top {
margin-left:600px;
height:23px;
background:yellow;

}
/* end area in question */

cheers,

gary

:shrug:

nope, i've gotten rid of the backgrounds to make it simpler thinking somehting was going on with my images...

body { font-family: "Trebuchet MS", Arial, sans-serif, Verdana; font-size: 10px; font-style: normal; text-decoration: none; background-image: url(img/background.jpg); background-repeat: repeat; margin: 0 0 0 0; }

#wrapper {
width:800px;
height:auto;

}
#top_banner {
width:800px;
height:23px;
background:green;
}
#top_nav {
width:800px;
height:44px;
}

/* The area in question */
#content_left_top {
width:600px;
height:23px;
background:green;
clear:left;
}

#content_right_nav_box_top {
margin-left:600px;
height:23px;
background:yellow;

}
/* end area in question */

HTML

The Settlement II Subdivision in Round Rock Texas HOA Website

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Screenshot of what its doing:
http://pylorns.boldlygoingnowhere.org/settlement/settlementnowork.jpg

When someone gives you a suggestion, apply it exactly. Don't try to second guess or get ahead of the step. If the suggested code doesn't work, upload/post your new page with the exact changes. Clearly describe the wrongness. "It doesn't work" is not a problem description. There may be something as simple as a typo (by you or your respondent), or another issue that can be cleared up if only we can see the code.

You can be sure that any suggestion I make has been tested in your page, and was found to work, or it is a common issue with a pat fix. If not, I will clearly state that it is not tested.

Now, go back to the step where I gave you some changes and plug them in.

cheers,

gary

You can be sure that any suggestion I make has been tested in your page, and was found to work, or it is a common issue with a pat fix. If not, I will clearly state that it is not tested.

Now, go back to the step where I gave you some changes and plug them in.

cheers,

gary

Gary, I'm sorry I think I've confused everyone here including myself. I was previously trying to simpliy it all. So ive gone back to the begining where I first posted, used the same code - and then took what you suggested and applied it:

CSS

body {
font-family: "Trebuchet MS", Arial, sans-serif, Verdana;
font-size: 10px;
font-style: normal;
text-decoration: none;
background-image: url(img/background.jpg);
background-repeat: repeat;
margin: 0 0 0 0;
}

#wrapper {
width:887px;
height:auto;
margin-left:10%;
margin-right:10%;
}
#top_banner {
width:887px;
height:188px;
background:url(img/top_banner.png) no-repeat;
}

#top_nav {
width:887px;
height:44px;
}
/* content box on the left side */
/* gary suggested not using floats since its margin, but on another post there was a float here */
/* I've left it out */
#content_top {
width:621px;
height:50px;
background:yellow url(img/content_top.png) no-repeat;

}

/* this is the navigation on the right side*/

#content_link_top {
margin-left:622px;
height:50px;
background:yellow url(img/content_link_top.png) no-repeat;
}

HTML

The Settlement II Subdivision in Round Rock Texas HOA Website

As you can see I ran through and fixed my typo where I missed the units (px) on the height. I also left out the float as you suggested since its not needed with a margin. Here is where I'm confused. I know I'm missing something really dumb and its my fault, this is what I'm trying to learn so I don't have to keep asking stupid questions. In applying your initial suggestions I am back to square one almost - what displays on my end is the navigation bar that is on the right has dropped to the next line.

I didn't say to rid yourself of the float globally, only on that right column.

#content_top {
  float: left;
  width: 621px;
  height: 50px;
  background: yellow url(img/content_top.png) no-repeat;
}

#content_link_top {
  margin-left: 622px;
  height: 50px;
  background: yellow url(img/content_link_top.png) no-repeat;
  }

Use these sets as direct replacements for what you have.

cheers,

gary

That was it - it displays correctly in ie, but not correctly in dreamweaver, which doesn't make sense.

Why does DW's faulty behavior matter? It's not a browser.

cheers,

gary

It makes perfect sense if you don't let yourself be fooled by the claims of someone who wants to separate you from your money and pay attention instead to the actual facts. Dreamweaver is lousy at rendering html and CSS, it's so bad it's even worse than Internet Explorer, which is some bad. That's a fact.

Oh for the love of... You mean to say all this odd confusion was due to flipping DW, please don't bring code editors problems into the mix, especially DW ones, all we are ever interested in is true browser rendition not some facsimile.

So I for one am assuming that you have now got your head around what we have been trying to impart about float columns and that we can mark this thread as resolved?

I'm a Dreamweaver user. I only believe what I see on browsers, not on DW8. I hope that DW CS3 have better CSS rendering.

Tip for any DW users out there: Believe what you see on browsers, not on your own DWs.

So am I, and your advice is good.

cheers,

gary

True. I went back and figured out what was wrong with dreamweaver, my image sizes and div sizes were wrong. The browsers displayed them correctly but not the dreamweaver previewer.

yes, Thanks to all for the advice. I've opened up a whole 'nother can of worms as i've changed how I'm laying it out again. I'm searching around first before asking though.