I am a beginner in HTML/CSS. I am trying to write a paragraph on side of image. But when paragraph reaches end of container it goes to next line but does not respect the indentation.
What I want to achieve is:
IMG Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
What Happens now:
IMG Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Please refer to image below:
Any Help would be appreciated
Let's say we are taking a container to make them side by side. In markup there are few ways to do such thing. Let's take a container div.
<div class='container'>
</div>
inside of this container we are gonna have our image and paragraph.
<div class='container'>
<div>
<img src='' alt='img'/>
</div>
<div>
<p>Your paragraph here</p>
</div>
</div>
to have them side by side let's add some css:
<style>
.container{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
</style>
Explaination :
When we used display:grid; it will be in side by side and take same width as other one takes. And grid-template-columns will make them aligned. Hope you understand
Related
I'm trying to get a layout similar to this one below:
The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:
Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.
I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:
<div class="box"> <!-- container for the chunk -->
<img src="" />
<div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div> <!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap.</p>
</div>
</div>
You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:
.box {
width: 600px;
}
.imgblock {
width: 300px;
height: 300px;
background: #ddd;
float: right;
}
<div class="box">
<!-- container for the chunk -->
<img src="" />
<div class="box-txt">
<!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div>
<!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
</div>
</div>
I recently started to use CSS grid.
I need to set an empty div element as one of the grid elements so that I can insert contents by javascript when needed.
The problem is that gap is applied to this element which is empty and height: 0. How can I avoid to apply gap only when the element is empty for CSS grid.
<div class="container"> <!-- gap: 20px; -->
<div class="grid-element--1">
<h2>title</h2>
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="grid-element--2">
<h2>title</h2>
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div class="grid-element--3"></div> <!-- Need to appliy gap: 20px only when this element is not empty -->
<div class="grid-element--4">
<h2>title</h2>
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
</div>
The gap property is applied to the container. You can not set a specific gap for the children div, because it is a property of its parent.
What I would advise is to set your empty div, with the display:none property. And once you inject content to it with javascript, set its display to "block", "flex", or whatever display property it is using when visible.
Another solution would be to replace "gap" with margin or padding bottom on the children. And since this is a property of the children components, you will be able to make individual exceptions.
I have 2 <p> tags. How can I let the 2nd <p> tag overflow but not overlap the 1st <p> tag.
Below is an example of what I a want to do
<p>Heading</p> - <p>Text text text text text text text text
text text</p>
On the contrary to SteffPoint. You should never use html tables for the structure of your web page. What I would suggest you to do is to place both your paragraphs each in its own div so they have their own block and then float them left next to each other. For this, the most important thing is the width of the block. Make sure the width of the div is small enough so that when you float, the bottom div slides up. I usually use the "%" sign so it adapts to the size of the window.
/* CSS */
/* This border is simply to see the block you have around each paragraph */
.Block {
border: 1px solid black;
padding: 2px;
margin: 2px;
width: 40%;
}
.adjacentBlock {
float: left;
}
<html>
<head>
<link rel="stylesheet" href="help.css">
</head>
<body>
<div class="Block adjacentBlock">
<p>This is your first paragraph inside the div</p>
</div>
<div class="Block adjacentBlock">
<p>This is your second paragraph inside the div</p>
</div>
</body>
</html>
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
I'm looking to create a style I can reuse that will create the following layout.
Place an image and float it left, then have text with or without paragraph tags that are positioned to the right of said image. The text will be aligned to the top of the image on the left.
I can achieve everything except the text isn't positioned at the top. Here is what I have so far, the text being centered and not top aligned.
<div style="overflow:auto">
<div style="float:left">
<img src="Images/img.jpg" />
</div>
<div>
<p>this is some text that is getting centered along the img height</p>
<p>Some more text... </p>
</div>
</div>
example of what this does. I need the 3 paragraphs aligned to top of image and 4th how it is already.
example http://www.spokanewastewater.org/Images/untitled.jpg
I would do 2 things for this.
On your first paragraph tag, add the styles below. This will remove the spacing that is caused by the first paragraph tag.
<p style="margin-top:0;padding-top:0"></p>
And on the image, the style below. Sometimes if you don't set a vertical align the image will be off a little. But I would need to see a JSFiddle to see how yours is rendering.
<img style="vertical-align:top">
Also, I should add that this should be done with an external CSS sheet and not inline, if possible.