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.
Related
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
I have a DIV with an icon on left side, and text on right side.
The text is dynamic and can be short or long.
If the text is short (A row or two) I want it to be centered to the icon.
If it's long, I want them to be vertically top-aligned.
Is there a way to do it with CSS only (no line counting)?
<div class="container" >
<div class="container__left">
<div class="container__left__icon" />
</div>
<div class="container__right">
// some react code with dynamic text in <div>s and <span>s
</div>
</div>
You can use display: table-cell and different vertical aligns - top for the first cell and middle for the second.
.inner1{
display:table-cell;
vertical-align:top;
}
.inner2{
display:table-cell;
vertical-align:middle;
}
<div>
<div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
<div class="inner2">some text some text some text some text some text some text some text some </div>
</div>
<div>
<div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
<div class="inner2">some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some </div>
</div>
.container {
display: flex;
flex-direction: row;
align-items: center;
}
You can use Flex Box CSS to do this very easily. You apply the flex to the parent div, establish the direction you want the boxes to fill the space (vertical or horizontal - in this case horizontally so we want to add a "row" direction"), and finally center those elements vertically using align-items set to center. This will account for any changes in the content in your right hand box. It also later makes making it responsive very easy.
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.
I am trying to adjust vertical space between two span elements inside a div. I am trying to achieve half of what I am getting from <br/>.
line-height , vertical-align or margin-top.
None of it worked for me. Here is the jsfiddle
<span> elements are inline. You can't put block-level elements like <p> inside of inline elements.
Use <div>s instead of <span>s and your CSS will work just fine:
<div class="signupEmailBox">
<div class="tag"><p>test data goes here</p></div>
<div class="smallTextEmail">
<p>blah blah blah</p>
<p>some text goes here...</p>
<p>here some more text data</p>
<p>some more text</p>
</div>
</div>
There is a property named display affecting the application of margin among others. The value of this property defaults to inline for span elements. Therefore there is no margin applied.
Either use a element with another default value like a div box or change the value of the display property of your span elements. I suggest using inline-block because this preserves the text flow capabilities of the span element.
span
{
display:inline-block;
}