I am trying to achieve this layout:
Here is my code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex Test</title>
<script src="http://flex.test/js/app.js" defer></script>
<link href="http://flex.test/css/app.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand-md navbar-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fa fa-directions text-primary"></i> Flex Test
</a>
</div>
</nav>
<div class="container h-100 py-4">
<div class="row h-100">
<div class="col h-100">
<div class="d-flex flex-column h-100">
<div class="border-bottom bg-success">
Lorem ipsum.
</div>
<div class="bg-primary flex-grow-1 mh-100 overflow-auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col h-100 bg-danger overflow-auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</body>
</html>
It works fine if the red and blue boxes don't have content that is higher than the page height. As soon as the content is too long, it makes the page grow in height. I want the boxes to fill the page height, but if their contents are higher than the boxes I want scrollbars introduced.
I have no idea how to accomplish this via flexbox.
I think I got it:
<div class="container flex-grow-1 my-4">
<div class="row h-100">
<div class="col">
<div class="d-flex flex-column h-100 bg-info">
<div class="border-bottom bg-success">
sort, search, post
</div>
<div class="bg-danger flex-grow-1 overflow-auto" style="height: 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
</div>
</div>
</div>
<div class="col">
<div class="d-flex flex-column h-100 bg-info">
<div class="bg-danger flex-grow-1 overflow-auto" style="height: 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod leo lacus, quis tempor lacus maximus vitae. Maecenas maximus consequat ultricies. Praesent eget scelerisque ipsum, at dictum mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel eleifend ligula. Ut varius non elit non faucibus. Morbi nec facilisis ligula. Donec sit amet consectetur nunc. Pellentesque id nisl ac neque pulvinar convallis. In ut purus vitae urna placerat lobortis.
Duis accumsan tortor non nisl sollicitudin commodo. Ut mollis sit amet dui nec scelerisque. Fusce at elit mauris. Ut risus velit, vehicula in lacus et, tempor pellentesque neque. Aenean dui massa, lobortis non euismod id, placerat sed sem.
</div>
</div>
</div>
</div>
</div>
If theres a better way of doing this I'm all ears.
Kindly check my solution. Here i provided a simple way to do this using flex layout.
body {
overflow: hidden;
}
.left {
height: 100vh;
background-color: orange;
display: flex;
flex-direction: column;
}
.left .head {
min-height: 10px;
background-color: red;
flex: 0 0 auto;
}
.left .content {
overflow-y: auto;
}
.right {
height: 100vh;
overflow: auto;
background-color: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="col-6 px-0">
<div class="left">
<div class="head"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet </div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendusLorem ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus
</div>
</div>
</div>
<div class="col-6 px-0">
<div class="right">
<div class="content">
ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis ipsum dolor sit amet consectetur adipisicing elit. Amet repellendus quisquam placeat veritatis
</div>
</div>
</div>
</div>
Related
I faced with a problem with the vertical cards position in accordance with the design (image attached). Firstly I tried position it with the flexbox property but seems it's not the right way because it is just move element to the next line in a "natural flow" but I don't need such behaviour. The most closest solution was to set column-count: 2 property to the news__items class in parent container but I can't control the order in this case. I feel like display: grid can help here but can't figure out how to implement it yet. Note: images have the same height and width.
Here is the html and css markup:
.news__items {
column-count: 2;
}
<div class="news__items">
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h2 class="news__primary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">MFF in the News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
</div>
What is the best approach to implement such grids?
Try this solution.
.news__items {
display: table;
}
.news__item {
width: 50%;
float: left;
}
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%;
}
here is the fiddle.
I can't lose responsive functionality as my issue goes a bit deeper.
If there are some questions, please do not hesitate to ask. Thank you in advance.
<div class="container">
<div class="row">
<div class="col-md-6 yellow">
<div class="col-md-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam</p>
<img class="col-md-12" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTfVm23Mm3GiIQJJnnej43NG1JrrvpFVTqx1QaOGHXFneJPr9ow" />
</div>
</div>
<div class="col-md-6 orange">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam.</p>
</div>
</div>
</div>
</div>
Your question is abit confusing since you have the img included in the html, but if im understanding it correctly you will need to look into using javascript/jquery to calculate the height of each container and then compare them and then depending on which one is bigger insert the img into that. Below is a small bit of jquery to get you started.
$(document).ready(function() {
var a = $('.yellow').height();
var b = $('.orange').height();
if(a > b){
//do something here
}
else {
//do something else here
}
});
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.
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