I've been trying to achieve a certain look on an HTML page with CSS3 (taking baby steps with Foundation framework). I would like main content to be flanked by a repeating background image (sort of like this public example: public site- i.e. The blogger's content is "surrounded" by his image. Here is my app.css file:
body {
background: url('../img/TCBlogo-beta.jpg');
}
My image is 388px by 261px here:
Here is my home.html (the repeating jpg file does not "flank" the div on each side; it "overlays" the content):
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-4 columns">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</p>
</div>
<div class="large-4 columns">
<h1>Welcome to my site</h1>
</div>
<div class="large-4 columns ">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</p>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
1
In your CSS do, where width:***px; is your desired width in pixels that you want your "white divs" to be:
body{background-color:yellow;}
.row{width:***px;margin:0 auto;background-color:white;}
See this JSFiddle for an example.
Related
I have standard 3 column layout with similar img in left and right column. When I resize page, right image becomes smaller but left not. And middle container overflow left image.
Css for image resizing:
img {
display: block;
max-width: 100%;
height: auto;
}
My full code is:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div style="position:fixed;">
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" /></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col">
<div style="position:fixed;">
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
But why?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.bg_img
{
background: url('https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png')no-repeat center center;
display: block;
width: 20px;
height: 20px;
background-size: contain;
float: left;
position: fixed;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col">
<div>
</div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col">
<div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Remove position:fixed style from the div.
I have tried your code and removed your img tag styles and replaced it with the default img-fluid class of bootstrap-4 and it's working fantastic.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.logo_item {
display: inline-block;
margin-left: 2.5em;
margin-right: 2.5em;
}
.sticky {
position: sticky;
position: -webkit-sticky !important;
top: 0;
right: 0;
left: 0;
z-index: 1030;
display: flex;
}
.stick_img{
position: sticky;
position: -webkit-sticky !important;
top: 15px;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black col sticky">
<div>
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" class="img-fluid stick_img" /></div>
</div>
<div class="brd_black col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
</div>
</div>
</div>
<div class="brd_black col sticky">
<div>
<img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" class="img-fluid stick_img" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this whole code, Hopefully it'll work
remove position:fixed; style for your code.
I want to create a simple html page by using Bulma as stylesheet. My expectation is, that there is a reasonable default spacing when using headlines and text. Expecially I am expecting a spacing between a paragraph and the next headline. The documentation is saying
When you can't use the CSS classes you want, or when you just want to
directly use HTML tags, use content as container.
With a content container <div class="content">...</div> then the spacing is satisfying. But my understanding is that content container is optional and that I can achieve the same without a content container. But with the following example there is no space between first paragraph and second headline. What is the best practice to create such a spacing without content container?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first Bulma website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h3 class="title is-4">First title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
</p>
<h3 class="title is-4">Second title - with no spacing to previous paragraph</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
Rendered result in firefox:
You can just use HTML < br > tags for a line break.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first Bulma website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h3 class="title is-4">First title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
</p><br><br>
<h3 class="title is-4">Second title - with no spacing to previous paragraph</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
I created a class called 'intexttitle' with a top margin of 1rem. This new class is added to your own stylesheet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first Bulma website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h3 class="title is-4">First title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
</p>
<h3 class="intexttitle is-4">Second title - with no spacing to previous paragraph</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ornare mollis. Donec in vulputate
urna, id vestibulum lacus. Suspendisse vestibulum ipsum at mollis auctor. Ut finibus mi sed pharetra
finibus. Suspendisse id felis dui. Nullam sit amet felis vel elit malesuada tristique at eu eros. Maecenas
sit amet massa tellus. Quisque eleifend purus semper nibh tincidunt commodo.
</p>
</div>
</div>
</div>
</section>
</body>
</html>
Any ideas on how to make a div inside a bootstrap container full height? I need the background to be white all the way down, like the image below.
Here's my code so far:
index.html
<div class="container white_background_filler">
<row>
<div class="col-xs-2"></div>
<div class="col-xs-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
</div>
<div class="col-xs-2"></div>
</row>
style.css
body {
margin: 10px;
background: #ccccff;
height: 100%;
min-height: 100%;
border: 1px solid #f0f;
}
.white_background_filler {
background-color: #fff;
height: 100%;
min-height: 100%;
/*border: 1px solid #f00;*/
}
footer {
background: #FFF;
}
Use fiddle to fork a solution if that makes it easier to respond: https://jsfiddle.net/tuxedojoe/w47g7pbd/
Really all you need is to set the viewport height e.g. min-height: 100vh. See the code snippet for a working example. Hope this helps.
body {
margin: 10px;
background: #ccccff;
height: 100%;
min-height: 100%;
border: 1px solid #f0f;
}
.white_background_filler {
background-color: #fff;
min-height: 100vh;
/*border: 1px solid #f00;*/
}
footer {
background: #FFF;
}
<div class="container white_background_filler">
<row>
<div class="col-xs-2"></div>
<div class="col-xs-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla mi, finibus sit amet urna ut, commodo suscipit ligula. Curabitur ut finibus libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam ac hendrerit lorem. Donec ultrices et tortor at porta.</p>
</div>
<div class="col-xs-2"></div>
</row>
You can try:
.col-xs-8, row{
height: 100%;
}
I would like to have a design based on the following HTML code:
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
What I am searching to do is to have two columns (the "container" divs) and to have the "title" elements all of the same height. I do not want to have a fixed height (because I do not know how long it is the title), and I'd like not to use Javascript.
Is there any css trick or css selector that is like "all .title elements have the same auto height"?
Thank you.
Could you try the style below and let me know if that is what you are looking for?:
<style>
.container {
display: inline-block;
width: 200px; /* change as you see fit */
/*height: 100px; change as you see fit */
margin: 10px; /* change as you see fit */
}
.image>img{
width:50px !important; /* change as you see fit */
height:50px !important; /* change as you see fit */
}
div.title{
min-height:40px !important; /* change as you see fit */
margin:10px 0 !important; /* change as you see fit */
background:#EEE !important; /* change as you see fit */
padding: 10px !important; /* change as you see fit */
}
</style>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500"/></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
Hope it helps.
Please help me out here, I've created this jsfiddle to make it clear.
http://jsfiddle.net/yvesvanlaer/2r3Cp/
The first letter is also different in a deeper level
I only want it to be on the first P (not in the blockquote).
Thank you so much.
<div about="/news/lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" typeof="sioc:Item foaf:Document" class="ds-1col node node-news view-mode-full clearfix">
<div class="field field-name-title field-type-ds field-label-hidden">
<div class="field-items">
<div class="field-item even" property="dc:title">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</div>
</div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>
Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.
</p>
<blockquote>
<p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
</blockquote>
</div>
</div>
</div>
</div>
You need only the immediate descendant of .field-item, so add that in there with >:
.view-mode-full .field-name-body .field-item > p:first-child:first-letter {
float: left;
font-size: 36px;
line-height: 36px;
padding-right: 4px;
font-style: normal;
}
JSFiddle