How do I make my col class of my <div> element responsive?
I would like the text content and the image be shown side by side. The image should go down only when the screen size is too small. Like mobile screens.
Below is a part of my HTML and CSS code for the image and the content:
.content-style {
font-size: 20px;
font-family: cursive;
}
#image-position {
width: 40%;
border-radius: 700px;
}
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
<hr/>
</div>
If you are OK to use Bootsrap, you can use this updated snippet. Otherwise, you will need to implement your own media rules.
.content-style
{
font-size: 20px;
font-family: cursive;
}
#media (min-width: 992px){
.content-style{
float: left;
}
#image-position{
float: right;
}
}
#media (max-width: 992px){
#image-position{
margin: auto;
}
}
#image-position{
width:40%;
border-radius: 700px;
}
.row.someDiv{
margin-left: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-4{
padding-right: 0px;
margin-right: 0px;
}
.row.someDiv .col-md-8{
padding-left: 0px;
margin-left: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row someDiv">
<div class="col-md-4">
<p class="content-style">Hola! I am Gaurav, I work at Torry
Harris as an IFW Support Analyst. I love coding and I wanna build my
career in a lot of fields. If I could name some right way, they
would be, Web Development, SOA Technologies, Automation Testing and
a lot more. Apart from these I also love to read. The genre of my
liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="col-md-8">
<img id="image-position" class="img-responsive"
src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c"
alt="Goku's Image">
</div>
</div>
<hr />
For a simple 2-column layout, consider using the display: flex property for the parent element and flex: 1 property for the child elements. To improve the responsive layout on smaller screens, use a media query to change the display type back to 'block'.
<style>
.wrapper {
max-width: 480px;
margin: 0 auto;
}
.wrapper .row {
display: flex;
/* extra code if you want to center the child elements */
align-items: center;
justify-content: center;
}
.wrapper .row > .column-left {
flex: 1;
}
.wrapper .row > .column-right {
flex: 1;
}
.wrapper .img-responsive {
max-width: 100%;
float: initial;
}
#media screen and (max-width:600px) {
.wrapper .row {
display: block;
}
}
</style>
<div class="wrapper">
<div class="row">
<div class="column-left">
<p class="content-style"> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more. Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics.</p>
</div>
<div class="column-right">
<img align="right" id="image-position" class="img-responsive" src="https://qph.ec.quoracdn.net/main-qimg-24133659af6ec93b462b1ec32a3312e6-c" alt="Goku's Image">
</div>
</div>
</div>
Can you use floats? Try this:
.column-left{
float:left;
display:inline-block;
width:50%;
}
.column-right{
float:right;
display:inline-block;
width:50%;
}
by making the images inline-block and setting width to 50% they will both display in the same line. Floating makes them go as far left or right as they can.
<style>
.content-style {
font-size: 20px;
font-family: cursive;
}
.right {
width: 49%;
float: left;
margin-left: 10px;
background-image: url('https://img1.ibxk.com.br/2014/06/13/13145034906534.jpg?w=480&h=560&mode=crop');
min-height: 200px;
height: 30%;
padding-top: 10px;
background-size: 100% 100%;
border-radius: 700px;
}
.left {
width: 50%;
float: left;
height: 30%;
padding-top: -top: 10px;
}
#media screen and (max-width: 500px) {
.breaker {
clear: both;
display: inline;
height: 100px;
}
.left {
clear: both;
display: inline;
}
.right {
clear: both;
display: inline;
}
}
</style>
<div style="width: 100%;">
<div class="left">
<p> Hola! I am Gaurav, I work at Torry Harris as an IFW Support Analyst. I love coding and I wanna build my career in a lot of fields. If I could name some right way, they would be, Web Development, SOA Technologies, Automation Testing and a lot more.
Apart from these I also love to read. The genre of my liking are Fiction, Adventurous, and Epics. </p>
</div>
<div class="breaker"><br></div>
<div class="right">
</div>
</div>
</div>
Related
I have a screen that looks like this:
The text is at the top while the red section (VideoComponent) is at the bottom. I want the VideoComponent to appear on the left side while all the text should move towards the right. Like a flex box. Or like in 2 columns.
return (
<div>
<main className="content">
<div className="text">
In this section.....TEXT
<div className="video">
<VideoComponent />
</div>
</div>
</main>
</div>
);
I tried adding float right/left to the css but it does not make a difference.
.content{
padding-left: 280px;
padding-top: 100px;
background-color: white;
}
.buttons{
padding-top: 20px;
flex-direction: column;
display: flex;
width: 200px;
}
.heading{
font-size: 25px;
}
.text{
float: left;
}
.video{
float: right;
}
How else can I fix this? Here's a codesandbox: https://codesandbox.io/s/vibrant-turing-tulc2?file=/src/VideoComponent.tsx
You could use Flexbox to achieve this. I know you're working with react, but this is just HTML and CSS. Maybe try something like this:
<div class="wrapper">
<div class="text">
My text
</div>
<div class="image">
<img src="imageurl">
</div>
</div>
.wrapper {
display:flex
}
.text {
margin: 10px
}
https://codepen.io/pauladiniz/pen/abpxeLK
Set the "text" class in the css file to "display: flex;" this should automatically change the objects (the text and the video) to a row. Maybe float will cancel it out but i am not sure about that. Just try it out.
You didn't nested your elements properly.. your JSX should be like this below
<div>
<main className="content">
<div className="video">
<VideoComponent />
</div>
<div className="text">
In this section.....TEXT
</div>
</main>
</div>
Simply update with the below css.
.content{
padding-left: 280px;
padding-top: 100px;
background-color: white;
display:flex;
}
.buttons{
padding-top: 20px;
flex-direction: column;
display: flex;
width: 200px;
}
.heading{
font-size: 25px;
}
.text{
// float: left;
}
.video{
// float: right;
}
This problem will be reolved
The solution to the problem is very simple that you can use cross-browser too.
<main>
<div class="text">text goes here</div>
<div class="video">video here</div>
</main>
Now for the CSS part, you can do this
main{
display:flex;
}
main .text{
order:2;
}
main .video{
order:1;
}
and you can test it on cross-browser we have another CSS property too which is already used by ''Medi'' flex-direction but it does not support Firefox, So you can use "order" which is supported in all browsers.
Just working on a test website [1] which needs to scroll on mobile but for some reason it doesnt work. Any help is appreciated.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.title1 {
font-size: 145px!important;
line-height: 12vh!important;
text-align: right;
float: right;
margin-left: 170px!important;
color: #e8e8e8!important;
margin-top: 340px!important;
margin-right: -80px!important;
font-weight: 900!important;
}
.title2, .title2, .title4{
font-size: 10vh!important;
width: 80%;
line-height: 11vh!important;
float: left;
margin-top: 200px!important;
margin-left: 60px!important;
text-align: left!important;
color: #205545!important;
}
#contain-side {
width: 95%!important;
float: left;
padding-left: 93px!important;
}
#side-text #side-text3{
float: right;
width: 100%;
line-height: 5.5vh;
text-align: left!important;
color: black;
padding-top: 0px!important;
padding-bottom: 100px;
font-size: 33px!important;
letter-spacing: -0.8px;
}
}
I've checked everything. There is no overflow property, still it's not scrolling on mobile.
Please help-out! Thanks!
You should paste your HTML code out, otherwise another cannot analyse what's wrong in your page. At least you should show us the page structure.
I have edited a blank page according to your CSS classes. I hope that I understand your intentions correctly. The following page structure works fine for me. It works on my Huawei and Galexy devices. I hope it can help you a little bit. regards!
<body>
<div class="container-fluid">
<div class="contain-side">
<div id="side-text">
<div class="title1">title1</div>
<div class="title2">
title2
<div class="title4">title4</div>
</div>
text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>
<div id="side-text3">
text3<br>text3<br>text3<br>
text3<br>text3<br>text3<br>
text3<br>text3<br>text3<br>
text3<br>text3<br>text3
</div>
</div>
</div>
</div>
I am struggling to achieve this efect ;
I would like to put n-divs next to each others if the screen is big enough , and one below each other otherwise , and I would like those n-divs to be contained in one div ( the yellow container in my code ) and the title area (black in my code) + the yellow container in a wrapper that encapsulates everything ( green in my code )
I started to write the code , but I am far from achieving the result.
Please , be nice to me , I am new to font-end developement and still in the learning process.
Jsfiddle here --> https://jsfiddle.net/9atbtj0L/1/
I will appreciate any corrections and/or enhancements to my code.
code here :
html
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
</div>
css
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
Thank you.
******************************EDIT***********************************
I've got some help fixing my code from very knowledgeable members of our community , so I have updated my code , alhough I noticed some others problems :
1- block that have enough space to align on a same lign don't do so and go underneath.
2- I would like to put 4 blocks per line with a left-margin only between them. The max-width for the wrapper is 1080px.
4 divs of 255px + 3 left-margin of 20px and 0px on extremes ( right side of the first div and left side of the last div ).
Edited code here :
html :
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
</div>
</div>
</div>
and css :
.homepage-wrapper{
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-list > div {
margin-left: 20px;
margin-bottom: 20px;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
and JSfiddle here ---> https://jsfiddle.net/mz2u6rzg/
I have added an image to better identify blocks. I will appreciate any corrections and enhancements from our community.
Thanks for your help.
I think that you're looking for flex-wrap:wrap.
According to the MDN reference:
The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
flex-wrap:wrap;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
You can achieve this using media query.I have used 400px as the break point you can use as per your choice.Here is a working JSfiddle link https://jsfiddle.net/0f5y8q8b/
#media only screen and (min-width: 400px) {
.homepage-top-category-container-item{
width: 100%
}
.homepage-top-category-container-list{
display:block
}
}
you can use the css media tag to check for screen size but it might not be compatible with old browser
#media only screen and (max-width: 1023px) {
}
#media only screen and (min-width: 1024px) {
}
see CSS media queries for screen sizes
i'Ve updated your fiddle with this code AFTER the 'normal' styling so it will over write the 'default' display for your class
#media only screen and (max-width: 300px) {
.homepage-top-category-container-list{ /*This should be the container*/
display: block;
}
}
https://jsfiddle.net/9atbtj0L/1/
if you use the zoom in/out of your browser you will see it in action.
hope this helps
I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.
I have tried many ways to make it look like that web page, but have not got any luck.
this is the web page
And this is what I have done: CodePen
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
#Grid {
margin-bottom: 40px;
text-align: justify;
font-size: 0.1px;
}
#Grid li {
display: inline-block;
background: #eee;
width: 23%;
padding-top: 23%;
/* Used instead of height to give elements fluid, width-based height */
margin-bottom: 2.5%;
}
#Grid:after {
content: 'haha';
display: inline-block;
width: 100%;
border-top: 10px dashed #922d8d;
/* Border added to make element visible for demonstration purposes */
}
ul li .icon {
width: 100%;
display: table;
min-height: 300px;
height: 300px;
padding: 0;
background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}
#Grid .placeholder {
padding: 0;
border-top: 10px solid #922d8d;
/* Border added to make element visible for demonstration purposes */
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
#media (max-width: 800px) {
#Grid li {
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
#media (max-width: 600px) {
#Grid li {
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
#media (max-width: 400px) {
#Grid li {
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
font: 600 20px"Helvetica Neue";
text-align: right;
text-transform: uppercase;
}
label {
padding: 8px 15px;
margin-bottom: 20px;
display: block;
font: 100 22px"Helvetica Neue";
border-left: 10px solid #922d8d;
}
label:last-of-type {
border-left: 10px dotted #922d8d;
}
p {
font: 200 15px/1.5em"Helvetica Neue";
max-width: 400px;
margin-bottom: 30px;
color: #333;
}
Update
Here is my updated code. The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.
Updat 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="row hidden-xs icon">
<div class="title">1 JAN</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">This Event is Full</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">01</div>
<div class="event-month">JAN</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">This event is full</div>
<div class="event-title">NIKE RUN 10 KM</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i>
</div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i>
</div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
If you are already using Bootstrap, you already have this capability. Use hidden-.. and the col-xx-... classes to make your page responsive.
See this example: http://embed.plnkr.co/IH4WeZ/
It's all done using bootstrap css. The trick is to hide stuffs at certain media query and show them whenever appropriate.
I only coded it be responsive at small and extra small size, so on medium and large it's a bit bonker... but you get the idea...
You could use the Bootstrap grid system to do something like this.
You could use a combination of the columns, and offset to achieve this.
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
That will span three columns across the full width of the page. You could experiment with smaller width columns, and adding an offset to the first one to push it away from the left edge.
http://getbootstrap.com/css/#grid-offsetting
If you want to achieve a similar effect, try and replicate it with minimal code and work from there.
Here is a simple example I have knocked up to get the layout working:
http://codepen.io/anon/pen/OPeXgj
HTML
<ul class="events">
<li>Event Name</li>
<li>Event Name</li>
<li>Event Name</li>
</ul>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.events {
clear: both;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.events li {
float: left;
clear: both;
width: 100%;
background: yellow;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 768px) {
.events li {
width: 33.3%;
clear: none;
}
}
Using a mobile first approach, child items are styled with a width: 100%; and clear: both; Then, with a simple media query, I float them left and set a width to around a 3rd (33.3%) (there could be a better way, but this was a quick fix).
If you're using a grid system, it may be even easier. I would look into Bootstrap or Foundation, as many of these problems have already been solved many times over.
Good luck!
Last resort solution is to code two versions. One for mobile and another one for desktop. Then use media queries to hide one on mobile resolution and the other on desktop.
This will add some extra load on the page, but it should do it.
Objective
To have the page the page on my website to expand in height according to the dynamic data pushed into the container.
Background
The page has a set of images and text that is populated via a JSON feed. The text is overflowing into the footer because it is not expanding its containing div which would subsequently expand its containing div which would subsequently expand the body. So I need for a specific child div to push its multiple parent divs.
I have searched similar problems on Stackoverflow and attempted various CSS solutions such as giving all of the parent divs a CSS rule of clear:both or even in the HTML inserting a <div style="clear:both"></div> but none of those solutions worked.
So now I am experimenting with jQuery to see if I could find a solution to this problem.
I know I need to create a variable of some sort like
var newHeight = $("#carousel").height();
And that it needs to have push out the height with something like
$(".case").height(newHeight);
This is my current HTML
<body>
<div class="container">
<div class="block push">
<div id="mainContent" class="row">
<div class="large-12 columns">
<h1>Before & After Case Gallery</h1>
<div id="casesContainer">
<div id="carousel"></div>
</div>
<script id="casestpl" type="text/template">
{{#cases}}
<div class="case">
<div class="gallery_images_container">
<div class="item_container">
<div class="gallery_heading">BEFORE</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_b_300.jpg" alt="Photo of {{alt}}" />
</div>
<div class="item_container">
<div class="gallery_heading">AFTER</div>
<img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/cases/{{image}}_a_300.jpg" alt="Photo of {{alt}}" />
</div>
</div>
<div class="description_container">
<p>
<span><strong>Case Number {{{number}}} {{version}}:</strong></span>
{{{description}}}
</p>
</div>
</div>
{{/cases}}
</script>
The {{{description}}} in the <p> is overflowing into its parent divs <div class="description_container"> then <div class="case"> then <div id="carousel"> then <div class="casesContainer"> then <div class="large-12"> (which is a container in Foundation) then <div class="mainContent"> and so on.
Here is my CSS
html, body { height: 100%; }
.container { display: table; height: 100%; width: 100%; margin: 0 auto; }
.block { display: table-row; height: 1px; }
.push { height: auto; }
#mainContent {}
#casesContainer {
min-width:310px;
}
.image-navigation {
background: rgb(6,6,6);
color: #fff;
width:100%;
max-width: 640px;
height: 24px;
}
.image-navigation a {
color: #fff;
padding: 6px;
}
.image-navigation-previous, .image-navigation-next{
float:left;
width: 50%;
}
.image-navigation-previous {
text-align: right;
}
.image-navigation-next {
text-align: left;
}
#carousel {
height:auto;
min-height:600px;
overflow-y: auto;
}
.case {
max-width: 640px;
height:auto;
}
.gallery_images_container {
clear: both !important;
}
.item_container{
max-width: 320px;
float: left;
}
.gallery_heading {
background: black;
color: white;
width: 100%;
text-align: center;
}
.description_container {
background: none repeat scroll 0% 0% white;
min-width: 308px;
max-width: 640px;
padding: 6px 6px 12px 6px;
clear: both !important;
}
I realize that #carousel { height:auto; min-height:600px; overflow-y: auto; } is an ugly hack. It was just an experiment.
I hope that I am just completely missing something and this is an easy jQuery fix. Or maybe my HTML and CSS could use a different structure?
Not a complete fix but maybe helpful.
I've used this function but Internet Explore increases the heights on resize.
$(document).on('ready', function() {
// $(window).on('resize', function() {
var height1 = $("#r1c1").height();
if (height1 < $("#r1c2").height()) { height1 = $("#r1c2").height() }
if (height1 < $("#r1c3").height()) { height1 = $("#r1c3").height() }
$("#r1c1").height(height1);
$("#r1c2").height(height1);
$("#r1c3").height(height1);
// }).trigger('resize'); // Trigger resize handlers not working correctly with IE8.
});//ready