I'm looking into aligning the titles of each teaser (card) such that the titles are either the same height, or that the content after the title lines up accordingly with the other teaser in the same "row".
Is this possible to do using just CSS?
.wrapper {
display: grid;
align-items: start;
width: 600px;
margin: auto;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto-fill;
align-items: start;
gap: 1rem;
}
.teaser {
border: 2px dashed grey;
padding: 10px;
display: grid;
align-items: start;
grid-auto-rows: repeat(auto-fill, minmax(10rem, 1fr));
}
h3 {
background-color: rgb(240 240 30 / 0.5);
padding: 1rem;
}
.content p {
background-color: rgb(120 240 90 / 0.5);
padding: 1rem;
}
<h2>Cards</h2>
<div class="wrapper">
<div class="teaser">
<h3>Title</h3>
<div class="content">
<p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint.</p>
</div>
</div>
<div class="teaser">
<h3>Lorem Ipsum</h3>
<div class="content">
<p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
</div>
</div>
<div class="teaser">
<h3>Long title with many words that should end up on three lines because there is no space</h3>
<div class="content">
<p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate. Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
</div>
</div>
<div class="teaser">
<h3>Short Title</h3>
<div class="content">
<p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
</div>
</div>
<div class="teaser">
<h3>Lorem ipsum dolor sit amed</h3>
<div class="content">
<p>Cillum incididunt ex eu. Excepteur excepteur fugiat adipisicing occaecat eu sint. Aliqua velit irure sint aute minim minim elit. Sint voluptate ipsum sit nisi laborum cillum dolor mollit proident sint cillum dolor. Quis incididunt voluptate eiusmod ut qui eu Lorem exercitation enim cillum laborum nulla voluptate.</p>
</div>
</div>
</div>
You can use .wrapper{display: flex}` to do that
Related
I'm trying to style a <div> only if one its paragraph gets moused-hover, while also excluding some sections from getting styled. Here is an example of HTML:
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. <span class=foo'>Ut enim ad minim veniam</span>, quis
nostrud exercitation <span class='foo'>ullamco laboris nisi</span> ut aliquip ex ea commodo
consequat.</p>
<p class='bar'>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
<div>
For the CSS, I tried:
div:has(.bar:hover) .bar {
color: blue
}
div:has(.bar:hover) :not(.foo) {
color: grey
}
and:
div:has(.bar:hover) .bar {
color: blue
}
div:has(.bar:hover):not(.foo) {
color: grey
}
but none of these options accomplish what I would like.
I would like the first paragraph except for both span to get colored in grey and the second paragraph to get colored in blue. However with my current code, the first paragraph including the span gets coloured in grey and the second in blue: it is not excluding the span from getting styled.
Is there a way to accomplish what I'm trying to do?
Something like this?
p:not(.bar):hover {
color: blue;
}
.foo {
color: initial !important;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class=foo>Ut enim ad minim veniam</span>, quis nostrud exercitation <span class=foo>ullamco laboris nisi</span> ut aliquip ex ea commodo consequat.</p>
<p class=bar>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div>
You will need at least 3 rules.
div:has(.bar:hover) .bar {
color: blue
}
div:has(.bar:hover) p {
color: grey
}
div:has(.bar:hover) p .foo {
color: initial;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="foo">Ut enim ad minim veniam</span>, quis nostrud exercitation <span class="foo">ullamco laboris nisi</span> ut
aliquip ex ea commodo consequat.
</p>
<p class="bar">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div>
So, I have an image and there should be a teaser-text next to it.
The text should fade out at the bottom and display a ">>" as read further-indicator & link.
Now to the problem: the text-side should only be as high as the image.
Is there any way to limit the text-column's height to the height of the image and place the fadeout & link at the bottom?
.su-post-img
{
float: left;
display: block;
max-width: 67% !important;
height: auto !important;
}
.su-post-excerpt
{
}
.su-post-title
{
text-transform: uppercase;
font-size: xx-large !important;
}
.fadeout {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
<div class="su-post columns">
<div class="column su-post-img"><img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div class="column">
<section>
<h2 class="su-post-title">This is the title</h2>
<div class="su-post-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="fadeout"></div>
</div>
>>
</section>
</div>
</div>
UPDATE:
With the excellent answer from #Terminator-Barbapapa I solved my problem.
I added some JS to the answer to allow for dynamic image heights.
Here is my full solution:
// Set height of text column in post to height of image.
function AdjustTextHeight()
{
if (jQuery('.su-post-img').css("flex-basis") != "100%")
{
var height= document.getElementById('post-thumb').offsetHeight;
document.getElementById('post-text').style.maxHeight=height.toString() + "px";
}
}
// add to events
$(window).resize(function()
{
AdjustTextHeight();
});
$(document).ready(function()
{
AdjustTextHeight();
});
.post
{
display: flex;
}
.post-img img {
flex-basis: 35%;
overflow: hidden;
}
.post-text
{
flex-basis: 65%;
overflow: hidden;
position: relative;
}
.post-text::before {
content: '';
width: 100%;
height: 5em;
bottom: 0;
position: absolute;
display: block;
background-image: linear-gradient(transparent, white 70%);
}
.post-continue {
position: absolute;
bottom: 0;
left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
<div class="post-img">
<img id="post-thumb" src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div id="post-text" class="post-text" >
<h2>This is the title</h2>
<div class="post-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a class="post-continue" href="www.google.com">>></a>
</div>
</div>
Hope this helps others!
Use flex to place your columns next to each other. And apply a max-height based on the height of your image. Also you can easily create the fade-out with a ::before pseudo element, so you won't need extra HTML markup. Position your link absolute at the bottom of your section.
.columns {
display: flex;
}
.column {
min-width: 200px;
max-height: 200px;
overflow: hidden;
position: relative;
}
.su-post-img img {
height: 200px;
}
.su-post-title {
text-transform: uppercase;
font-size: xx-large;
}
section::before {
content: '';
width: 100%;
height: 5em;
bottom: 0;
position: absolute;
display: block;
background-image: linear-gradient(transparent, white 70%);
}
section a {
position: absolute;
bottom: 0;
left: 0;
}
<div class="su-post columns">
<div class="column su-post-img"><img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
</div>
<div class="column">
<section>
<h2 class="su-post-title">This is the title</h2>
<div class="su-post-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="fadeout"></div>
</div>
>>
</section>
</div>
</div>
enter image description hereI use blogger and I have CSS for H2,3,4 tags with special background and text size.
I want the background size to fit the text size automatically and not to be the whole width of the page.
Can anyone help me with another code or css trick to make it work?
I replaced "display: block;" with "display: inline-block" and it worked but with problems as shown on image no. 2.
.post-body h3,.post-body h2,.post-body h4{background-color:#333333;width: auto;padding:10px 20px;color:#FFF;display: block;margin:5px 0 15px;border-bottom:1px solid $(post.line)}
If heading element comes inside a text or between inline elements, you can use display: table
h2 {
display: table;
background: tomato;
}
<h2>Lorem ipsum dolor sit amet</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor <h2>Lorem ipsum dolor sit amet</h2> laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
When you set the h1 tags to inline-block it will behave like an inline element. That means if the following element is also online, they will just be displayed beside each other.
You can use inline-block on the header tags but make sure the following content is display: block. That will start the element in a new line and this way you can achieve what you want with the header tags.
h1 {
display: inline-block;
background-color: #111;
color: #FFF;
}
p {
display: block; /* this is actually the default display for p tags*/
}
<h1>lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga velit nulla molestiae sunt unde sint, neque optio, beatae cumque perspiciatis a quae eum omnis nesciunt minus veritatis nemo iusto soluta.</p>
I have a three-column, fixed header/footer and three-column content layout, where left and right DIVs don't stretch to 100% height when the middle DIV overflows..
Any suggestion? Also, what do you think as far layout CSS and it's cross-browser compatibility and overall CSS usage?
Cheers,
David
jsFiddle: http://jsfiddle.net/VsTYJ/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
}
#container-main
{
background: #888888;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: 100%;
min-height: 100%;
min-width: 768px;
}
#container-left, #container-middle, #container-right
{
float: left;
margin: 0;
padding: 0;
min-height: 100%;
}
#container-left
{
background: #777777;
width: 25%;
}
#container-middle
{
background: #999999;
width: 60%;
}
#container-right
{
background: #777777;
width: 15%;
}
#container-header
{
background: #eee;
border: 0px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
padding: 0;
}
#header-left, #header-middle, #header-right
{
text-align: center;
line-height: 60px;
margin: 0;
padding: 0;
float: left;
}
#header-left
{
background: #999999;
width: 25%;
}
#header-middle
{
background: #888888;
width: 60%;
}
#header-right
{
background: #999999;
width: 15%;
}
#container-content
{
margin: 0;
overflow: auto;
padding: 50px 0 50px 0;
width: 100%;
}
#content
{
}
#container-footer
{
background:#eee;
border: 0px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer-left, #footer-middle, #footer-right
{
text-align: center;
line-height: 60px;
margin: 0;
float: left;
}
#footer-left
{
background: #999999;
width: 25%;
}
#footer-middle
{
background: #888888;
width: 60%;
}
#footer-right
{
background: #999999;
width: 15%;
}
</style>
</head>
<body>
<div id="container-main">
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
</div>
</body>
</html>
Try this
Fiddle Here:- http://jsfiddle.net/z837M/
Change i did was not to wrap the content with the background and you can use background-size is you are planning to place any image later and you can use 100% or cover as its value. Make the position Fixed and Z-Index :-1
CSS
#container-main
{
background: #888888;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: auto;
min-height: 100%;
min-width: 100%;
position:fixed;
z-index:-1;
}
Html
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
UPDATE
Use table display to have the columns take full height. Since you have some fixed elements it doesn't matter where they reside. Fiddle
CSS
div.column {
display:table-cell;
}
div.section {
display:table-row;
}
HTML
<div id="container-wrapper" class="section">
<div id="container-left" class="column">
<div class="container-content">Content 1</div>
</div>
<div id="container-middle" class="column">
<div class="container-content">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="container-right" class="column">Content 3</div>
</div>
I’m looking for a way to create a newspaper layout for a website where the content is split into two columns but with a quotation box in the middle of the columns.
I know how to make two columns using CSS3 with the
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
But how do I create the quotation box in the middle and is there any way that I “wrap” the content inside the columns around the box in the middle?
I’ve attached an illustration of what I mean.
Please imagine in this illustration that the text in the two columns is wrapped around the box in the middle.
Here's a solution that works:
DEMO HERE
This would give your columns flexibility. However, your quote area would have to be a fixed height/width. If you want to adjust the quote area, change the widths/heights of the spacer divs at the beginning of each column div. Not an elegant solution, but it works.
CSS:
#one {
float:left;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#two {
float:right;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#three {
position: absolute;
left:50%;
top:100px;
margin-left:-300px;
border:1px solid;
width:600px;
height:200px;
background: maroon;
color: white;
}
HTML:
<div id="one">
<div style="float: right; height: 80px; width: 10px;"></div>
<div style="float: right; height: 210px; width: 300px; clear: both;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="three">Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. </div>
<div id="two">
<div style="float: left; height: 80px; width: 10px;"></div>
<div style="float: left; height: 210px; width: 300px; clear: both;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Notice: This builds upon peteris solution (which didn't wrap around the quote div) below.
I guess it's wrong but...:
<style>
#one {
float:left;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#two {
float:right;
width:48%;
background-color:#f0f0f0;
min-height:400px;
}
#three {
position:absolute;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-100px;
border:1px solid;
width:200px;
height:200px;
}
</style>
<div id="one">ONE</div>
<div id="three">3</div>
<div id="two">two</div>
It can be achieved, but... it's not flexible, you'll have to tweak the positioning for almost any change you make to the text.
DEMO
HTML
<div class='newspaper'>
<img src='http://img259.imageshack.us/img259/8049/birmancat.jpg'>
<p><!-- paragraph text --></p>
<!-- nine more paragraphs -->
</div>
CSS I've added:
.newspaper {
position: relative;
width: 580px;
padding: 10px;
margin: 0 auto;
box-shadow: 1px 1px 5px;
column-count: 2;
column-gap: 20px;
font-size: 12px
}
p { margin: 0 0 10px; }
p:nth-child(3):before, p:nth-child(8):before {
width: 145px;
height: 200px;
content: '';
}
p:nth-child(3):before {
float: right;
}
p:nth-child(8):before {
float: left;
}
.newspaper img {
position: absolute;
z-index: 2;
top: 85px; left: 50%;
margin: 0 -150px;
}
http://jsfiddle.net/iansan5653/xbfYD/4/
I modified #sean_mcgee's answer by adding some JavaScript to split the columns for you. Just place the text in the newspaperArticle div, and put your quote in the JavaScript field. It doesn't work well on a small screen because the words are longer than the space, so here is a full-screen example: http://jsfiddle.net/iansan5653/xbfYD/4/embedded/result/. The only problem is that it could split an HTML tag apart, so be careful.