I'm using Bootstrap cards and I want to separate them by a 2px margin.
Nonetheless, when I apply it (either with Bootstrap's margin classes or directly on my stylesheet) flex-wrap triggers and a card goes one row down.
How could I deal with this behavior?
Should I give a max-width to the cards?
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
margin: 3px;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
h2,
.card {
margin-top: 20px;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="highlights row">
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
<section class="card col-md-6 col-lg-4">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</section>
First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.
I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.
col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.
With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.
I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.
.dark-theme body,
.dark-theme .card {
background-color: #121212;
color: #ffffffa6;
}
.dark-theme section.card {
background-color: #464646;
}
.card {
border-width: 0;
}
main {
padding: 100px;
}
h1 {
text-align: center;
}
.dark-theme .btn {
background-color: salmon;
border-color: salmon;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row w-100 m-0 justify-content-center">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card w-100">
<h3>Where does it come from?</h3>
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">
when an unknown
</a>
</div>
</div>
</div>
</section>
Here, You can used Gutters class in the Bootstrap grid system.
Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.
You can use g-1, g-2, g-3, g-4, and g-5 in row according to your needs.
.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
<div class="row justify-content-center g-1">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>when an unknown
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="card">
<h3>Where does it come from?</h3>
<p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
when an unknown
</div>
</div>
</div>
</section>
Related
when use the code col-xl-6 the remaining portion stays blank and next content displays in the next raw. what is the problem?
<div class="raw">
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
</div>
row is the proper class not raw.
<div class="row">
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
<div class="col-12 col-lg-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gal</p>
</div>
</div>
I have multiple items say cards. These cards need to stack horizontally and height needs to be the same. This is happening for me.
Each card has an image, text and a button. Image and text for each card should take what ever is the max height in any card, so that these align properly. This is not happening for me.
If the image and text align properly then the button will always be aligned in each card at the bottom.
I have been following this tutorial but I have multiple cards, putting three here only. Also the third card image height is being set via CSS.
.partner-cards * {
box-sizing: border-box;
}
.partner-cards {
display: flex;
flex-wrap: wrap;
}
.partner-card {
display: flex;
flex: 1 0 20%;
border-radius: 0;
text-align: center;
border: 3px solid blue;
padding: 5px;/*3rem;*/
margin-bottom: 3rem;
max-width: 20%;
margin: 5px;
}
.partner-card-content {
display: flex;
flex-direction: column;
}
/*
.card-content .image-container img {
margin: 0;
padding: 0;
}
*/
.partner-card-content .partner-image-container {
border: 1px solid green;
padding: 0;
margin: 0;
min-height: 11rem;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
max-width: 100%;
}
.partner-card-content p /*, .card-content .image-container*/
{
flex: 1 0 auto;
border: 1px solid red;
}
.partner-card-content img.third-image {
height: 5.5rem !important;
}
/*
p {
font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/
<div class="partner-cards">
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/100x40" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View XXX XXX XXX Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x150" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View YYY Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/120x100" class="third-image" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<a class="primary-button" href="#">View ZZZ Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x100" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="primary-button" href="#">View ABC Offer</a>
</div>
</div>
</div>
How it should show:
The tutorial image on code pen, properly aligns the h2, text and link:
TL;DR
Alignment of flexbox items in adjacent flexboxes is not possible in CSS. You really need sub-grids to solve this problem with dynamic sizes of the sections in your card.
Flexbox Scenario
Anyway given that you have a min-height for the partner-image-container, so I guess you can have either a min-height set for the a or an ellipsis to keep it to a single line. See below solution that adds an ellipsis:
.partner-cards * {
box-sizing: border-box;
}
.partner-cards {
display: flex;
flex-wrap: wrap;
}
.partner-card {
display: flex;
flex: 1 0 20%;
border-radius: 0;
text-align: center;
border: 3px solid blue;
padding: 5px;/*3rem;*/
margin-bottom: 3rem;
max-width: 20%;
margin: 5px;
}
.partner-card-content {
display: flex;
flex-direction: column;
min-width: 0; /* ADDED */
}
/*
.card-content .image-container img {
margin: 0;
padding: 0;
}
*/
.partner-card-content .partner-image-container {
border: 1px solid green;
padding: 0;
margin: 0;
min-height: 11rem;
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
max-width: 100%;
}
.partner-card-content p/*, .card-content .image-container*/ {
flex: 1 0 auto;
border: 1px solid red;
}
.partner-card-content img.third-image {
height: 5.5rem !important;
}
/*
p {
font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/
.primary-button { /* ADDED */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="partner-cards">
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/100x40" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View XXX XXX XXX Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x150" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View YYY Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/120x100" class="third-image" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<a class="primary-button" href="#">View ZZZ Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x100" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="primary-button" href="#">View ABC Offer</a>
</div>
</div>
</div>
Note that you'll have to add min-width: 0 to partner-card-content to override the default min-width: auto setting for a flexbox in the flex axis. You can see some examples of this behaviour below:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
CSS Grid Scenario
You can do this in a different way using CSS Grid Layout - as an example consider 3 cards laid out in a row. This works for dynamic heights of each of your card sections - see demo below:
.partner-cards * {
box-sizing: border-box;
}
.partner-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-auto-flow: column;
grid-column-gap: 10px;
}
.partner-card, .partner-card-content {
display: contents;
}
.partner-card-content .partner-image-container {
border: 1px solid green;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.partner-card-content p {
border: 1px solid red;
margin: 0;
}
.partner-card-content a {
border: 1px solid;
}
<div class="partner-cards">
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/100x40" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View XXX XXX XXX Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/50x150" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s.</p>
<a class="primary-button" href="#">View YYY Offer</a>
</div>
</div>
<div class="partner-card">
<div class="partner-card-content">
<div class="partner-image-container">
<img src="https://via.placeholder.com/120x100" class="third-image" alt="">
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<a class="primary-button" href="#">View ZZZ Offer</a>
</div>
</div>
</div>
But again it has limitations because you are not able to control your layout - you don't have control over your cards but you are working on the contents of the cards here which is not very useful. Note that I have used display: contents for the partner-card and partner-card-content elements. When sub-grids are implemented, we will have a complete solution to layouts such as this - see the discussion below too:
Wrap CSS grid with auto placement
I have to show ordered listed items side by side in pairs with varying content size (generating the li's using angular ng-repeat from some model value). I have used bootstrap grid columns to manage the li content positioning.
problem is the numbering of li is getting very close with content of previous column. as in my case second li order number "2" is touching the content of first li. on inspecting I fount that the index number is outside of "col-sm-6". changing the padding-left of columns will fix this but I am looking for a better solution in bootstrap way.
/* highlight column border */
.col-sm-6 {
border: solid 1px red;
}
/* a fix for column displacement */
.col-sm-6:nth-child(odd) {
clear: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<ol class="row">
<li class="list-group-item2 col-sm-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem is text of the printing and typesetting industr
Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text
of the printing and typesetting industry.
</li>
<li class="list-group-item2 col-sm-6">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
<li class="list-group-item2 col-sm-6 label-warning">
Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text of the printing
and typesetting industr Lorem Ipsum is simply dummy text of the printing and typesetting industr Lorem Ipsum
is simply dummy text of the printing and typesetting industr Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
the printing and typesetting industry.
</li>
<li class="list-group-item2 col-sm-6">
Lorem Ipsum is simply dummy text
</li>
<li class="list-group-item2 col-sm-6">
Lorem Ipsum is simply dummy text
</li>
<li class="list-group-item2 col-sm-6">
Lorem Ipsum is simply dummy text
</li>
</ol>
</div>
the best way is use list-style-position
ul {
list-style-position: inside;
}
I have a sample page as shown below
HTML code:
<div class="container">
<div class="header floatL width100p">
<h2>
Header
</h2>
</div>
<div class="content floatL width100p">
<div class="floatL width29p npv">
<p>navigation div</p>
</div>
<div class="floatL width70p rtb">
<div class="floatL width100p ql">
<p>
div one
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p mtbs">
<p>
div two
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width100p widdiv">
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer floatL width100p">
<h2>
Footer
</h2>
</div>
<div class="clear"></div>
</div>
The styles are:
*,html{
margin: 0;
padding: 0;
}
.container{
width:960px;
margin:20px auto;
}
.header h2,.footer h2{
text-align: center;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
.clear{
clear:both;
}
.width100p{
width: 100%;
}
.width29p{
width: 29%;
}
.width70p{
width: 70.8%;
}
.header,.footer,.content{
border:1px solid;
}
.npv{
border-right: 1px solid;
height: 100%;
}
.ql,.mtbs{
border-bottom: 1px solid;
}
.width40p{
width: 40%;
}
.incont{
margin: 4%;
background: #ccc;
border:1px solid red;
}
I would like to know why the left navigation div is not occupying 100% height as you can see by running the above code.
Any help would be appreciated. It is urgent...
Use css tables
FIDDLE
CSS
.content
{
display: table;
height: 100%;
}
.npv, .rtb
{
display: table-cell;
}
If you want to know more about the problem than simply fix it, this is a nice article that explains the problem and give you multiple solutions: Fluid Width Equal Height Columns
I have some html, css similar to this:
<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex
</div>
which renders like this but i want that the shortest line to be on top, like this.
i am unable to figure out how to do this, any help would be appreciated!
Text is automatically displayed by web browser until the end of the block width. If you want something diferent you must use a break.
<div style="width: 40em; text-align: center;">
Lorem Ipsum is simply dummy text<br>
of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy tex
</div>