CODEWITHSUNDEEP
htmlcss
Keavon
Keavon

Reputation: 7532

Text aligned to the left and right of a div to move to separate lines both on the left side of the div?

Is there a way with HTML and CSS to make text that floats to the left and right side of a div that will also overflow onto a new line where the right-aligned text stays to the left when it's on the new line? What I am talking about is depicted below where the gray is the div.

If the div is shrunken further, each text should wrap on its own, so it would look like this:

Left Text
Right
Text

and eventually...

Left
Text
Right
Text

All text should be on the left side if they touch; otherwise they should be on the same line left and right.

Upvotes: 0

Views: 5990

Answers (3)

CookiePanda
CookiePanda

Reputation: 47

Say this is the code for your div:

<div>

Text on left

Text on right

</div>

You could give these their on tag like this:

<div>

<left>
Text on left
</left>

<right>
Text on right
</right>

</div>

Then finally, you could add in the css:

<style>
left {
float: left;
}
right {
float: right;
}
</style>

I know I'm late to the party, but I hope this helps!

Upvotes: 0

relic
relic

Reputation: 1704

Not certain I understand what you're saying, but I think MAYBE this is what you want:

<p class="left-text">This is some words</p>
<p class="right-text">This is some other words that wrap because there are too many in here. Holy crap this is a lot of words!!</p>

CSS:

.left-text {
  margin: 0 20px 0 0;
  float: left;
}

Fiddle

Maybe you want to make the left text occupy half the parent instead of just setting a margin spacer?

display: inline-block;
width: 50%;
margin: 0;
float: left;

Fiddle#2

EDIT: ok. Here you go then.

.left-text {
  float: left;
  margin: 0;
}

.right-text {
  display: inline-block;
  float: right;
  margin: 0;
}

Fiddle3

Upvotes: 0

Joe
Joe

Reputation: 8292

DEMO

html

<div class="a">
<div class="c" style="float:left;">Left Text</div>
<div class="c" style="float:right;">Right Text</div>
<div style="clear:both;"></div>
</div>
<div class="b">
<div class="c" style="float:left;">Left Text</div>
<div class="c" style="float:right;">Right Text</div>
<div style="clear:both;"></div>
</div>

css

.a {
    width:200px;
    border:solid 1px #ccc;
}
.b {
    width:100px;
    border:solid 1px #ccc;
}
.c {
    width:100%;
    max-width:100px;
}

Setting a max-width for .c to half of the width of .a will help

BUT this requires fix values for the width. It would be better to use javascript or jquery here to adjust the css according to the width values

Upvotes: 2

Related Questions