I've been researching and trying for ages now and it kind of drives me crazy, that I am not able to solve this seemingly simple problem.
I've been trying to fit headings in blogpost-previews to the same height using flexbox. If a heading is "too long" it gets a line-break and has a greater height than the shorter ones, which is okay. However, the paragraph below the heading don't start on the same height anymore, which just looks very odd. Is there a simple way to achieve this, preferably with flexbox?
Here is an image of what I am trying to achieve:
Here is a link to the code on codepen
<div class="blogpost-container">
<div class="blogpost">
<header class="blogpost__header">
<div class="dummy-image"></div>
<h1>Blogpost heading short</h1>
</header>
<div class="blogpost__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Graecum enim hunc versum nostis omnes: Suavis laborum est praeteritorum memoria.
Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium.</p>
</div>
</div>
<div class="blogpost">
<header class="blogpost__header">
<div class="dummy-image"></div>
<h1>Blogpost Heading is longer and thus has a greater height than the short one</h1>
</header>
<div class="blogpost__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Graecum enim hunc versum nostis omnes: Suavis laborum est praeteritorum memoria.
Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium.</p>
</div>
</div>
</div>
Thank you very much in advance for your help.
Get the Fiddle: https://jsfiddle.net/4sew4x2m/
I used <table>. But you can use display:table instead.
From my point of view, if you you flex, you have to give width for that divs. In case of using tables, you don't have to- that's the advantage.
Good luck!
Related
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
I have two block. One of them triangular shaped. How make to flow around this div text? Example:
HTML:
<div class="container">
<div class="entry-cover">Triangle</div>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda autem ex
labore, repellat saepe soluta suscipit vel veniam.</p>
</div>
</div>
CSS has no!
You can use css shapes. Read this http://webplatform.adobe.com/shapes/.
You have to know that it's not cross browsers.
http://caniuse.com/#feat=css-shapes
EDIT - there is polyfill by Adobe, check this out.
https://github.com/adobe-webplatform/css-shapes-polyfill
So if your website need to cross browsers, you have to layout it with css (padding, margin, etc.) or spaces.
Why don't you use skew to the div which contains text. , might help. Other solution : You can use  
I am no guru at CSS so please excuse what might be a basic question. I have an annoying problem which I can't seem to fix:
Here is my text without CSS line-height:
I would like to move the text up closer to the heading tags so I did this:
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:0px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
The Result
The result is perfect and exactly what I want, but... the problem comes when I resize the browser.
Problem Resizing the browser
My Question
Why is the text condensing on browser resize? What am I doing wrong? Should I not use the line-height property? Any workaround for this?
The line-height property is used to control how much vertical space is allocated for each line. In general, it is used to adjust how much space there is between lines within an element.
line-height: 1 means that lines are exactly big enough to fit the tallest letters and lowest descenders, with no space between. A line-height of more than 1 means there is some extra space between lines, and less than 1 will result in lines overlapping.
line-height: 0 means that a line of text has no vertical space allocated to it, so all lines will overlap each other in one line. That is what you are seeing here: the text is wrapping onto a second line, which is rendered over the top of the first line.
What you are trying to do is adjust the space between elements, not the space between lines in a single element. For this, the recommended approach is to adjust either margin or padding. Consider adjusting the margins of your elements until you have your desired vertical rhythm.
For a really detailed explanation of how all three properties work, see this CSS Tricks article on the box model.
Example
body { font-family: sans-serif; }
.cramped h2 {
margin: 0.4em 0 0.2em;
}
.cramped p {
font-style: italic;
margin: 0;
}
<section class="cramped">
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscin.</p>
</section>
Add this to your CSS:
h2 {
margin-bottom: -10px;
}
h2 tags have margins by default
Here is the JSFiddle demo
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p style="line-height:23px;">
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
try this it works fine on my browser
try this
p{margin-top:-10px; font-style:italic;}
#media screen and (max-width:768px){
h2{font-size:18px;}
p{font-size:14px}
}
Line height usage is for setting the distance (height) of each line. 0 value gives no distance so you have this problem.
You should let the line-height in the default value and reset default h2 and p element margin.
line-height
On block level elements, the line-height property specifies the
minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that
is used to calculate line box height. On replaced inline elements such
as buttons or other input element, line-height has no effect. [1]
h2, p {
margin: 0;
}
<h2>Loren Ipsum Dol Tjovanuu</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
<h2>Neque porro quisquam est qui dolorem ipsum</h2>
<p>
<i>Lorem ipsum dolor sit amet, consectetur adipiscin.</i>
</p>
Reference: MDN - line-height - w3.org - line-height
I am trying to display a caption on my images. Caption should behave in two different ways. One is normal and second is hover. For better understanding I have added an image. check it.
Here I have already finished big part of this, But I can not display normal caption on the image correctly.
Can anybody tell me how I figure this out?
THIS is my HTML -
<div class="slideimages">
<div id="box-1" class="box">
<div class="fix-caption">
<h3>Fix Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<a href="">
<img class="image_scale" src="images/4750.jpg"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
</a>
</div>
</div>
MY JS FIDDLE with CSS
Thank you.
Add the following CSS
.fix-caption {
z-index: 5;
background-color: white;
}
Your caption is there, just displaying behind the image...
Alternatively put the elements with .fix-caption lower in the DOM order, which will effectively give them a higher display order (note you'll still want a background-color).
DEMO 1 (z-index) : http://jsfiddle.net/Zfr5c/3/
DEMO 2 (DOM order): http://jsfiddle.net/Zfr5c/2/
Not sure what the problem is: http://watercookies.topfloorstudio.com/
If you scroll down to "Latest News", I'm trying to get the div with the class .newscontentright to be inline with the image on the left. I've wasted too much time trying to figure it out on my own. Any help?
You need to set the width of newscontentright
.newscontentright {
width: 300px;
}
And remove the following from between newscontentleft and newscontentright
<div style="clear:both;"></div>
As a side note, learn to lay out pages without using clear. Use clear only when absolutely necessary, otherwise things get messy. 'Overflow: auto' is often a better solution.
In this particular case the clear is completely unnecessary so just remove it.
maybe try your clear before your first float?
<div style="clear:both;"></div>
<div class="newscontentleft">
<img class="imageshadow" width="178" height="122" alt="news1" src="images/news1.jpg">
</div>
<div class="newscontentright">
<h3>Fall Blue Ridge Parkway “Bike for the French Broad”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, turpis ut hendrerit porttitor, lectus ipsumegestas sapien, ac tristique metus quam id est. </p>
<a> href="#">Read the full article »</a>
</div>