I am trying to align a text to the right but when the text is to long, it should make a line break and align it to the left of the text. It's hard for me to explain, that's why I have an image of what I'm trying to do:
As you can see, the text is aligned to the right of this small div. But when a line break occurs, it is logically also aligned to the right.
I tried to wrap it in a div, where the parent is aligned to the right and the child with the text to the left. The thing is I get a result like this:
which is still wrong, since the text isn't aligned to the right then, when it breaks. Is there a way to do that?
And I don't wanna have a max width or something for the text, since if there is enough space, it should take the whole width that is available for a line.
body {
background: #cccccc;
}
.parentDiv {
width: 100px;
height: 100px;
background-color: white;
display: flex;
flex-direction: column;
}
.alignRight {
margin-left: auto;
}
.alignLeft {
text-align: left;
padding-bottom: 5px;
}
<div class="parentDiv">
<div class="alignRight">
<div class="alignLeft">
bla
</div>
</div>
<div class="alignRight">
<div class="alignLeft">
testing cool text
</div>
</div>
</div>
First Answer:
p.para{
text-indent: 30px;
padding-left:15px;
}
<p class="para">
Hello this is my text. This story is awesome. hello this is my text. This story is awesome. Hello this is my text. This story is awesome. Hello this is my text. This story is awesome. Hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome
</p>
Edit:
Or break your text like this..where you can play with first line and rest para anyhow you like.
div.para>p:first-child{
text-align:right;
margin-bottom:0px;
}
div.para>p:last-child{
margin-top:0px;
text-align:left;
padding-left:10px;
}
<div class="para">
<p>This is first line</p>
<p>
Rest of Lines... this is my text. This story is awesome. hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This
story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome.hello this is my text. This story is awesome
</p>
</div>
Even if this is not your intention then look at
HTML/CSS: how to put text both right and left aligned in a paragraph
You may need padding.
body {
background: #cccccc;
}
.parentDiv {
width: 200px;
height: 100px;
background-color: white;
display: flex;
flex-direction: column;
}
.alignRight {
padding-right:50px;
padding-left:50px;
margin-left: auto;
}
.alignLeft {
text-align: left;
padding-bottom: 5px;
}
<div class="parentDiv">
<div class="alignRight">
<div class="alignLeft">
bla
</div>
</div>
<div class="alignRight">
<div class="alignLeft">
testing cool text
</div>
</div>
</div>
I hope that helps! This is a very, very, very late answer.
Tip: Use the padding to help you get what you want.
Related
This is a bit fiddly, but I'll try to explain it.
What I'm trying to get working with CSS is:
Two divs at the top of the page ("A" and "B"), side-by-side with a fixed width of combined 400px (if the window is too narrow to see both, then a scrollbar should appear, I do NOT want one div jumping beneath the other)
Those two divs can be of different heights, though - sometimes div A will be higher, sometimes div B.
I want some long text to appear directly beneath div A. If div B is higher than div A, then the text should flow around div B.
The text should display no wider than 400px, but if the window is narrower, then it should display as narrowly as needed. The text should be no wider than the viewport.
So to summarize, I want the two side-by-side divs on top to display the same way regardless of how narrow the window width is, but the text below div A to be responsive to the window width (and also not to overlap div B, if div B drops down further than div A).
Here's some code that isn't the right approach, but shows partly what I'm going for:
.all {
max-width:400px;
}
.header div{
display:inline-block;
vertical-align:top;
}
.header{
white-space: nowrap;
padding: 0px;
height: 36px;
}
.A{
background-color:red;
width: 195px;
margin-right: 5px;
}
.B{
width: 195px;
margin-left: 5px;
background-color:blue;
}
<div class="all">
<div class="header"><div class="A">Text1</div><div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div></div>
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
Here's the same on JSFiddle: https://jsfiddle.net/ur60tdxy/1/
What doesn't work here is that the long text overlaps div B (the blue one), and also it doesn't allow for div A to be different heights (it just displays 36px below the top rather than immediately below div A, whatever its height).
Any help would be much appreciated.
EDIT: Here's a second version, which behaves as I want except I want the two divs to remain side-by-side when the window is too narrow:
.all {
max-width:400px;
}
.A{
background-color:red;
width: 190px;
margin: 5px;
float: right;
}
.B{
width: 190px;
margin: 5px;
background-color:blue;
float: right;
}
<div class="all">
<div class="B" style="float: right;">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
<div class="A">Text1</div>
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
https://jsfiddle.net/ur60tdxy/2/
Use width:max-content; to avoid the wrap.
Resize the screen to see the result:
.all {
margin:5px;
}
.header {
width:max-content;
}
.A {
background-color: red;
width: 195px;
margin-right: 5px;
float:left;
}
.B {
width: 195px;
margin-left: 5px;
background-color: blue;
float: right;
}
.content {
clear:left;
max-width: 400px;
}
<div class="all">
<div class="header">
<div class="A">Text1</div>
<div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
</div>
<div class="content">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
</div>
<div class="all">
<div class="header">
<div class="A">Text1<br/>Text2<br/>Text2<br/>Text2<br/></div>
<div class="B">Text2</div>
</div>
<div class="content">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
</div>
Simplifying Temani Afif's answer just a little (the extra wrapper isn't necessary, this seems to work as well):
.all {
max-width: 400px;
margin:5px;
}
.header {
padding: 0px;
width:max-content;
}
.A {
background-color: red;
width: 195px;
margin-right: 5px;
float:right;
}
.B {
width: 195px;
margin-left: 5px;
background-color: blue;
float: right;
}
<div class="all">
<div class="header">
<div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
<div class="A">Text1</div>
</div>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<div class="all">
<div class="header">
<div class="B">Text2</div>
<div class="A">Text1<br/>Text1<br/>Text1<br/>Text1<br/></div>
</div>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<div class="wrap">
<p class="hi"><strong>Hello everyone I like to thankyou for helping me in advance</strong></p>
<p class="hi"> test </p>
</div>
<p class="hi"> test </p>
.hi {
text-align: left;
}
.wrap {
text-align: center;
}
I want my text to be centered, but I want them to start off at the same place (left of the text aligned across the 2 <p> elements). I do not want to hardcode it if possible, for example like margin: left 200px;.
I would suggest you wrap the text inside a div or any other full-width tag -span won't work for example, where the div is centered inside p, but the text is -by default- left aligned inside the div.
The problem with that is that you have to set a defined width for the div. Here I used 70%, but you can try to find the best for you design.
div {
margin: 0 auto;
width: 70%;
}
<p><div><strong> Hello everyone I like to thankyou for helping me in advance </strong></div></p>
<p><div> test </div></p>
You can try like this. If its fine for you then remove the borders
.flex{
border:1px solid red;
}
.paragraph{
display:flex;
align-items:flex-start;
flex-direction:column;
margin:auto 20%;
border:1px solid black;
}
<div class="flex">
<div class="paragraph">
<p><strong>Hello everyone I like to thankyou for helping me in advance</strong></p>
<p> test </p>
<div>
<div>
I'm trying to position two divs next to eachother, and keeping the mobile visitors in mind.
The problem: Instead of floating next to eachother, when there's a good amount of text used in the div, it goes underneath.
Here's an example:
.codeblock {
width:500px;
}
.left{
float: left;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div class="left">
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Why is this happening? Is there a solution, without using fixed values (excluding the image style width)?
Float only the image
.codeblock {
width:500px;
}
.left{
float: left;
margin-right:10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322" class="left" style="width:125px">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Another option would be to use flexbox instead of float. It will be a little bit more work, but it is a new feature and always good to try new things.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
UPDATE
Like this: no class. You inform the main class that it is flexbox and its son will have a padding do separate them.
.codeblock {
display: flex;
width:500px;
}
.codeblock > * {
padding: 0 10px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div >
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
Considering mobile users I would do this that way with flex-wrap and min values for content
.codeblock {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-width:500px;
}
.codeblock>img {
flex: 0 0 125px;
width: 125px;
height: auto;
margin-right: 20px;
}
.codeblock>div {
flex: 1 1 200px;
min-width: 200px;
}
<div class="codeblock">
<img src="https://placehold.it/307x322">
<div>
<h3>Some title</h3>
<p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
</div>
</div>
I just have started with HTML and just basically trying around. So I have found some (Quite alot) stackoverflow where people are wondering the same and I just found out that alot of people using inline and my thought was if there is a way to maybe do it without a inline and I haven't come to any answers and here iam!
I have tried to do so far:
.right {
float: right;
}
<header>
<h1>Left Text</h1>
<span class="right">Right Text</span>
</header>
and it ends up pretty bad I would say
Picture of how it looks like
Anyone has any idea?
<h1> tag in HTML is display: BLOCK element by default, So it comes with a new line always. If you want <span> tag to be displayed on the same line just change the <h1> tag display to inline.
<h1 style="display: inline;"> Left Text </h1>
I think this is what you are looking for.
<h1>Left Text
<span style="float:right">Right Text</span>
</h1>
* {
margin: 0;
padding: 0;
}
header {
display: flex;
align-items: center;
}
.left {
float: left;
margin-right: 20px;
}
.Right {
float: right;
}
<header>
<h1 class="left">Left Text </h1>
<span class="Right">Right Text</span>
</header>
I have some text and then I have some larger text I want to be able wrap the text around the larger text. Not sure what attribute I would use.
Heres an eample of what i want but put the image into a block of text:
Heres my current css:
.message h1{
font-family: 'Audiowide', cursive;
font-size: 76px;
position: absolute;
left: 106px;
top: 120px;
color: white;
float: left;
}
.text p{
opacity: .7;
position: absolute;
font-family: 'Abril Fatface', cursive;
font-size: 36px;
left: 108px;
width: 1080px;
height: 421px;
top: 117px;
color: white;
}
and my html code:
<div class="message">
<h1 align="left">Hello there is<br>Some text here</br></h1></div>
<div class="text">
<p>and Some more text here</p>
</div>
so let me summarize what im asking. I have some large text and i want to make the smaller text wrap around the larger text. I've looked around and found you can wrap around pictures but i'm not 100% sure about other text.
You need to use float: left or float: right.
http://jsfiddle.net/74Z9d/
When I run your code I get this:
And I believe you want this?
Then just do this to your HTML:
<body>
<div class="message">
<div class="text">
<p>Some more text here
<h1 align="left">Hello there is<br>Some text here</br></h1></div>
and Some more text here</p>
</div>
</body>
</html>
Ah, I see what you're asking now. I think the others answered your question for you :)
it is really hard to understand what you want based on your explanation, anyhow I just "refactor" you code, probably this is what you want. jsfiddle
.message {
background: blue;
width: 100%;
padding: 10px;
}
img {
float: right;
padding: 10px;
/*optional*/
max-width: 40%;
}
<div class="message">
<h1>Hello there is Some text here</h1>
<img src="http://i.stack.imgur.com/kJbY7.jpg">
<p>and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here and Some more text here </p>
</div>
Short anwswer:
I'd just put everything in one div, and put <br /> tags whereever are appropiate.
Long answer:
So first thing, I'd replace the <h1> element with a <span class='larger'><span>
Let's say you have the following:
<div class='message'>
<span class='larger'>Here is some text</span> followed by smaller text
</div>
If you put styles on the <div class='message'> class to have smaller text (since it's a container.. or parent of the span class) it has styles of small text by default. Until it hits the <span class='larger'> child element of <div class='message'> then the text becomes larger and overrides any of the styles.
To have it conform with messages, I'd sprinkly <br /> wherever appropiate.
Here's a jsfiddle you can demo and view here:
http://jsfiddle.net/m4bHJ/