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 make custom shape div, or manipulate divs

    CSS, how to put a div inside a div that is responsive?

    How to not send images to mobiles in a semantic manner

    css rules multi class, how to match two out of many

    Dropdown Menu will move all
    Below. How to prevent it?

    CSS : How can I add shadow to a label or box

    How do I prevent text from flowing onto different sections of a page?

    How to display only the first few lines of a div (clamping)?

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    How do you read !important in CSS?

    How to make layout with fixed sized column in Liferay?

    How to remove space between list items in navigation (HTML / CSS)

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

    How are these sites implementing their onhover overlays?

    How to remove curved line in HTML/CSS

    How to :hover one div on two other divs and make it dynamic with JS/JQuery?

    How I can replace an existing html val with a value calculated later using html and/or css?

    Child div's evenly spaced and flushed to side of parent: how to?

    How to align div in body to stay with specific height and width

    How to put logo on navigation bar

    Css styling without !important - how to do this?

    how to relocation dropdownmenu by CSS

    How to add an image to xml sheet using css

    How do I minify CSS and Javascript? [duplicate]

    How to vertically center image and text in a block element? [CSS]

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    How to make children auto fit parent's width only with CSS?

    How to put an image at the left side of text without putting the image into css

    How can I make a CSS glass/blur effect work for an overlay?

    How do I put my index.html in the same folder as my other .html files on github?