I have a page layout which employs floating boxes with constant width and variable height, inside a variable-width container (which I'm going to make constant for the sake of this question). This is my page's code:
CSS:
#main {
width: 640px;
margin: 0 auto;
min-height: 100%;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
}
HTML:
<body>
<div id="main">
<div class="profile">1: I'm tall. 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="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
When I apply this code, div 4 seems like it's "stuck" in the corner, instead of to the left of div 3 like it should be: (Codepen preview).
What am I doing wrong, and how should I fix this glitch?
You could clear the odd divs:
.profile:nth-child(odd) {
clear:left;
}
Updated Codepen
#main {
width: 640px;
margin: 0 auto;
background: #444;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
background: silver;
}
.profile:nth-child(odd) {
clear: left;
}
<body>
<div id="main">
<div class="profile">1: 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="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
Related
Must stick to the bottom of the webpage, should not be visible until
the user reaches the bottom of the page
For example
HTML
<footer>
This is a footer.
</footer>
CSS
footer {
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
The problem is, it's still visible when the user hasn't reached the bottom of the page. I want it so it's not visible until they hit the bottom.
There are many techniques you can use, most do not involve JavaScript. Some rely on more modern CSS features not yet implemented in all browsers (like grid).
Here is a simple, fairly robust and cross browser example. It involves giving the body and HTML a 100% height and using negative margins.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>
With more content, the footer is pushed down
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
footer.sticky {
height: 50px;
margin-top: -50px;
background-color:#efefef;
}
<body>
<div class="content">
<div class="content-inside">
<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>
<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>
<footer class="sticky">
<p>some footer content</p>
</footer>
</body>
You can use javascript ...
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
document.getElementsByTagName("footer")[0].style.visibility = 'visible';
}else{
document.getElementsByTagName("footer")[0].style.visibility = 'hidden';
}
};
body {
position: relative;
height:1000px; /*only for example to having scroll */
}
footer {
visibility:hidden;
padding: 10px;
background-color: #999999;
color: white;
text-align: right;
bottom: 0;
width: 96.75%;
position: fixed;
}
<footer> the footer</footer>
I created a parent div with fixed size which contains 2 children, but I want that only the second one will have overflow: auto;
Unfortunately, it doesn't work as expected...
Here is my snippet:
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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>
Any ideas?
You can use max-height CSS a property. With the help of max-height, You can set the maximum height. If the content is exceeding the maximum height, Y scroll will be automatically implemented.
Code
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
max-height:100px
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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>
You should set a max-value before the overflow kicks in...
EDIT: Set max-height to % so that it will always be within you changing needs. I kept it as 80% here since it fits in within the second-child nicely
.second-child
{
max-height: 80%;
overflow: auto;
}
Now it should be good!
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
max-height: 80%;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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>
Updated:
Define a max-height to tell the browser after what length the overflow would take place
Update 2:
Make the container a table
Make the other 2 div's table-rows
In 2nd div, put the text in a position relative following position absolute
.parent {
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
display: table;
}
.first-child,
.second-child {
display: table-row;
}
.second-child {
height: 100%;
}
.second-child-content-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.second-child-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
<div class="second-child-content-wrapper">
<div class="second-child-content">
"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>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I'm trying to make a web page with a 'header' div of fixed height then a 'content' div below it. Within that content div are several different divs with actual page content in them. In the actual project, the height of all of these elements may vary between different screens and users as their content is mostly generated by PHP.
Sorry if that explanation is unclear, but the following demonstrates what I have got so far:
https://codepen.io/anon/pen/ZJPgWm
(the code is poorly formatted and some of the values look a bit wierd because I've just thrown this together quickly as an imitation of my actual project).
#main {
width: 90%;
min-width: 400px;
max-width: 1200px;
height: calc(100vh - 10px);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
#head {
background-color: blue;
font-size: 3vh;
}
#content {
background-color: red;
flex-grow: 1;
display: flex;
}
#left {
width: calc(16% - 6px);
float: left;
background-color: green;
}
#inner {
font-size: 10vh;
flex-grow: 1;
width: calc(84% - 6px);
float: left;
margin-left: 8px;
margin-bottom: 10px;
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
background-color: yellow;
}
<body>
<div id="main">
<div id="head">
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 id="content">
<div id="left">
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 id="inner">
<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>
</div>
</body>
On chrome, a scroll bar is shown within the #inner div. This is what I want.
On firefox and MS Edge, the overflowing content of the #inner div is just cut off, so it is impossible to see that content (without a taller screen).
I should note that the reason for this seems to be that, in chrome, the #inner and #content divs have their height controlled such that their bounding boxes don't go outside the boundary of the #main div. However, in firefox, their bounding boxes extend to below the bottom of the page (shown by developer tools).
What I am looking for is a method which will make all browsers give the result which is currently given by chrome. Ideally, an explanation of which browser is 'correct' and why they are different would also be helpful.
Note that I want to avoid using JS if at all possible. Any help or advice is appreciated.
Flex item's has a min-height that defaults to auto, which means it doesn't shrink below its content's size, so when you nest them like this and put the overflow: auto on a flex item's child, you need to let it know it is allowed to shrink.
Add min-height: 0; to your content rule and they will behave similar.
#main {
width: 90%;
min-width: 935px;
max-width: 1600px;
height: calc(100vh - 90px);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
#head {
background-color: blue;
font-size: 20px;
}
#content {
background-color: red;
flex-grow: 1;
display: flex;
min-height: 0;
}
#inner {
font-size: 60px;
flex-grow: 1;
overflow-y: auto;
}
<body>
<header>
</header>
<div id="main">
<div id="head">
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 id="content">
<div id="inner">
<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>
</div>
</body>
I want to align an image beside a text. But for some reason, all I trye makes the text either wrap around the image or be placed below it. This is my current code:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
img {
height: 16px;
margin-right: 20px;
}
div {
display: inline-block;
height: 100%;
}
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div><img src="/src/to/img.jpg"></div>
<div>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>
</div>
At the moment, the text is place below the image. I have also tried
div tag gets float:left - places text below image
replacing div with span - wraps text around image
replacing div with span and adding display:inline-block; to spans - places text below image
removing div tag around image and text - wraps text around image
float:left; on only div with image - wraps text around image
float:left; on div with image and float:right; on div with text - places text below image
adding display: inline-block; to img tag - places text below image
Note that the container, box and row classes comes from Bootstrap. Can that affect it somehow?
Searching has not found me a solution other than the ones I've tried before, but I might have overlooked some solution posted here before.
You could use display: table-cell on divs inside cc-testimonial-quote DEMO
.cc-testimonial-quote > div {
display: table-cell;
}
If you are using bootstrap why don't you let it set the layout for you without additional css?
<div class="container box">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="/src/to/img.jpg">
</div>
<div class="col-sm-8">
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>
Here is your updated code : https://jsfiddle.net/06c3av7r/1/
You have to make some changes in DIV elements.
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
img {
height: 16px;
margin-right: 20px;
}
div {
display: inline-block;
height: 100%;
}
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div><img src="/src/to/img.jpg">
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>
</div>
Try the solution below. I assigned display: flex to the container and removed some stuff.
.cc-testimonial-quote {
display: flex;
font-style: italic;
font-weight: 600;
max-width: 700px;
}
img {
height: 16px;
margin-right: 20px;
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div>
<img src="/src/to/img.jpg" />
</div>
<div>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>
</div>
You want to do this effect:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
}
.cc-testimonial-quote > img {
float: left;
height: 26px;
margin: 0 10px 10px 0;
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
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>
Or this effect:
.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;
}
.cc-testimonial-quote > .image-wrapper {
float: left;
}
.cc-testimonial-quote > .image-wrapper > img {
height: 26px;
margin: 0 10px 10px 0;
}
.cc-testimonial-quote > .text-wrapper {
overflow: auto;
}
<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div class="image-wrapper">
<img src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
</div>
<div class="text-wrapper">
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>
</div>
Choose one in a comment and I'll explain it in detail!
I have an issue with the child divs not appearing side by side. There are two divs which appear at the bottom of the first div.
I have tried display:inline-block - but to no avail.
div.bodyClass {
background-color: D4BD6A;
height: 850px;
}
div.navClassItems {
text-align: center;
display: inline-block;
width: 250px:
}
div.secClass1 {
background-color: F9E18D;
display: inline-block;
}
div.secClass2 {
background-color: F9E18D;
display: inline-block;
}
<div id="mainbodyWithNav" class="bodyClass">
<div class="navClassItems">
<hr>Main Page
<br>
<hr>Metrics
<br>
<hr>Contact us
<br>
<hr>
</div>
<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>
you need to apply display:inline-block and set a (max)-width to all the children
.bodyClass {
background-color: #D4BD6A;
height: 850px;
font-size:0 /* inline-block gap fix */
}
.bodyClass > div{
text-align: center;
display: inline-block;
vertical-align:top;
max-width: 250px;
font-size:16px /* reset font-size */
}
[class*="sec"] {
background-color: #F9E18D;
}
<div id="mainbodyWithNav" class="bodyClass">
<div class="navClassItems">
<hr>Main Page
<br>
<hr>Metrics
<br>
<hr>Contact us
<br>
<hr>
</div>
<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>
Try this...
div.secClass1
{
background-color:F9E18D;
width:50%;
float:left;
}
div.secClass2
{
background-color:F9E18D;
width:50%;
float:left;
}
and put an <hr /> just before the secClass1 div so that it separates it from the menu above.
Use "Float:left" and set their width both to 50% (Or width of container divided by 2):
//below is container class
container{
width: 100%;
}
div.secClass1
{
float: left;
width: 50%;
background-color:F9E18D;
display:inline-block;
}
div.secClass2
{
float: left;
width: 50%;
background-color:F9E18D;
display:inline-block;
}
One option would be to set width to calc(50% - 125px) and float them left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/39/
div.secClass1
{
width: calc(50% - 125px);
float: left;
background-color:#F9E18D;
}
div.secClass2
{
width: calc(50% - 125px);
float: left;
background-color:#F9E18D;
}
try using "float: left;" instead