<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>
Related
I'm not sure how to fix this: image directly positioned underneath some text, and stays directly underneath that text when the window is resized. My problem is I can't just float the image left, it needs to be further out, and move inline with some text. Like centring an image, it will always stay in the relative centre, even when the page is resized.
EDIT: I think the problem is I have 3 sections of text next to each other formatted like this, and they move when the page is resized:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="example.css"/>
<p>this is the text which the image should follow (stay inline with)
</p>
<p>third section middle</p>
<p>third section right</p>
<img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png"/>
CSS:
p{
float:left;
width:33.33333%;
text-align: center;
color: #2A3132;
}
img{
width: 10%;
}
And I want that image to stay in the centre of that text when the page is resized. I hope this helps.
put inside of the parent content
.content{
background: yellow;
padding: 5px;
border: 1px solid red;
}
p{
display: inline-block;
margin-right: -4px;
width:33.33333%;
text-align: center;
color: #2A3132;
background: red;
vertical-align: top;
}
img{
display: block;
margin: 0 auto;
}
<div class="content">
<p>this is the text which the image should follow (stay inline with)</p>
<p>third section middle</p>
<p>third section right</p>
<img src="http://devimg.com/100x100/"/>
</div>
I'm pretty new to the front-end materials so bear with me
while I try to explain the question.
I'm having an issue trying to align three boxes together side by side.
However, when I try to add the <p> tag within the box, a top margin
gets added. Here is what I mean.
<div class="work-box">
<div class="box">
<div class="idea">
</div>
<p>Hello World</p>
</div>
<div class="box">
<div class="idea">
</div>
</div>
<div class="box">
<div class="idea">
</div>
</div>
</div>
As you can see, the boxes are wrapped within the "work-box" class. Here is the CSS code.
.work-box {
text-align: center;
}
.box {
margin-top: 30px;
display: inline-block;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
.idea {
height: 50%;
background: url('img/idea.svg') center no-repeat;
background-size: contain;
}
I have been struggling with this issue for this whole entire day and I just cannot figure it out. Please help!
Thank you so much.
Solution: Add vertical-align: top to your .box class.
Explanation: The effect that you saw was because for all inline elements, the vertical-align is defaulted to baseline.
This behaves funny when you have inline elements inside of your .box. Because it will try to align the last inline element to the baseline of all your inline elements.
Try adding vertical-align:middle; to the box class.
.box {
margin-top: 30px;
display: inline-block;
vertical-align:middle;
width: 30%;
height: 300px;
background-color: #495159;
border: solid #A1E8CC thick;
}
See Codepen Example here .
You try using <span>Hello world</span> instead of <p> tag. Moreover, <p> tag is out of .idea div. Is it ok? I think it should be inside of <div class="idea">
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!
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.
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
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
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!
I'm trying to recreate an old text in HTML. At one point, the text does something kind of funny: it has two columns of text, and when one column reaches its end, the other column begins spanning the entire page.
Here is a mock example I've created in Paint:
Is there a way to do this with tables in HTML? Thanks.
Yes, it is. See: http://jsfiddle.net/minitech/jj7Bh/
It's a bit hard to see the effect with the narrow page size on jsFiddle, but that's how you do it - just set some CSS styles on paragraph #1.
No. You don't want tables, you want css float.
Example CSS:
.container {width:600px}
.inset {float:left; margin:0 20px 20px 0; width:300px}
.standard { }
Example structure:
<div class="container">
<div class="inset"></div>
<div class="standard"></div>
</div>
Fiddle
Floating the short paragraph left should do it:
<p id="short-paragraph">Lorem ipsum…</p>
<p id="long-paragraph">Vestibulum…</p>
With the CSS:
#short-paragraph { float: left; width: 40%; padding: 0 2em 2em 0; }
Don't do this with tables. Do it with a floated <p> with a specified width. Here is an example that I just validated in Safari:
<style type="text/css">
.box {
float: left;
width: 300px;
margin-left: 0px;
margin-right: 10px;
margin-top: 0px;
margin-bottom: 10px
}
</style>
<p class="box">
Box of text...
</p>
<p>
This text wraps around the bottom of the other text...
</p>