How to fix this css float problem?


Tags: css

Problem :

css noob here, struggling to figure out how to make the float:left work. The page that I am trying to fix is here: http://www.yshara.com

1) I would like to align the links: twitter and website on that page to the right of the profile page.

2) How to align the heading 'Joe Johnson' etc with the image-container top.

thanks for your help.



Solution :

Apply clearfix to the parent div as opposed to placing one in the middle:

<div id="profile-frame" class="clearfix">
    <div class="left">

        <div class="photo">
            <img width="103" height="103" alt="TestProfile" src="../images/test_profile_1.jpg">
        </div>
        <div class="profile-details">
            <div class="header">
                <h1>Joe Johnson, Basketball &amp; Atlanta</h1>
            </div>

            <div class="desc">
                Hi my name is Joe Johnson, I am 26 years old and live in Atlanta. I enjoy basketball and twitter. I will be achieving much bigger things once I get better teammates.
            </div>
        </div>
    </div>

    <div class="right">
        <div class="links">
            <ul>
                <li><a href="http://www.atlantahawks.com/">website</a></li>
                <li><a href="http://twitter.com/JoeJoe2ATL">twitter</a></li>
            </ul>
        </div>
    </div>
</div>

EDIT: sorry, didn'nt read your second question. The thing pulling your title down is the margin on <h1> tags. Add this in your CSS:

 .header h1{
    margin-top:0px;
}

    CSS Howto..

    How to vertically align inline-block divs without vertical spaces using CSS?

    How to create a css file in eclipse with e(fx)clipse plug in

    How do I change the admin header color in Magento?

    CSS - How to make a 100% height div not overlap it's contents when window is resized

    how to dynamically remove css in Angular?

    How to scroll a div inside another div?

    CSS causing red frame around lightbox image - how to remove?

    How to target images with dynamically generated ids with CSS

    How to apply a CSS class to all instances of a control in ASP.NET

    How to use CSS to align a custom check box with its label?

    How to make CSS hover effect persist after clicking Bootstrap button

    How to use CSS spinner in Angular2 while loading asynchronous list?

    In IE6, how to implement a:hover?

    How to add Video from project directory in the background of Div

    How to use div to emulate border for