CODEWITHSUNDEEP
csshtml
Lacer
Lacer

Reputation: 5968

css - align two divs left and right on same line

please see http://jsfiddle.net/UGmA2/7/ TIA

1 div container 2 divs. Would like to put the second div on the first line but have it all the way to the right.

enter image description here Any help would be appreciated,

<body background-color: #000000;>
    <div id="footer-container" style="width=980px;">
        <div id="div-left">
            <ul id="footer">
                <li id="text_separator"><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 id="div-left">
            <ul id="footer">
                <li id="text_separator"><a href="http://www.stackoverflow.org">Text1</a>
                    <li id="text_separator"><a href="http://www.stackoverflow.org">Text2</a>

                        <li id="text_separator"><a href="http://www.stackoverflow.org">Text3</a>

                            <li id="text_separator"><a href="http://www.stackoverflow.org">Text4</a> 
            </ul>
        </div>
    </div>
</body>

Upvotes: 28

Views: 101622

Answers (4)

xnome
xnome

Reputation: 492

Using same id repeatedly isn't a good idea, i change it all into class

here is the modification

<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

Upvotes: 15

Precious Okwu
Precious Okwu

Reputation: 450

Using the style "float" will demand that you use the style "width" so measure out the width of the container to know the appropriate width to assign to the inner divs

Upvotes: 0

Precious Okwu
Precious Okwu

Reputation: 450

To the first div add a style to it like this <div id="first-div" style="float-left;width:400px>

For the second div like this <div id="second-div" style="float-right;width:400px> hope this helps

Upvotes: 3

otherDewi
otherDewi

Reputation: 1098

change div id to class. you cannot have two ids on the same page. give the divs a width eg width:45% and float these items.

It appears the width of the first div is forcing the second to the line below.

Upvotes: 5

Related Questions