ロゴとグローバルナビを横一列に並べたい

###前提・実現したいこと
ロゴとグローバルナビを横一列に並べた上で、
ロゴを左端、グローバルナビを右端に配置し、
かつそれらを下端で揃えたい。

意味が分かるでしょうか。
例えば、以下のサイトのようなイメージです。
https://www.sakurajyuji.or.jp/

###発生している問題・エラーメッセージ(1/2)
以下のような記述で、ロゴとグローバルナビを下端で揃えることまではできました。

###該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6<link rel="stylesheet" href="css/reset.css">
7<link rel="stylesheet" href="css/style.css">
8</head>
9
10<body>
11	<div class="wrap">
12		<h1 class="logo">LOGO</h1>
13		<div class="global-navi">
14			<ul>
15				<li>CCC</li>
16				<li>BBB</li>
17				<li>AAA</li>
18			</ul>
19		</div>
20	</div>
21</body>
22</html>

CSS
1style.css
2
3@charset "utf-8";
4/* CSS Document */
5
6body {width: 1000px;}
7.logo {font-size: 36px;}
8.global-navi , .logo {
9	border: 1px solid #000000;
10	display: inline-block;
11	vertical-align:  bottom;
12}
13.global-navi ul {
14	list-style: none;
15	overflow: hidden;
16}
17.global-navi ul li {
18

css
1reset.css
2/**
3 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
4 * Richard Clark (http://richclarkdesign.com)
5 * http://cssreset.com
6 */
7html, body, div, span, object, iframe,
8h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9abbr, address, cite, code,
10del, dfn, em, img, ins, kbd, q, samp,
11small, strong, sub, sup, var,
12b, i,
13dl, dt, dd, ol, ul, li,
14fieldset, form, label, legend,
15table, caption, tbody, tfoot, thead, tr, th, td,
16article, aside, canvas, details, figcaption, figure,
17footer, header, hgroup, menu, nav, section, summary,
18time, mark, audio, video {
19    margin:0;
20    padding:0;
21    border:0;
22    outline:0;
23    font-size:100%;
24    vertical-align:baseline;
25    background:transparent;
26}
27body {
28    line-height:1;
29}
30article,aside,details,figcaption,figure,
31footer,header,hgroup,menu,nav,section {
32    display:block;
33}
34nav ul {
35    list-style:none;
36}
37blockquote, q {
38    quotes:none;
39}
40blockquote:before, blockquote:after,
41q:before, q:after {
42    content:'';
43    content:none;
44}
45a {
46    margin:0;
47    padding:0;
48    font-size:100%;
49    vertical-align:baseline;
50    background:transparent;
51}
52/* change colours to suit your needs */
53ins {
54    background-color:#ff9;
55    color:#000;
56    text-decoration:none;
57}
58/* change colours to suit your needs */
59mark {
60    background-color:#ff9;
61    color:#000;
62    font-style:italic;
63    font-weight:bold;
64}
65del {
66    text-decoration: line-through;
67}
68abbr[title], dfn[title] {
69    border-bottom:1px dotted;
70    cursor:help;
71}
72table {
73    border-collapse:collapse;
74    border-spacing:0;
75}
76/* change border colour to suit your needs */
77hr {
78    display:block;
79    height:1px;
80    border:0;
81    border-top:1px solid #cccccc;
82    margin:1em 0;
83    padding:0;
84}
85input, select {
86    vertical-align:middle;
87}
88

###発生している問題・エラーメッセージ(2/2)
しかし、これを左端と右端に配置するために、
以下のようにfloatを加えると、inline-boxの設定が効かなくなるのか、
グローバルナビが上にあがってしまいます。

どうすれば、実現できるでしょうか。
ご教授いただければと思います。

###該当のソースコード

CSS
1style.css
2
3@charset "utf-8";
4/* CSS Document */
5
6body {width: 1000px;}
7.logo {font-size: 36px;}
8/* 追加した部分(ここから) */
9.wrap{overflow: hidden;}
10.logo {float: left;}
11.global-navi {float: right;}
12/* 追加した部分(ここまで) */
13.global-navi , .logo {
14	border: 1px solid #000000;
15	display: inline-block;
16	vertical-align:  bottom;
17}
18.global-navi ul {
19	list-style: none;
20	overflow: hidden;
21}
22.global-navi ul li {
23

行動規範の内容に同意します

回答1件

ベストアンサー

簡単に思いつくのは…

table/table-cell の組み合わせ
position での指定
flex-box を利用

の3つでしょうか。
今のソースを変更しないでも可能な、position が一番楽だと思います。

CSS
1#header {
2  position:relative;
3  width:100%;
4  height:auto;
5}
6#header h1 {
7  position:absolute;
8  left:0;
9  bottom:0;
10  width:auto;
11}
12#header ul {
13  position:absolute;
14  right:0;
15  bottom:0;
16  width:auto;
17}