HTML/CSS: How can I float the 'a href' elements to the left without them leaving the div element that they are inside in?


Tags: html,css

Problem :

I have the following code for demonstration:

<html>
    <head>
        <style type="text/css">
            a{
              display:block;
              float:left;
            }
            #linkDiv{
                border-style:solid;
            }
        </style>
    </head>
    <body>
        <div id="linkDiv">
            <a href="">test</a>
            <a href="">test</a>
            <a href="">test</a>
        </div>
    </body>
</html>

I want my links to be blocks and also each of them to be next to the other. Without float:left this is what I get:

enter image description here

However when I use float:left this is the result:

enter image description here

thanks in advance



Solution :

You need a "clearfix" on the parent element:

overflow: hidden;

Or

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

http://nicolasgallagher.com/micro-clearfix-hack/


    CSS Howto..

    How to add a css transition color change for a link/div background

    How to give cross browser transparency to element's background only?

    How to add + and - to my menu tabs [closed]

    How to get rid of the white vertical stroke after every repeating background image done with repeat-x value in CSS?

    How to reverse z-index on stacked divs

    How to access element inside div in jquery and make exanding div transparent

    How to position the sharing buttons on upper-left corner of the game and not the view?

    How to style a button's font in CSS?

    CSS position: absolute - understanding how to center text inside a div box

    how to make background css url dynamic using jquery

    how to change element css class runtime using javascript

    How to use 100% CSS background-image with scrolling content?

    How to set a css class to an array of tags on mouse hover in Javascript?

    How to make elliptical inner shadow with CSS?

    how to apply ellipse effect in which contain space in string?

    How to refer to an id with special characters in CSS

    How to identify device to make separate css for iPad and Galaxy Tab?

    How to deselect a table's head and certain tds with css

    How to create CSS for an existing web application that now is used in a Kiosk with touch screen

    How to set css to a specific selector using jQuery

    How do you determine whether a CSS property requires browser specific prefixes?

    How to write a more specific css

    How to change text in the same area when hover over images with CSS?

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

    How to reapply .css file after UpdatePanel asynchronous call completed

    How to change the font size in table cells according to cells content?

    How to fill columns with images

    How to change CSS background-position for the X axis only? [duplicate]

    How do I integrate a jQuery script in to my html file?

    How to bound CSS3 animation to class