divisionkiller
Reputation: 316
Floating elements issue
I read few articles about floating elements but I have some issue to understand how i have to float the following part of my project. Can you give me advice on how to structure the code or some explanation ? I have UL with few LI items and inside my LI items I have A tag + Span with class and I am trying to float the A tag to the left and the span to the right but when i float the span to the right it's going behind the content.. I have no idea where actually the span is "hiding from me" ... The arrow should be floated at the end of the .test li div not outside
.widgets { list-style: none; float: left; }
.widget-title { background: url(../images/sidebar.jpg) 0 0 no-repeat; width: 189px; clear: both; }
.widget-title h3 { font-family: "Georgia", serif; font-size: 14px; font-weight: normal; color: #333329; text-transform: uppercase; padding: 2px 10px; }
.widget { margin-bottom: 39px; }
.widget ul { list-style: none; }
.widget ul { line-height: 29px; margin-top: 1px; }
.widget ul li a { position: relative; text-decoration: none; font-size: 12px; color: #666651; padding: 0 10px 0 11px; }
.widget ul li a:after { content: ''; position: absolute; top: 25px; left: 10px; width: 171px; height: 1px; box-shadow: 0px 1px 1px #ededde, 0px 1px 1px #ededde; opacity: 0.5; }
.widget ul li a:hover { color: #46462b; }
.test { overflow: hidden; }
.test ul { float: right; }
.btn-arrow { background: url(https://s12.postimg.org/9olm50ogt/sidebar_arrow.png) 0 0 no-repeat; width: 11px; padding: 0 8px; float: right; }<li class="widget">
<div class="widget-title">
<h3>categories</h3>
</div><!-- widget-title -->
<ul class="test">
<li><a href="#">Category Title</a><span class="btn-arrow"></span></li>
<li><a href="#">Second Category</a><span class="btn-arrow"></span></li>
<li><a href="#">Placeholder Three</a><span class="btn-arrow"></span></li>
<li><a href="#">Fourth Title</a><span class="btn-arrow"></span></li>
<li><a href="#">Category Five</a><span class="btn-arrow"></span></li>
<li><a href="#">Sixth Category</a><span class="btn-arrow"></span></li>
<li><a href="#">Placeholder Seven</a><span class="btn-arrow"></span></li>
<li><a href="#">Category Eight</a><span class="btn-arrow"></span></li>
<li><a href="#">Nineth Title</a><span class="btn-arrow"></span></li>
<li><a href="#">Placeholder Ten</a><span class="btn-arrow"></span></li>
</ul>
</li><!-- widget -->Upvotes: 1
Views: 49
Answers (1)
Victor Camargo
Reputation: 364
Since you used an image as the background, the element doesn't know what height to go, so getting 0. So if you put height: 14px in .btn-arrow, it should work. See the code below:
.widgets { list-style: none; float: left; }
.widget-title { background: url(../images/sidebar.jpg) 0 0 no-repeat; width: 189px; clear: both; }
.widget-title h3 { font-family: "Georgia", serif; font-size: 14px; font-weight: normal; color: #333329; text-transform: uppercase; padding: 2px 10px; }
.widget { margin-bottom: 39px; }
.widget ul { list-style: none; }
.widget ul { line-height: 29px; margin-top: 1px; }
.widget ul li a { position: relative; text-decoration: none; font-size: 12px; color: #666651; padding: 0 10px 0 11px; }
.widget ul li a:after { content: ''; position: absolute; top: 25px; left: 10px; width: 171px; height: 1px; box-shadow: 0px 1px 1px #ededde, 0px 1px 1px #ededde; opacity: 0.5; }
.widget ul li a:hover { color: #46462b; }
.test { overflow: hidden; }
.test ul { float: right; }
.btn-arrow { background: url(https://s12.postimg.org/9olm50ogt/sidebar_arrow.png) 0 0 no-repeat; width: 11px; padding: 0 8px; float: right; height: 14px; }<li class="widget">
<div class="widget-title">
<h3>categories</h3>
</div><!-- widget-title -->
<ul class="test">
<li><a href="#">Category Title</a><span class="btn-arrow"></span></li>
<li><a href="#">Second Category</a><span class="btn-arrow"></span></li>
<li><a href="#">Placeholder Three</a><span class="btn-arrow"></span></li>
<li><a href="#">Fourth Title</a><span class="btn-arrow"></span></li>
<li><a href="#">Category Five</a><span class="btn-arrow"></span></li>
<li><a href="#">Sixth Category</a><span class="btn-arrow"></span></li>
<li><a href="#">Placeholder Seven</a><span class="btn-arrow"></span></li>
<li><a href="#">Category Eight</a><span class="btn-arrow"></span></li>
<li><a href="#">Nineth Title</a><span class="btn-arrow"></span></li>
<li><a href="#">Placeholder Ten</a><span class="btn-arrow"></span></li>
</ul>
</li><!-- widget -->Upvotes: 1