Css - выровнять два div слева и справа на одной строке

1 контейнер div 2 divs. Хотелось бы поместить второй div в первую строку, но все это вправо.

Любая помощь будет оценена,

<body background-color: #000000;>
    <div id="footer-container" style="width=980px;">
        <div id="div-left">
            <ul id="footer">
                <li id="text_separator"><a href="#" onclick="location.href='http://www.stackoverflow.org'; return false;">Text</a>

                </li>
                <li><a href="#" onclick="location.href='http://www.stackoverflow.org/about'; return false;"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
                <li><a href="#" onclick="location.href='http://www.stackoverflow.org/about'; return false;"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
                <li><a href="#" onclick="location.href='http://www.stackoverflow.org/about'; return false;"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
                <li><a href="#" onclick="location.href='http://www.stackoverflow.org/about'; return false;"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>

                </li>
            </ul>
        </div>
        <div id="div-left">
            <ul id="footer">
                <li id="text_separator"><a href="#" onclick="location.href='http://www.stackoverflow.org'; return false;">Text1</a>
                    <li id="text_separator"><a href="#" onclick="location.href='http://www.stackoverflow.org'; return false;">Text2</a>

                        <li id="text_separator"><a href="#" onclick="location.href='http://www.stackoverflow.org'; return false;">Text3</a>

                            <li id="text_separator"><a href="#" onclick="location.href='http://www.stackoverflow.org'; return false;">Text4</a> 
            </ul>
        </div>
    </div>
</body>

Ответы

Ответ 1

Повторное использование одного и того же id - это не очень хорошая идея, я все это меняю на class

здесь есть модификация

<body >
  <div class="footer-container">
    <div class="div-left">
      <ul class="footer">
        <li><a href="http://www.stackoverflow.org">Text</a>
        </li>
        <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
        <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
        <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
        <li><a href="http://www.stackoverflow.org/about"><img src="http://jsfiddle.net/img/logo.png" width="35" height="30" border="1"/></a>
        </li>
      </ul>
    </div>
    <div class="div-right">
      <ul class="footer">
        <li><a href="http://www.stackoverflow.org">Text1</a></li>
        <li><a href="http://www.stackoverflow.org">Text2</a></li>
        <li><a href="http://www.stackoverflow.org">Text3</a></li>
        <li><a href="http://www.stackflow.org">Text4</a></li>
       </ul>
     </div>
   </div>
</body>

CSS

body{
    background-color: #000000;
}
.div-left{
    float:left;
    padding-left:10px;
}
.div-right{
    float:right;
    padding-right:10px;
}
.footer-container{
    height:40px;
    max-width:980px;
    border:1px solid salmon;
    padding-top:5px;
}
.footer {
    height:30px;
    line-height:30px;
    border:solid 1px #E5E5E5;
}
.footer li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}
.footer a {
    text-decoration:none;
    color:#0088CC;
}
.footer li:nth-child(1) {
    text-decoration:none;
    height:30px;
    display:block;
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png');
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
}
ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

LIVE DEMO

Ответ 2

изменить div id на класс. вы не можете иметь две идентификаторы на одной странице. дайте divs ширину, например width:45%, и поплавьте эти предметы.

Похоже, что ширина первого div заставляет вторую строку ниже.

Ответ 3

В первый div добавьте стиль к нему, как этот <div id="first-div" style="float-left;width:400px>

Для второго div, подобного этому <div id="second-div" style="float-right;width:400px>, надеюсь, что это поможет

Ответ 4

Использование стиля "float" потребует, чтобы вы использовали стиль "width", чтобы измерить ширину контейнера, чтобы узнать соответствующую ширину для назначения внутренним divs