How do I make this nested div to show up on top right corner and make text wrap around it?


Tags: html,css

Problem :

I am trying to set a nested div on the top right of its parent div and text to wrap around the nested div.

I really should understand how position, float and display work together.

Here is my sample:

CSS

.parentDiv {
    width:295px;
    border:1px solid black;
}
.parentDiv .childDiv1 {
    width:36px;
    border:1px solid black;
    float:left;
}
.parentDiv .childDiv2 {
    width:210px;
    border:1px solid black;
    float:left;
}
.parentDiv .childDiv3 {
    width:44px;
    right:0px;
    top:0px;
    border:1px solid gray;
    position:relative;
    float:right;
}

HTML

<div class="parentDiv">
    <div class="childDiv1">
        <img alt="adfasf" src="../img/image.gif">
    </div>
    <div class="childDiv2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        <div class="childDiv3"> <a href="#" title="safasf" id="adasf"><span>search here</span></a>

        </div>
    </div>
</div>

Live jsfiddle



Solution :

Like this: jsFiddle. Make the child div appear first as a child of childDiv2 and keep the CSS as-is.


    CSS Howto..

    How can I exclude some images from being preloaded

    How can I change the image folder name in css files dynamically?

    How to Access local CSS file from within Alfresco Javascript?

    how to achieve this effect with css html?

    CSS: how to create a fixed top header with a fixed width

    How to theorize about this phenomenon about
    tag

    how to make a navigation 100% width within an header wrapper

    How to center a IMG tag horizontaly and vertically using html and css in ie7?

    How can I make this work?

    HTML code to show splitted data_frame in one html page using python

    How do I reference this textarea and checkbox?

    How to add load more button for a HTML/CSS page?

    How to remove critical CSS from the main.css file

    Css. How to move div with fixed position up if it overlays footer

    How do I maintain modularity with mixins?

    how can the value of an href attribute be changed using javascript/css?

    How to set table cell padding from CSS?

    How to remove line break after DIV in CSS

    How to detect which part of page user is currently on, like on this page?

    How to force a TD to be a certain height with CSS?

    How to center CSS Navigation Menu

    CSS accordion menu - How to expand and hyperlink

    How do I get a dropdown choice to show up on the left of an entry on this To-Do list?

    How to add CSS for specific pages in RefineryCMS?

    How do I append jumping dots to a text in html and css

    How to only get the 'box-shadow-right' that cuts off when you reach a border?

    How to place rectangle inside image and make hover animation for it in CSS?

    How to link my HTML file to my CSS file [closed]

    How can I use jquery to hide a drop down menu when the user clicks outside of the menu area?

    jQuery - How to adjust CSS filter (blur)?