Menu
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.
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> 
337
The style attribute can be used to align html text. Style attributes specify inline styling for an element. The HTML *p style attribute is used with the CSS property text-align for the center, left, and right alignments.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
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
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
