suMi
suMi

Reputation: 1546

How to float element next to line?

hei, I am looking to achieve something like this using html/css: this is what I'm trying to do In my case the "See chapter..." part should float on the right side of the text.

I thought I set a certain width for the normal text and then float the reference on the right side of it: like this:

HTML:

<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ‣3, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
<div class="crossRef">see chapter bla</div>

CSS:

p{
    width: 300px;
    float: left;
}
.crossRef{
    width: 50px;
    float: left;
}

Here is an js fiddle that shows what I thought: https://jsfiddle.net/vbr3bL46/ But this apparently doesn't work that easily. The cross ref now is always at the top of this element, not where it actually is in text... does anyone have an idea how to achieve it?

Upvotes: 0

Views: 59

Answers (4)

Ayabonga Qwabi
Ayabonga Qwabi

Reputation: 316

Try changing the display and adding a margin on top

p{
   width: 300px;
   float:left;    
}
.crossRef{
   margin-top:20px;
   width: 50px;
   display:inline-block;
}

Upvotes: 0

Matt Whiteley
Matt Whiteley

Reputation: 476

UPDATED FIDDLE - https://jsfiddle.net/vbr3bL46/8/

Doing it this way allows you to put the chapters in line with the citations. Basically the <p> has a 35% padding to the right, then each citation has a negative right margin of 35% so it moves it, in-line, to the empty space on the right.

HTML:

<div class="row">
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem 5 <span class="ref">see chapter 5</span> ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem 7 <span class="ref">see chapter 7</span>ipsumLorem ipsumLorem ipsumLorem ipsum</p>
</div>

CSS:

.row {
    float: left;
    width: 100%;
}
.row p {
    float: left;
    width: 100%;
    padding-right: 35%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.row .ref {
    float: right;
    margin-right: -35%;
}

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

You need to NOT give float to your main text and put the float element on top of html:

.crossRef{
    width: 50px;
    height:50px;
    background-color:red;
    float: left;
    margin-right:20px;
}

The margin and color are set just for better view.

FIDDLE

EDITED: As it looks I missunderstood the question I give now a more "flexible" answer. Youc an use a container with this properties:

.container {

    display: inline-flex;
  flex-flow: row wrap-reverse;
  justify-content: flex-end;
  align-items: stretch;
  align-content: flex-end;
}

Like this: FIDDLE

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115046

You will probaly have to add a container and adjust the structure slightly.

p {
  width: 300px;
}
.crossRef {
  width: 150px;
  float: left;
  height: 150px;
  margin-right: 1rem;
  text-align: center;
  line-height: 150px;
}
<div>
  <div class="crossRef">see chapter bla</div>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ‣3, Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem
    ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>

</div>

Upvotes: 0

Related Questions