I'm just now trying to learn the flexbox layout as it seems like it could simplify many things.
I'm trying to get 2 columns side by side with 1 60% width and the other 30% width.
Even though I specify the width in the flex-basis property they stay the same size, evenly spaced on the page.
http://codepen.io/anon/pen/VLrWZY
HTML:
<article class="fullCol">
<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>
</article>
<section class="flexWrap">
<article class="halfCol">
<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>
</article>
<article class="halfCol">
<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>
</article>
<!-- Put top and bottom drop shadow on navbar -->
</section>
</section>
CSS:
article, section, nav, aside {
display: block;
}
#wrapper {
}
.flexWrap {
display: flex;
-webkit-flex-flow: row || wrap;
flex-flow: row || wrap;
-webkit-justify-content: center;
justify-content: center;
}
.fullCol {
width: 100%;
border-bottom: 1px solid black;
margin: 0px 0px 15px 0px;
padding: 10px;
box-shadow: 0 4px 2px -2px gray;
}
.halfCol {
box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
width: 45%;
border: 1px solid black;
margin: 0px 5px 0px 5px;
padding: 10px;
}
.mainCol {
box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
border: 1px solid black;
margin: 0px 5px 0px 5px;
padding: 10px;
-webkit-flex-basis: auto | 60%; /* Safari */
flex-basis: auto | 60%;
}
.sideCol {
box-shadow: 0 3px 5px #888, 0 -3px 5px #888;
width: 30%;
border: 1px solid black;
margin: 0px 5px 0px 5px;
padding: 10px;
-webkit-flex-basis: auto | 30%; /* Safari */
flex-basis: auto | 30%;
}
you need to use -webkit-flex: initial; and flex: initial; on the flex child you are trying to define a width on.
Related
I have a styled div with left element (blue represents info message, red warning, etc.).
Everything looks fine if I have one line of error/info messages. But if there are multiple then this blue/red element doesn't fit the size of container. Probably because height is set manually.
Is there a way to fix it so that this blue element fills the complete size of the div.
.InfoRectangle {
width: 100%;
border-radius: 6px;
border: solid 1px #005ea5;
background-color: #fff;
display: flex;
align-items: center;
}
.InfoRectangle---Header {
width: 52px;
height: 66px;
padding: 12px 12px;
border-radius: 6px;
background-color: #005ea5;
display: flex;
align-items: center;
background-position: center !important;
background-repeat: no-repeat;
}
.Text {
margin: 16px 0 16px 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #0d0d0d;
}
<div class="InfoRectangle">
<div class="InfoRectangle---Header">
</div>
<span class="Text">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.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.</span>
</div>
This CSS should be fine.
Just removed justify content and height:D
.InfoRectangle {
width: 100%;
border-radius: 6px;
border: solid 1px #005ea5;
background-color: #fff;
display: flex;
}
.InfoRectangle---Header {
width: 52px;
padding: 12px 12px;
border-radius: 6px;
background-color: #005ea5;
display: flex;
align-items: center;
background-position: center !important;
background-repeat: no-repeat;
}
.Text {
margin: 16px 0 16px 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #0d0d0d;
}
<div class="InfoRectangle">
<div class="InfoRectangle---Header">
</div>
<span class="Text">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.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.</span>
</div>
Don't set your height in .InfoRectangle---Header and remove your align-items: center in your .InfoRectangle class.
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 1 year ago.
I'm trying to put the div right below hr tag but it doesn't seem to work. I tried adding padding: 0; margin: 0; Instead nothing changes. Right now I have this:
But instead I want something like the image below:
HTML:
<hr class="hr">
<div class="alttxt">
<p> 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 knostrud
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>
CSS:
.hr {
border: 3px solid #ffffff;
margin: 0 5% 0 5%;
padding-bottom: 0 !important;
}
.alttxt {
background-color: rgba(1,1,1,0.5);
margin-top: 0 !important;
margin: 0 5% 0 5%;
}
.alttxt p {
text-align: justify;
padding: 3% 3% 3% 3%;
color: white;
font-size: 140%;
}
Remove the default margin from the paragraph
.hr {
border: 3px solid red;
margin: 0 5% 0 5%;
}
.alttxt {
background-color: rgba(1, 1, 1, 0.5);
margin: 0 5% 0 5%;
}
.alttxt p {
text-align: justify;
padding: 3% 3% 3% 3%;
color: white;
font-size: 140%;
margin: 0;
}
<hr class="hr">
<div class="alttxt">
<p> 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 knostrud
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>
Play with the .alttxt margins
I chose 7%
That's the only change I made to your css
.hr
{
border: 3px solid #0000ff;
margin: 0 5% 0 5%;
padding-bottom: 0 !important;
}
.alttxt
{
background-color: rgba(1,1,1,0.5);
margin-top: 0 !important;
margin: 0 7% 0 7%;
p
{
text-align: justify;
padding: 3% 3% 3% 3%;
color: white;
font-size: 140%;
}
}
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<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 class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<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</p>
<p>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</p>
<p>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>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
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.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>
I've been trying to use 3 divs like a table, so to make 3 columns I thought I#d make 3 33% divs. That works fine and they fill the page up, but as soon as I want to add padding to make the text move off the border, the 3rd div moves into the next line.
Any suggestions to keep padding but all 3 in one row would be appreciated.
Code:
CSS:
.container {
padding-top: 53px;
width:100%;
}
.table1{
border-style: solid;
border-width: 2px;
float: left;
width: 33.3%;
text-align: justify;
padding-left: 3px;
padding-right: 3px;
background-color: gray;
}
.table2{
border-style: solid;
border-width: 2px;
border-left: 0px;
border-right: 0px;
float: left;
width: 33.3%;
text-align: justify;
padding-left: 3px;
padding-right: 3px;
}
.table3{
border-style: solid;
border-width: 2px;
float: left;
width: 33.3%;
text-align: justify;
padding-left: 3px;
padding-right: 3px;
}
HTML:
<div class="container">
<div class="table1">
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.
</div>
<div class="table2">
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.
</div>
<div class="table3">
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.
</div>
</div>
You could add box-sizing: border-box to the elements so that the padding/border is included in its height/width calculations:
.table1, .table2, .table3 {
box-sizing: border-box;
}
I'd suggest adding a common class to the tables as well:
Example Here
.table {
width: 33.33%;
box-sizing: border-box;
}
Use display: table and table-layout: fixed for the container and display: table-cell for columns:
.container {
display: table;
table-layout: fixed; /* For equal column widths regardless of their number. */
width: 100%;
}
.container > DIV {
display: table-cell;
}
Unlike floats, this method is guaranteedly free from any gaps between columns and on each side of the container.
Unlike Flexbox (IE10+), it works in IE8+.
Alternately, you can modify your code a little and make use of CSS calc() function like below:
width: calc(33.3% - 10px);
Where each div width is 33.3% - ( 3px padding left + 3px padding right + 2px border left width + 2px border right width) - because padding and borders add values to the element width -.
This for .table1 and table3, but for the middle .table2 div there's no border-right nor border-left width values so it is only 6px instead of 10px
Also you have ltos of redundant code so I simplified it a little JS Fiddle
.container {
padding-top: 53px;
width:100%;
}
.table1, .table2, .table3{
border:2px solid;
float: left;
padding: 0 3px;
width: calc(33.3% - 10px);
text-align: justify;
}
.table1{
background-color: gray;
}
.table2{
border:none;
border-top:2px solid;
border-bottom:2px solid;
width: calc(33.3% - 6px);
}
<div class="container">
<div class="table1">
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.
</div>
<div class="table2">
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.
</div>
<div class="table3">
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.
</div>
</div>
Flexbox works: do the following:
Apply reset:
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
Make .container a flex container:
.container {
padding-top: 53px;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
Apply this to each child (e.g. .table1, etc...):
flex: 1 0 auto;
Floats don't work in flex flow environments, so you can delete all float: left. added bonus is your columns match in height as well as width. If you wanted gutters (space between the columns like a newspaper), replace flex-start with space-between and decrease width if necessary.
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.container {
padding-top: 53px;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.table1 {
border-style: solid;
border-width: 2px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 3px;
background-color: gray;
flex: 1 0 auto;
}
.table2 {
border-style: solid;
border-width: 2px;
border-left: 0px;
border-right: 0px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 3px;
flex: 1 0 auto;
}
.table3 {
border-style: solid;
border-width: 2px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 53px;
flex: 1 0 auto;
}
<p>I have added an extra 50px to .table3 to demonstrate that all columns maintain a 33.33% width.</p>
<div class="container">
<div class="table1">
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.
</div>
<div class="table2">
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.
</div>
<div class="table3">
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.
</div>
</div>
I've two (or more) DIVs inside a list item and I'm not able to make the last one to fit the remaining height of its container.
This is the code:
CSS
div{margin: 5px;}
ul{
height: 300px;/*it's calculated via js*/
width: 250px;/*it's calculated via js*/
padding: 0;/*don't change it*/
margin: 0;/*don't change it*/
background-color: #F5EBD6;
border: 4px solid orange;
}
li{
list-style-type: none;
background-color: #E0E5F5;
border: 2px solid blue;
}
.item-title{
background-color: #EDF5E0;
border: 2px solid green;
}
.item-description{
background-color: #FDF1FB;
border: 2px solid fuchsia;
}
.item-description>div{
background-color:rgba(252,255,170,0.3);
}
HTML
<ul>
<li>
<div class="item-title">Title</div>
<div class="item-description">
<div style="margin: 0px; padding: 0px; border: 0px;">
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.
</div>
</div>
</li>
Here's the Fiddle.
I'd like that the .item-description div (fuchsia bordered div in the Fiddle) will stay inside listItem (the orange bordered element).
The div inside the description, the actual text container, should not be modified in its height.
Here's the Fiddle that shows how it should look like.
On the right the result I'd like to reach
I'd like to solve the problem using css/css3, not js and without changing the HTML, if possible.
Can you help me?
Change the UL css like below,
ul {
background-color: #F5EBD6;
border: 4px solid orange;
float: left;
margin: 0;
min-height: 300px;
padding: 0;
width: 250px;
}
it will works.
Adding
overflow-y:scroll;
to .item-description
might put all the content inside the div.AM not sure this is what you are expecting
http://jsfiddle.net/Pdaj8/2/