CODEWITHSUNDEEP
htmlcsslayout
Wayne Christopher
Wayne Christopher

Reputation: 623

div element with absolute vertical, floating horizontal

What I am trying to do is have a div element at a specific Y location, but floating to the left or the right (so that the other text on the page will flow around it). I can't seem to find the right combination of attributes..

position:relative;float:right works but the div is at the top of the containing element

position:relative;top:1in;float:right moves the div down, but the area that the text flows around is still at the top of the area, not the +1in area

position:absolute disables the float entirely

Here is a simple example:

<div style='position:relative;top:1in;float:right;border:0.1in solid;'>
<p>This is on the right</p>
</div>
<p>This is the text that should flow around the textbox.  Make as long as needed...</p>

What I really want is regions but no browsers really support this yet.

Any ideas? Thanks..

Upvotes: 2

Views: 289

Answers (1)

Alohci
Alohci

Reputation: 83006

If you want to offset a float from the top, with text flowing around it, you have to insert another zero-width float above it to achieve the offset. Like this: http://jsfiddle.net/YKYmj/7/

#floater {
    float: right;
    clear: right;    
    border: 1px solid gray;
    background-color: #ccc;
    margin: 10px;
    width: 100px;
    height: 100px;
}

.wrapper:before {
    content: '';
    float:right;
    height:1in;
} 


<div class="wrapper">
    <div id="floater">In offset, floated box</div>
    <p>Lorem ipsum dolor sit amet, consectetur  ...
</div>

Upvotes: 2

Related Questions