I have 2 different divs with different parents and I would like to make them the height of the tallest one.
I managed that with the following code:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
the html:
<div class="contact-information">
<div class="centered" id="right">
<h3>INFORMATII</h3>
<p>Strada</p>
<div class="social-icons-wrapper">
....
</div><!-- social-icons-wrapper -->
</div><!-- centered -->
</div><!-- contact-information -->
<div class="contact-box">
<div class="width-for-centering" id="left">
<div class="contact-title">
<h3>CONTACTEAZA-NE!</h3>
<p>Completeaza</p>
</div><!-- contact-title -->
<div class="tocenter" data-aos="zoom-out">
<?php echo do_shortcode('[contact-form-7 id="63" title="formular"]'); ?>
</div><!-- tocenter -->
</div><!-- width-for-centering -->
</div><!-- contact-box -->
And the css
#right{
width:400px;
height: auto;
overflow: hidden;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
#left{
width:600px;
height: auto;
overflow: hidden;
z-index: 1;
padding-bottom: 0;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
This works, both divs now have the same height, my problem is that they are taller than they should be. Left's children only add up to about 600px in height, but left has 737px in height now.
I found that the problem could be the script above because when I delete it, left does take the height of it's children.
The only problem I see is with your CSS. Specifically with the position:absolute; and transform.
Look at this fiddle where I used your code without CSS: https://jsfiddle.net/g0utu4bz/
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
Its pretty easy with flexbox, you could do something like this:
.wrapper {
display: flex;
}
#right{
width:400px;
background-color: red;
}
#left{
width:600px;
background-color: blue;
}
<div class="wrapper">
<div class="contact-information" id="right">
<div class="centered">
<h3>INFORMATII</h3>
<p>Strada</p>
<div class="social-icons-wrapper">
....
</div><!-- social-icons-wrapper -->
</div><!-- centered -->
</div><!-- contact-information -->
<div class="contact-box" id="left">
<div class="width-for-centering">
<div class="contact-title">
<h3>CONTACTEAZA-NE!</h3>
<p>Completeaza</p>
</div><!-- contact-title -->
<div class="tocenter" data-aos="zoom-out">
</div><!-- tocenter -->
</div><!-- width-for-centering -->
</div><!-- contact-box -->
</div>
I've edited the content using flex-box and media queries, in order to match the request... and i've added some css to be a litte more mobile-friendly (but is only a little optimization, your layout need some more work ;) )
I hope that this will be helpful!
P.s. expand the snipped ("run code" -> "full page") to see correcty how media queries works, otherwise you'll see only 1 column!
.left-right-container {
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
/* this rules will be used only on devices with large screen, to make the layout a little bit more responsive */
.left-right-container {
flex-direction: row;
}
.left-right-container .left {
width: 600px;
}
.left-right-container .right {
width: 400px;
}
.left-right-container .last {
min-height: 50px; /* as many as you need to show socials */
}
}
.left-right-container .left, .left-right-container .right {
height: 100%;
display: flex;
flex-direction: column;
}
.left-right-container .left {
background: green;
}
.left-right-container .right {
background: red;
}
.left-right-container .left > *, .left-right-container .right > * {
flex-grow: 0;
}
.left-right-container .left > .take-all, .left-right-container .right > .take-all {
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-right-container">
<div class="contact-information">
<div class="centered right">
<h3>INFORMATII</h3>
<p>Strada</p>
<div class="social-icons-wrapper take-all">
1<br>2<br>3<br>4<br>5<br>6
</div>
<div class="last">other content</div>
</div><!-- centered -->
</div><!-- contact-information -->
<div class="contact-box">
<div class="width-for-centering left">
<h3>CONTACTEAZA-NE!</h3>
<p>Completeaza</p>
<div class="tocenter take-all" data-aos="zoom-out">
1<br>2<br>3
</div>
<div class="last">other content</div>
</div><!-- width-for-centering -->
</div><!-- contact-box -->
</div>
Related
I have an app with a Leaflet.js map and a sidebar. On the desktop, it appears to look fine, but when I run page inspector and select a mobile version, there is whitespace at the bottom of the page(outside of the map/sidebar), along with an odd grey box.
I cannot inspect either the whitespace or the grey box when I mouseover them with the pointer. I have tried changing the body CSS to no avail (including no bottom margin/padding for the body).
I am a bit mystified here. Here's the basic HTML structure:
<body>
<!-- links to scripts go here -->
<!-- Content Starts here -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
</div>
<!-- filter map data with calendar -->
<div id="datepicker"></div>
</nav>
<!-- Page Content -->
<div id="content">
<!-- map -->
<div id="map" style="min-width: 100vh; min-height: 100vh">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<span>Filter Events</span>
</button>
</div>
</div>
</div>
<script>
</script>
And, some of the relevant CSS:
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
height:100%;
max-height:100%;
overflow: hidden;
padding-bottom: 1px;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
}
.filterContainer ul{
list-style: none;
margin: 0;
margin-top: -12%;
margin-left: -12%;
}
#content{
width:100%;
height:100%;
}
#map{
height:100%;
}
And, finally, an image of the problem:
So I'm trying to animate a sidebar sliding in from the left, and the animation works well but it makes the other element, which uses flex for sizing, jumpy while it automatically resizes. This is what it looks like:
Here's some of my CSS:
body{
display: flex;
}
#sidebar{
display: none;
float: left;
height: 100%;
position: relative;
padding-left: 20px;
padding-right: 20px;
}
#mainScreen{
float: right;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
And here's my basic HTML structure:
<body>
<div id="sidebar>
<!-- stuff -->
</div>
<div id="mainScreen">
<div id="headerCont"><!-- stuff --></div>
<div id="messageCont"><!-- stuff --></div>
<div id="chatInputCont"><!-- stuff --></div>
</div>
</body>
And the children of #mainScreen have another flex arrangement, but vertically. In Javascript I'm using $("#sidebar").toggle("slide", { direction: "left" }, 1000); when you click the menu button and it nearly works but I just want to eliminate the jumpiness. Does any know how to fix this, or if there are any alternative approaches I haven't thought of?
Its actually float creating problem, Its better restructure your HTML if Possible something like this.
<body>
<div class="main-content>
<div class="left-section">
<div id="sidebar>
<!-- stuff -->
</div>
</div>
<div class="right-section">
<div id="mainScreen">
<div id="headerCont"><!-- stuff --></div>
<div id="messageCont"><!-- stuff --></div>
<div id="chatInputCont"><!-- stuff --></div>
</div>
</div>
</div>
</body>
Now remove float and use flex on .main-content.
css
.left-section {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
}
.left-section.slide {
left: 0;
}
.main-content.slide {
margin-left: 188px; // left-sidebar width
}
function sidebarClick(){
$(".left-section, .main-content").toggleClass("slide");
}
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}
Basically I'm looking to get my horizontal scrolling sites (using indexhibit) images to be relative to browser size.
At the moment using the following code it seems to resize the height but not the width?
This is my javascript that I found from this thread http://www.indexhibit.org/forum/thread/11531 which I've attached in an external js doc.
function resizeit() { showHeight('document', $(window).height());
function showHeight(ele, h) {
$('.picture img').css( 'height', h -30 );
$('#img-container').css( 'height', h -30 );
}
var sum = 0;
$('.picture img').each(function()
{
sum += $(this).width() +21;
});
$('#img-container').width( sum );
}
$(window).resize(function() {
resizeit();
});
$(window).load(function(){
resizeit();
});
And this is my PHP
<script type='text/javascript' src='{{baseurl}}/ndxzsite/js/images.js<last:page:version
/>'></script>
<last:page:css />
<last:page:onready />
<plugin:backgrounder />
</head>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div class="header">
<h1></div>
<div id='index'>
<div class='menu'>
<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'><p>© Lucy bower 2014</p> <p>Built by Neptik</p>
{{obj_ibot}}</div>
<last:page:append_index />
</div>
</div>
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->
</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>
And my images end up sitting in a stack like this
I just don't really understand what I'm doing wrong if it's worked for other people :( is there any other way of doing it?
Instead of sizing the img tag, I would personally recommend making the image file the background-image of the parent div ie.
<div style="background-image=url('locationofImage.png'); background-size:cover;"></div>
background-image:url(''); - Sets the background image
background-size:cover; - Set how the image should fill the div
This will simply position the image in the background of the div to ensure there is no whitespace. You then can using css set the height and width of the div to fit the space you need.
I'am not really sure if you can use it. But the whole layout can be done with CSS alone, here is an example.
Demo Here: http://jsfiddle.net/T9Zz5/1/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
overflow-y: hidden;
margin:0;
padding:0;
}
.wrap
{
overflow-x: visible;
white-space: nowrap;
height: 100%;
width: 100%;
}
.left
{
width: 200px;
float: left;
}
.item
{
display: inline-block;
width: 100%;
height: 100%;
padding: 4px;
background-color: green;
margin-left: -4px;
text-align: center;
vertical-align: top;
}
.item img
{
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.item:before
{
display: inline-block;
content:"";
vertical-align: middle;
height: inherit;
}
/* First Item width - nav width */
.left + .item
{
width: calc( 100% - 200px );
margin-left: 0px;
}
.item:nth-child(2){
background-color: yellow;
}
.item:nth-child(3){
background-color: purple;
}
HTML:
<div class="wrap">
<div class="left">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
<div class="item"><img src="http://www.placehold.it/1000x100" /></div>
<div class="item"><img src="http://www.placehold.it/1000x800" /></div>
</div>