I have two p tags
<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>
The Output is content1content2. My expectation is like this:
content1 content2
Can anyone help. I want one "content1" in the left p and "content2" in the right 'p'.
You can use CSS flexbox for this. Below is the minimal CSS for the requested layout:
<div style="display: flex; justify-content: space-between;">
<p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
<p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>
For longer content, you can use fixed-width columns:
<div style="display: flex; justify-content: space-between;">
<p style="flex-basis: 49.5%; background-color: papayawhip;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget luctus lacus. Cras consectetur elementum mi sed consequat.</p>
<p style="flex-basis: 49.5%; background-color: palegoldenrod;">Pellentesque aliquet condimentum augue in mattis. Praesent sagittis nisl magna, a volutpat arcu imperdiet vel. Quisque et orci sed ligula cursus luctus.</p>
<!-- 49.5% + 49.5% = 99%, remaining 1% is distributed according to justify-content -->
</div>
You could do it with floats:
<p style="margin:0;display:inline;float:left">content1</p>
<p style="margin:0;display:inline:float:right" >content2</p>
The idea of the tag <p></p> is to display a paragraph. So HTML offers you the <div></div> which is a container conecpt. So you should use Salman A's Solution, because there aren't just different tags in html for no reason. Actually you can style a paragraph with css so it is getting displayed the same as a div container, but it is not meant to be like that.
I don't want to say to you, what you have to do. I just wanna help you using the "correct" tags for the things they were made for.
What you really want is something that doesn't assume sufficent width to fit both paragraphs into one line:
* { box-sizing: border-box; }
.two { width: 30em; max-width: 100%; }
.two p { display: inline-block; max-width: 50%; }
.two p:nth-child(1) { float:left; }
.two p:nth-child(2) { float:right; }
<div class="two">
<p>This is the first paragraph of two.</p>
<p>This is the second paragraph of two.</p>
</div>
Here's another quick turnaround to achieve this:
p{
text-align: center;
}
.item p{
display: inline-block;
}
.leftContent{
text-align: left;
width: 50%;
}
.rightContent{
text-align: right;
width: 50%
}
<br>
<!--Use both P tags in the same line without space -->
<article class="item">
<p class="leftContent">Content1</p><p class="rightContent">Content2</p>
</article>
float:left, float:right.... or
width:49.9%;
display:inline;
text-align:left;
text-align:right;
Related
I'm new to Wordpress and and currently want to add multiple images with text aligned to it on a page. I thought about doing it with a table, but not sure if this is the best solution. Ill describe what I thought how I'd do it.
1. Row 1. Cell Picture
1. Row 2. Cell Header Text + Body text for a short image description
I need to do that multiple times so I thought its the easiest way...
Now I tried to do that with the TablePress Plugin, the only problem is that I cant add a header text for each sell, and there for cant change the font explicitly for the header.
Is there an alternative to TablePress that allows me to change fonts and colors of text within a cell?
Or should I do it manually?
Really appreciate your help.
Thanks
Is this what you're looking for?
.container {
width: 100%;
}
.image, .description {
width: 50%;
float: left;
box-sizing: border-box;
}
.image img {
width: 100%;
}
.description {
padding: 15px;
}
<div class="container">
<div class="image">
<img src="https://preview.ibb.co/ioNAzT/img02.jpg">
</div>
<div class="description">
<h2>Image title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut mollis lacus. Pellentesque euismod mauris justo. Aenean eu sagittis ex. Suspendisse potenti. Duis velit lacus, vestibulum sit amet ex sed, mattis scelerisque metus.</p>
</div>
</div>
I wouldn't use a table but a flexbox to store the products. For an example see below.
.row {
display: flex;
justify-content: space-around; /* Horizontal alignment */
}
article {
display: flex;
flex-direction: column;
align-items: center; /* Horizontal alignment */
}
<div class="row">
<article>
<div class="image"><img src="https://via.placeholder.com/100x100"></div>
<h2>Header text</h2>
<p>Detail text</p>
</article>
<article>
<div class="image"><img src="https://via.placeholder.com/100x100"></div>
<h2>Header text</h2>
<p>Detail text</p>
</article>
<article>
<div class="image"><img src="https://via.placeholder.com/100x100"></div>
<h2>Header text</h2>
<p>Detail text</p>
</article>
</div>
I am making a full section page website like this. Each page is its own <section> tag. Currently my page has 4 sections (presented with different background colors).
My first section has a container div and inside two new divs (one for an image and the other for a description). Now when the window is minimized, the contents of the description spills over and goes over to the second page instead of being contained in the first page. To illustrate:
Please let me know what changes to make. I've been working on this issue for a long time and I have yet to find a resource or solution that works for my code..
My HTML code:
<!-- FIRST PAGE -->
<section>
<div class="content" id="about">
<!-- Picture -->
<div id="aboutImage">
<img src="img/about.jpeg">
</div>
<!-- Description -->
<div id = "aboutInfo">
<h2>Lorem Ipsum.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus.
Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus.
Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris.
In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor
maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien
a ex porta dictum.
</p>
</div>
</div>
</section>
<!-- SECOND PAGE-->
<section id="skills"></section>
My CSS:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width: 100%;}
* {box-sizing: border-box;}
html, body {
height:100%;
position: relative;
}
section{
width: 100%;
height:100vh;
}
.content{
display: table-cell;
height: 100vh;
}
/* ABOUT */
#about {
border-bottom: #F1C40F 5px solid;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#aboutImage {
padding: 30px 30px 30px 30px;
}
#aboutInfo {
border-style: dashed;
border-width: 2px;
border-color: black;
font-size: 30px;
text-align: left;
}
#aboutInfo p {
font-size: 15px;
}
/* SECOND PAGE*/
#skills {
background-color: #E3E7D3;
}
/* RESPONSIVE DESIGN */
#media screen and (max-width: 768px){
#about {
flex-direction: column; /* added */
}
}
Please please let me know how to fix this. I've been having so much trouble.
Add
overflow: scroll;
to CSS of #aboutInfo div. What this will do is that whenever there's overflow of content, instead of going to the next page, that div will scroll the content.
Test it here codepen
Additionally, i also added margin-bottom: 20px; to CSS of #aboutInfo div just so you can see that this div doesn't overflows to next page anymore.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to do a boxes like below for my website's events but I got stuck.
The problems I can not solve:
Reduce images to the same size
Create modules of the same size
Align the modules in the same line
.background {
width:360px;
height:200px;
}
.image{
width:100%;
height:100%;
}
.text {
width:100%;
height:25%;
color:#ffffff;
background:blue;
z-index: auto;
}
<div class="background">
<div class="image">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
Questions... and answers. Let's go over the issues you have one by one.
Reduce images to the same size
It's best to let CSS take care of this. By setting the background of an element to the image you want and setting the background-size to cover, the browser will scale the image such that the aspect ratio is maintained and the image nicely covers all of the element you put it in.
Now make all elements the same size and voilà, this point is done.
Create modules of the same size
This can be achieved in two ways.
Set fixed sizes on your boxes.
Use more advanced CSS, in particular the flexbox layout module.
To keep things simple, I'll use the first approach for now. Read up on flex if you are interested in it!
Align the modules in the same line
This can be achieved in many ways, but the most straightforward one is setting display to inline-block. This will make it so that every block in your module is treated as a, well, a block, meaning that it can have a set width and height. At the same time, it is laid out as if it were text. So, one block after another will simply go on the same line. When that does not fit on screen anymore, blocks will flow to the next line.
Putting this all together. Here is a quick toy example that includes all of the above. It should serve as a good starting point to build from.
.card {
display: inline-block;
vertical-align: top;
width: 150px;
height: 270px;
margin: 10px;
padding: 0;
border: 1px solid #444;
border-radius: 5px;
}
.image {
/* width is 100%, so 150px, by default */
height: 150px;
background-size: cover;
}
.text {
height: 150px;
margin-top: -40px;
}
.text > p {
max-height: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
margin: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
color: #eee;
font-size: 20px;
line-height: 20px;
}
p {
margin: 0;
padding: 10px;
font-size: 15px;
line-height: 20px;
}
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/abstract/');"></div>
<div class="text">
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus auctor odio, sed lobortis odio pellentesque tincidunt. Curabitur et libero maximus, consequat mi non, dignissim turpis.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/city/');"></div>
<div class="text">
<h1>Bar</h1>
<p>Sed ac lacus vel mi mollis ullamcorper quis ac sapien. Ut quis ornare ligula. Nullam a sapien eget arcu mattis aliquam. Quisque dapibus leo vel lacus rutrum sollicitudin.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/cats/');"></div>
<div class="text">
<h1>Baz</h1>
<p>Nullam eu urna dictum, gravida augue nec, dignissim enim. Duis sit amet elit quis mauris consectetur rhoncus et a ipsum. Fusce vel sagittis nulla, et imperdiet quam.</p>
</div>
</div>
You need to change your HTML and CSS to make it work properly.
<div class="background">
<div class="image" style="background-image: url('https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg');">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
then your CSS should look like this:
.background {
width: 360px;
height: 200px;
position: relative;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
height: inherit;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
That will make an image to fully cover the background space and then the .text will be an overlay on the image. Actually, you could even skip the .image div, add background and the CSS to the .background div and it will work as well.
The example you provided features something different than your code is suggesting. If you want to achieve the look from example, then:
.background {
width: 360px;
height: 200px;
position: relative;
background: #fff;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 60%; /* that will make a fixed ratio of you image box, even if you'll scale the background boc /*
}
.text {
/* actually it doesn't need styling in that case */
}
.background's parent {
display: flex; /* to make the blocks even in height without setting that as a fixed value */
}
Your code and the example you provided are doing different things. In order to get the effect of your example, you need more than one "card" (image and text together).
You can use display: flex on the .background div so that all the cards are the same height. Then you can add some margin to the cards so they are separated a little.
.background {
display: flex;
background: cyan;
}
.card {
width: 360px;
background: white;
margin: 10px;
}
.text {
padding: 0 5px;
}
.text p {
width:100%;
overflow: hidden;
}
<div class="background">
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>test test test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>another test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit, massa sed tristique lacinia, mauris lectus ultricies ipsum, vitae lobortis lectus arcu quis nisl. Etiam pulvinar porttitor mi, at aliquet quam mattis non.</p>
</div>
</div>
</div>
In my fiddle you will see a break in text, I would like to put a <hr> there and decorate it in the CSS, but I have no idea how to do this as when I do this it breaks my inline-block, and I'm thinking that's because the <hr> is a block element. Is there any creative solutions around this? I need it to be fixed there between the two paragraphs of text to maintain responsiveness.
Thanks!
FIDDLE
HTML:
<section>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
</div>
</section>
CSS:
.first {
height: 100%;
line-height: 0;
}
.first p {
vertical-align: middle;
display: inline-block;
width: 49%;
}
.ipad {
vertical-align: middle;
display: inline-block;
width: 49.2%;
}
p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
You could achieve this by wrapping your <p> and <hr> elements into another <div> element, and making it display:inline-block. My solution involved adding this wrapper so your structure ended up being:
<section>
<div class="first">
<div class="text-wrap">
<p></p>
<hr />
<p></p>
</div>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
</div>
</section>
(Additional element is .text-wrap. Note that I split up the two paragraphs into individual <p> elements.) The CSS I left mostly alone, except I removed the definition for .first p, and added these two:
.text-wrap{
vertical-align: middle;
display:inline-block;
width:49%;
}
.text-wrap p {
vertical-align: middle;
display: inline-block;
}
Here's a JSFiddle example that shows what this achieves. If this isn't what you were looking for, or you wanted to use a different method, let me know and I'll be happy to help further!
Here's an alternative to Serlite's answer. It basically puts the <hr> in implicitly, using CSS.
fiddle
We add a border to the top of each paragraph, except the first one in each container.
p {
...
border-top: 1px solid black;
}
p:nth-child(1) {
border-top: none;
}
Here is an SSCCE to show my problem:
<html>
<head>
<title>SSCCE for problem</title>
<style type="text/css">
h1 {font-size: 2em;}
h5 {font-size: 1.3em; margin: 1em;}
</style>
</head>
<body style="text-align: center;">
<div style="background-color: #C0C0C0;">
<div style="background-color: #B0B0B0; float:left; padding: 1em;"><h1 style="">Welcome to<br/><img src="http://www.oddllama.cu.cc/logo.png" alt="OddLlama Productions"
title="Welcome to OddLlama Productions!"/></h1>This is some sample text.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in est non dui dictum eleifend. Proin tempor sodales odio, vitae laoreet orci vehicula blandit.
Curabitur vitae tellus odio, nec vehicula leo. Nam ac urna nisi, eget molestie dui.</div>
</div><br/>
<span style="width: 25%; float: left; clear: left; background-color: #D0D0D0"><p>
<h5>SOMETHING</h5>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>
</span>
<span style="width: 50%; float: left; background-color: #DDDDDD">
<h1>SSCCE</h1>
<p>This is an SSCCE.</p>
<p>Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.<br/>Praesent in est<br/>non dui dictum eleifend.<br/>Proin tempor<br/>sodales odio,<br/>vitae
laoreet orci<br/>vehicula blandit.<br/>Curabitur vitae<br/>tellus odio,<br/>nec vehicula leo.<br/>okay good enough.</p>
</span>
<span style="width: 25%; float: left; background-color: D0D0D0"><p>
<h5>More stuff!</h5>
<p>I'll just put a bunch of line breaks to take up space<br/><br/><br/><br/><br/><br/><br/><br/>okay good</p>
</span>
<p style="clear: both;"><br/>THIS IS A THING AT THE BOTTOM it is a footer yay footers are footery and footeriness is footy okay why am I typing this this is awkward but
I must take up more space spaciness is spacey<br/><br/>okay good</p>
<br/><div style="padding: 10px;"></div><hr/><div style="padding: 10px;"></div>
</body>
</html>
And here is an image of how it renders:
How can I make the circled div that contains the text expand down so it is the same height as the one with the image? I placed them both in a common parent div, but no matter what attributes or styles I tried to use, it wouldn't expand down.
Is there an expand: down CSS thing, or some alternative that I can use to make my text expand downwards?
Unfortunately, there is no there is no expand:down attribute in CSS :)
But you do have some alternatives. The most common solution for this is by using the .clearfix method.
When you float some children elements, the parent (container) doesn't take in effect the height of those floated children. That's where you need to add the clearfix class.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
here's a fiddle
PS: it's compatible in very old IE versions too!