Floating css problem [closed]
Question
this is my problem:
http://dl.dropbox.com/u/31659128/buildworx/site-v2/project/index.html
screenshot:
I just can't seem to get this floated right.
header, nav { margin: 0 auto 30px auto; width: 960px; }
header #ip-wrapper { float: right; width: 375px; }
header #ip-wrapper .ip-wrap { background: #636363; background: -webkit-linear-gradient(top, rgba(125, 126, 125, 1) 0%,rgba(58, 58, 58, 1) 100%); margin: 10px 0; border-radius: 20px 5px 5px 20px }
header #ip-wrapper .ip-wrap .ip-name { background: #e5e5e5; background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(229,229,229,1) 100%); display: inline-block; padding: 10px 12px; border-radius: 5px 0 0 5px; margin: 0 10px 0 0 }
Solution
Use float:left on your image.
<img src="images/logo.png" alt="bw" style="float: left;">
Your #ip-wrapper is currently trying to float on the right of something that is an inline object. That's what's causing you problem.
OTHER TIPS
You are using the HTML5 header
tag which older browser will not handle properly, use a <div class="header">
if you want to support older versions. Might wanna lose the nav
and footer
aswell.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow