If I use bootstrap, it messes the alignment up on my page. Member names should be appeared right next to icon, but with Bootstrap, they overlap the icon.
How can I fix this?
Also, when the browser window is made smaller, the square line gets messed up too. I want the data to have a border when the window is small.So I don't want it to look like this:
But rather, like this:
If possible I want to have these icon, and name in middle not on the top.DEMO http://jsfiddle.net/sbq7X/HTML\[code\] <div class="store_row"> <div class="store_left"> <div class="store_title">walmart</div> <div class="store_location">Located in California</div> </div> <div class="store_right"> <div class="store_icon"> <img class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon-300x266.jpg" /> </div> <div class="introduction"> <div class="name1">John Tailor</div> <div class="name2">Mike Smith</div> <div class="name3">Jessica Swan</div> </div> </div></div> <div class="store_row"> <div class="store_left"> <div class="store_title">walmart</div> <div class="store_location"><span class='text-error'>Located in California</span></div> </div> <div class="store_right"> <div class="store_icon"> <img class="img-polaroid" src="http://media-cache-ec1.pinterest.com/avatars/walmarthub-1349815045_600.jpg" /> </div> <div class="introduction"> <div class="name1">John Tailor</div> <div class="name2">Mike Smith</div> <div class="name3">Jessica Swan</div> </div> </div>\[/code\]CSS\[code\]div.store_row{ min-width: 300px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px; border:1px solid; display:table;}div.store_left{ width: 300px; display:inline-block; vertical-align:top; }div.store_right{ width: 300px; display:inline-block; vertical-align:top; background-color: #FFFFFF;}div.store_title{ background-color: #000000; color: #FFFFFF; height: 35px; padding:5px;}div.store_location{ height: 35px; border-right:1px solid; background-color: #FFFFFF; padding:5px;}div.store_icon{ width: 70px; height: 70px; display:inline-block;}div.store_icon img{ width:100%; height:100%;}div.introduction{ display:inline-block; vertical-align:top; width:200px; text-align: left;}.... and bootstrap\[/code\]
How can I fix this?