이글은 어느 분이 질문으로 하신글에 대한 답변 성격이 강합니다.
질문의 요지의 아래와 같습니다.
하나의 div 안에 두개의 div가 존재하고 그중하나는 왼쪽으로 정렬하고 나머지 하나는 오른쪽으로 정렬하는것입니다.

왼쪽으로 정렬하는것은 logo 부분이되고 오른쪽으로 정렬하는 것은 blogMenu 부분이 됩니다.
여기서 logo는 왼쪽으로 blogMenu 부분은 오른쪽으로하고 blogMenu 에서 li는 다시 왼쪽정렬을 해주어야 한다는 점입니다.
질문에 대한 답으로 사진을 올렸었습니다. 참고하세요.

이렇게 말로 하면 이해가 안되니 우선 코드를 보면서 문제를 풀어보도록 하겠습니다.
코드로 보면 아래와 같습니다.
<div id="header">
	<div id="logo">로고부분</div>
	<div id="blogMenu">네비게이션 부분</div>
</div>
 
즉 해더안에 로고부분을 왼쪽으로 네비게이션 부분을 오른쪽으로 사용한다는 것입니다.
근데 이것이 초보분들한테는 무척 어려운 부분입니다.
왜냐 이유는 아래와 같습니다.

  • 왼쪽 오른쪽 정렬하는 float 버그를 해결해야 합니다.
  • 네비게이션 치환자부분(##_blog_menu_##)을 이해해야 합니다.

우선 치환자 부분부터 보겠습니다.
이건 이전에도 적은글입니다. 이글을 안보시고 해결을 해달라고하니 정말 어렵군요.

티스토리 블로그 메뉴부분 살펴보기(1편) => http://demun.tistory.com/1813
메뉴부분 설정 2편 => http://demun.tistory.com/1814

메뉴부분 즉 네비게이션 부분중에서 중요한것은 html 로 삽입할때는 아래처럼 합니다.
<div id="blogMenu">[#\#_blog_menu_##]</div>
하지만 이것이 서버에서 변환되어  html 이 아래처럼 변환된다는 것입니다.
<div id="blogMenu">
	<ul>
		<li class="t_menu_home first">
			<a href="/">home</a>
		</li>
...
		<li class="t_menu_write last">
			<a href="/gateway/entry/post">write</a>
		</li>
	</ul>
</div>

자 이점을 이해한다고 가정하고 이제 출발합니다.
div 안에 두개의 div를 넣고 하나는 왼쪽으로 하나는 오른쪽으로 정렬을 합니다.
즉 아래와 같은 모양이죠.



html 부분은 맨위에 있으니 참고하시고 이제 스타일을 지정해줘야 겠지요.
header 부분은 대략 블로그의 너비만큼 지정해줍니다. 꽉차게.. 너비가 960px 라고 가정하고 절만씩 나눕니다.
#header{
  width:960px;
  height:100px;
}
#logo{
  float:left;
  width:480px;
}
#blogMenu{
  float:right;
  width:480px;
}
자 이런식으로 지정을 해주면 큰 맥락은 끝입니다.
문제는 정확하게 반반씩 나누었을때 웹표준을 지키는 브라우져는 문제가 없는데 ie 는 버그가 있어 밑으로 떨어지는 현상이 일어납니다.
간혹 블로그 스킨을 만지다보면 사이드바 아래로 내려가는 경험을 해보신분들이 있을겁니다. 이것이 바로 그런 증상입니다.

또 한가지 float 된 방향과 margin 방향이 같을경우에도 버그가 있습니다.
이럴때는 float 버그 해결법을 참고하세요.


float 버그를 해결했다고 가정하고 진행합니다.
티스토리에서는 로고를 코딩할때 아래와 같은 형식으로 진행합니다.
<div id="logo">
	<h1><a href="[#\#_blog_link_##]" title="[#\#_title_##]">[#\#_title_##]</a></h1>
</div>

logo 에 float 와 width 를 지정해주었기때문에 #logo a에는 height 도 지정해주면 됩니다.
이경우 글로 표현할경우 배경이나 폰트크기, 스타일 등등을 지정합니다. 여러가지로 설정이 가능합니다.
대충 아래처럼 지정해주면 됩니다.
#logo a{
  height:100px;
  line-height:100px;
  font-size:30px;
}

블로그 메뉴(네비게이션) 부분.
#blogMenu 라는 부분을 float:right 를 해주었기때문에 li 에 다시 float:left 를 해주어야 왼쪽으로 차곡 차곡 정렬이 됩니다.


마찬가지로 li에 float:left 를주지않고 li a 에 float:left 를 주어도 같은 효과가 나타납니다.
이건 스타일의 차이입니다. 만드는사람 맘이죠.
그럼 아래처럼 코드가 추가되어야겠지요.
#blogMenu li{float:left}
중요한것은 끝났고 좀더 설정할부분은 #logo a 부분을 좀더 설정해주면 더 좋은 스타일이 나타납니다.
html 과 css 를 모두 보면 아래와 같습니다.
<div id="header">
	<div id="logo">
		<h1><a href="[#\#_blog_link_##]" title="[#\#_title_##]">[#\#_title_##]</a></h1>
	</div>
	<div id="blogMenu">네비게이션 부분</div>
</div>

#header{width:960px; height:100px}
#logo{float:left; width:480px}
#logo a{height:100px; line-height:100px; font-size:30px}
#blogMenu{float:right; width:480px}
#blogMenu li{float:left}
이 부분은 핵심적인 부분만을 설명한것입니다. 
float 버그 부분이나 logo a 부분, blogMenu a 부분등 좀더 스타일을 지정해주거나 html 이 약간 수정될수 있습니다.