Can someone help me understand why Chrome but not Firefox is able to display the background image of the tree on the right side and how to fix: www.eye45.com
When the web browser is contracted, both
<div class="col-sm-6 left-side">
<div class="col-sm-6 right-side">
are supposed to maintain the same height until
#media (max-width: 780px) {} and then the tree image is supposed to flip under the purple paragraphs and reduce to a height of 200px.
It works perfect in Chrome, but not Firefox.
Adding style with display as table will fix this for firefox.
.right-side {
display: table;
}
Add style="display:table"
<div class="col-sm-6 right-side" style="display: table;">
</div>
Try using equal height columns bootstrap css in your code.
Reference : http://getbootstrap.com.vn/examples/equal-height-columns/
.left-side {
background: #bbb4e5 none repeat scroll 0 0;
color: #fff;
display: table-cell;
padding: 2%;
}
.right-side {
background: url("https://s3.amazonaws.com/igd-wp-uploads/2014/05/Perfei%C3%A7%C3%A3o-Igni%C3%A7%C3%A3o-Digital.jpg") no-repeat 50% center / cover ;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
<div class="col-sm-6 left-side">
<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 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 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."</p>
<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 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="col-sm-6 right-side">
</div>
</div>
Here is demo : http://codepen.io/anon/pen/jrJBzz
it's a height problem in chrome browser. use this
.right-side {
min-height: 500px;
}
Related
I have a CSS grid layout as follows here: https://codepen.io/anon/pen/KogEaq
body {
overflow: hidden;
padding: 0;
margin: 0;
background-color: #222525;
color: white;
}
#container {
display: grid;
grid-template-columns: 27fr 78fr;
max-height: 100vh;
}
#left {
grid-row: 1;
grid-column: 1;
}
#right {
grid-row: 1;
grid-column: 2;
max-height: 100%;
}
.box {
margin: 8px;
padding: 8px;
border-radius: 10px;
border: blue solid 2px;
overflow-y: auto;
max-height: 100%;
}
<div id="container">
<div id="left">
<div class="box">
Navigation sidebar stuff here
</div>
</div>
<div id="right">
<div class="box">
Page content
</div>
</div>
</div>
The page is intended to be a single page app and the body should not scroll. When the page content becomes large, I wish for the contents in the .box class to scroll.
The problem is, the .box and the parent #right column within the #container grid seem to exceed the max-height set by the container of 100vh, therefore the overflow property of the .box is not triggered and the content is cut short.
Edit:
If I wasn't clear before, the problem is that the .box and the #right elements do not respect the max-height attribute of the parent #container which is causing the scroll issues.
The problem isn't really the max-height. It's the top and bottom margins on your .box element (margin: 8px). When added to the max-height: 100vh, it results in an overflow of the wrong container. If you remove those margins, and add box-sizing: border-box (to factor in borders and padding), your page and the overflow work as intended.
body {
margin: 0;
background-color: #222525;
color: white;
}
#container {
display: grid;
grid-template-columns: 27fr 78fr;
}
#left {
grid-row: 1;
grid-column: 1
}
#right {
grid-row: 1;
grid-column: 2;
}
.box {
/* margin: 8px; */
padding: 8px;
border-radius: 10px;
border: aqua solid 5px;
max-height: 100vh;
overflow: auto;
}
li {
margin: 10px;
}
* { box-sizing: border-box; }
<div id="container">
<div id="left">
<div class="box">Navigation sidebar stuff here</div>
</div>
<div id="right">
<div class="box">
<ul>
<li>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.</li>
<li>
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.</li>
<li>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.</li>
<li>
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.</li>
<li>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.</li>
<li>
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.</li>
</ul>
</div>
</div>
</div>
As a solution, try padding: 8px on the parent elements (#right and #left) instead.
I have 2 columns, Left and Right with 50% width. There is no issue on the desktop. In the mobile device, I have to display the right side div first and then display left side div.
Note: I am not using bootstrap.
.full_100 {
width: 100%;
display: flex;
}
.left_50,
.right_50 {
width: 50%;
}
#media all and (max-width: 400px) {
.full_100 {
display: block;
}
.left_50,
.right_50 {
width: 100%;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<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="right_50">
<h2>This is the right div in the desktop</h2>
<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>
Since you are using Flexbox, you can do it with the order property:
.full_100 {width:100%;display:flex}
.left_50, .right_50 {width:50%}
#media all and (max-width: 400px) {
.full_100 {
/*display: block;*/
flex-wrap: wrap; /* enables wrapping */
}
.left_50, .right_50 {
/*width: 100%;*/
flex-basis: 100%;
}
.left_50 {
order: 1; /* .right_50 stays at 0 (default value), i.e. comes before the left one */
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<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="right_50">
<h2>This is the right div in the desktop</h2>
<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>
Or with the positioning:
.full_100 {width:100%;display:flex}
.left_50, .right_50 {width:50%}
#media all and (max-width: 400px) {
.full_100 {
display: block;
position: relative; /* needs to be set because its the parent element */
}
.left_50, .right_50 {
width: 100%; /* needs to be set */
position: absolute; /* positioned relative to its parent */
left: 0; /* recommended */
}
.left_50 {
top: 50vh; /* moved down by 50% of the viewport height */
}
.right_50 {
top: 0; /* moved to top */
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<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="right_50">
<h2>This is the right div in the desktop</h2>
<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>
Using Flexbox
.full_100 {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.left_50,
.right_50 {
flex-basis: 50%;
}
#media all and (max-width: 500px) {
.left_50 {
order: 2;
flex-basis: 100%;
}
.right_50 {
order: 1;
flex-basis: 100%;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<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="right_50">
<h2>This is the right div in the desktop</h2>
<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>
Using GRID Css
.full_100 {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media all and (max-width: 500px) {
.full_100 {
grid-template-columns: auto;
}
.left_50 {
order: 2;
}
.right_50 {
order: 1;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<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="right_50">
<h2>This is the right div in the desktop</h2>
<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>
Using Floats:
.left_50,
.right_50 {
float: left;
width: 50%;
}
#media all and (max-width: 500px) {
.left_50,
.right_50 {
float: right;
}
}
<div class="full_100">
<div class="left_50">
<h2>This is the left div in the desktop</h2>
<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="right_50">
<h2>This is the right div in the desktop</h2>
<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>
If flexbox is an option (https://caniuse.com/#feat=flexbox), then you can use order:.
Retain the flex display property value on the containing parent element (.full_100) and in addition alter the flex direction, by declaring flex-direction: column-reverse.
column direction since the nested elements are required to occupy the full-width of the containing element,
and reverse since these elements are required to switch display
positions.
Example:
#media (max-width : 400px) {
.full_100{
display: flex;
flex-direction: column-reverse;
}
.left_50, .right_50{
width: 100%;
}
}
Alternatively:
Adjust the order of nested flex-box elements.
#media (max-width : 400px) {
.full_100{
display: flex;
}
.left_50, .right_50{
width: 100%;
}
.left_50{
order: 2;
}
.right_50{
order: 1;
}
}
An answer that also works without flexbox as requested in one of your comments: If you reverse the order in the HTML code, you can use float: right, which will give you the result you are asking for:
I removed the flex properties to demonstrate the floating solution, but you can add display: flex; and flex-direction: row-reverse;ยด to.full_100`, which will give you the same result using flex, and you can use both together as a fallback for older browsers.
.full_100 {
width: 100%;
}
.left_50,
.right_50 {
width: 50%;
float: right;
}
#media all and (max-width: 400px) {
.full_100 {
display: block;
}
.left_50,
.right_50 {
width: 100%;
}
}
<div class="full_100">
<div class="right_50">
<h2>This is the right div in the desktop</h2>
<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="left_50">
<h2>This is the left div in the desktop</h2>
<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>
I have a container with 2 divs in it, image left 50% and text right 50%. The text section has a read more link that will expand it's containing div giving both the image and text more height, like so -
Closed
Open
div.feature {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
}
div.feature>div.feature-image {
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div.feature>div.feature-image,
div.feature>div.feature-description {
float: left;
width: 50%;
}
<div class="feature">
<div class="feature-image" style="background-image: url('http://cablelabs.dev/wp-content/uploads/2017/07/Smart-Drugs-banner.jpg');"></div>
<div class="feature-description">
<div class="featured-description-container">
<h3>Smart Drugs/Meds</h3>
<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 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>
<br>
<div class="slidingDiv" style="display: block;">
<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 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="read-more-button-container">
Read Less
</div>
</div>
</div>
</div>
I am using flex to achieve this functionality. This works on a full screen but when it goes down to smaller screen sizes the height of the image is 0. Can anyone help explain why the image isn't showing on smaller screens?
I'm looking for a better to a solution to the problem of not having enough content to fill the screen.
Usually, if you want to fill the screen you either make the HTML, body heights 100% and then your container 100% or just use 100vh like in my JSFiddle below.
The problem is if the content does eventually stretch past 100% height of the screen it gets cut off.
I was wondering if there was a way (maybe with flexbox) where you could have 100% height but also if the content goes past 100% the container expands in size.
html, body
{
padding: 0;
margin: 0;
}
.content
{
background: grey;
/* height: 100vh; - this works but if content goes past 100vh it gets cut off */
}
<div class="content">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
Use a container around the content to which you apply 100vh and display: flexand now the content can be made a column flexbox - see demo below and updated fiddle:
html,
body {
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
}
.content {
background: grey;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="content">
<div>
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>
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>
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>
</div>
You are just missing the overflow: auto; in your .content div
Your Fiddle updated
body {
padding: 0;
margin: 0;
height: 100%;
}
.content {
background: grey;
height: 100%;
overflow: auto;
}
I have an issue with my HTML/CSS code. I have a parent div (secClass)and within that I have 2 child divs(secClass1 and secClass2). The problem is that the contents of the child divs are not being contained in the parent div. Do you know whats the issue here? I have included the screenshot and code for reference.
div.secClass {
background-color: 806815;
height: 1000px;
}
div.secClass1 {
background-color: D4BD6A;
display: inline-block;
}
div.secClass2 {
background-color: D4BD6A;
display: inline-block;
}
<div id="section" class="secClass">
<div class="secClass1">
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.
</div>
<div class="secClass2">
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.
</div>
</div>
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
div.navClass
{
float:left;
background-color:D4BD6A;
width:150px;
height:700px;
}
div.navClassItems
{
text-align:center;
}
Since you have your navClass float left, the issue is that the secClass div cannot fit since it is 100% width by default. If you conceptually make it 100% - 150px, your secClass div will pop up into that spot. For example:
#Wrapper{
...
width:1000px;
...
}
.navClassItems {
...
width:150px;
...
}
.secClass {
...
width:850px;
...
}
With
<div id="wrapper">
<div id="Lnav" class="navClass">
<div class="navClassItems"><hr>
Main Page<br><hr>
Metrics <br><hr>
Contact us<br><hr>
</div>
</div>
<div id="section" class="secClass">
<div class="secClass1">
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.
</div>
<div class="secClass2">
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.
</div>
</div>
Do not forget to account for margin or padding. Look into box-sizing and CSS display: inline vs inline-block SO article for more info.
Sorry, I just saw I misnamed the .navClassItems to .navClass. Should be more accurate now.