Positioning Question...If I can figure this out... :-)

[rockyroad]

Hello, I am trying to adapt J Zeldman's 2 col fluid layout.

I have one positioning question that I am having a mental block on:

Consider the following:

<div id="newmenu">
 <div id="bannerlogoban"></div>
</div>

<!-- Styles -->

#newmenu	{
	background: #006697;
	color: #000;
	border: 0;
	border-bottom: 1px solid #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: left;
	height: 71px;
	}
#bannerlogoban {
	visibility: visible;
	margin: 0;
	padding: 0;
	border: 0;
	width: 574px;
	height: 71px;
	background: url(../images/NewLogo.jpg) no-repeat;
	}

My question is, suppose now I want to have additional elements, text, navigation, whatever, residing inside the #newmenu div... off to the right somewhere... How best to code this?

soemthing like --

<div id="newmenu">
 <div id="bannerlogoban">more stuff here</div>
</div>


or


<div id="newmenu">
 <div id="bannerlogoban">
   <div id="moreStuff>more stuff</div>
 </div>
</div>

how can I style the #moreStuff div to be position correctly -- somewhere to the right of the logo?

I am stumped. Mental block, and a critiical empasse I think. If I can figure this out... I think it will be breakthrough in my CSS understanding

THANKS

RR [yingyang]

 

[Vragabond]

You have three options:

1. Position #bannerlogoban absolutely within #newmenu (remember, newmenu needs to be positioned for that to work -- relatively or absolutely). That will allow other elements to reside anywhere within #bannerlogoban depending on where you want to put them.

2. Use floating. Float #bannerlogoban to left and #moreStuff to the right (or left, providing it is the second element it will follow the floated first.

3. Get rid of #bannerlogoban and put the logo as a non-repeated background image in #newmenu. Control the position of the rest of the elements with padding.

All three solutions are valid and viable. Personally, looking at the code you provided I would go with the third.