We Keep Coding

How to dynamically change element alignment?

What I am trying to do:
I am creating a page footer using html, css, and bootstrap. When the page is open on a desktop, it looks like this (which is what I want):
But when the web page reaches the minimum width, it looks like this:
However, I would like it to look something like this when the web page has been decreased to the minimum width:
Problem/ What I tried:
So, I am have trouble with two things.
Problem 1: I can't seem to find a solution where I can get both the images and the text to center once there is no more room for them to be side by side.
Problem 2: I can't find a solution where I keep the size of the black jumbotron the same and that keeps the text from flowing out the bottom of it.
I tried creating a table (with text in place of the images to test it). I thought if I put the elements in a table with the images centered in the far left column and the text centered in the far left column, then, when the table got small enough, the columns would stack and the elements would be centered. But I couldn't get that to work.
I also tried adding two smaller jumbotrons within the larger one. One that holds the images and another that holds the text. But I still couldn't get the images to center properly, and there is still an issue with the text flowing out the bottom of the black jumbotron.
What am I doing wrong, and how can I do what I am trying to do using CSS and HTML? If Javascript is the only solution, I don't mind trying that, I just don't use it much.
Code:
Here is my HTML:
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
Here is my CSS:
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}

You can do this with bootstrap grid and media queries DEMO
#media(min-width: 768px) {
.custom-row p {
text-align: right;
}
}
#media(max-width: 768px) {
.custom-row {
text-align: center;
}
}

something i sorted out that can then be worked on.
http://codepen.io/simondavies/pen/jqjgxL
HTML
<footer>
<div class="footer-social-wrapper">
<div class="social-wrapper">
<div class="social-icons"><div class="facebook"></div></div>
<div class="social-icons"><div class="twitter"></div></div>
<div class="social-icons"><div class="youtube"></div></div>
</div>
</div>
<div class="footer-copy">
<p>© 2016 Company Name. All Rights Reserved.</p>
</div>
</footer>
CSS:
body {margin:0;padding:0;}
footer,
.social-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
position: relative;
height: 50px;
}
footer:before,
.social-wrapper:before,
footer:after,
.social-wrapper:after { content: " "; display: table;}
footer:after,
.social-wrapper:after {clear: both;}
.footer-social-wrapper {
margin:0;
padding: 0;
position: relative;
float: left;
width: 30%;
}
.footer-copy {
margin:0;
padding:0;
position: relative;
float: left;
width: 70%;
height: 50px;
}
.footer-copy {
text-align: right;
}
.social-wrapper .social-icons {
margin: 0px;
position: relative;
float: left;
width: 33.333%;
height: auto;
}
.social-wrapper .social-icons .facebook {
margin: 0 auto;
background:blue;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .twitter {
margin: 0 auto;
background: red;
width: 40px;
height: 40px;
}
.social-wrapper .social-icons .youtube {
margin: 0 auto;
background: yellow;
width: 40px;
height: 40px;
}
#media(max-width:700px){
.footer-social-wrapper,
.footer-copy {
margin: 0 auto;
width: 100%;
text-align: center;
}
}
without a frame work like bootstrap etc.

Inside jumbotron, create another element contentWrapper and put contents inside then add a media query for it. You need to set width and margin: auto to make it centered.
Try resizing the window width to below 800 pixels, and you will see the contents are aligned center.
#facebookLogo{
float:left;
width:30px;
height:30px;
margin:5px;
}
#twitterLogo{
float:left;
width:40px;
height:30px;
margin:5px;
}
#youtubeLogo{
float:left;
width:40px;
height:25px;
margin:5px;
}
#footerFont{
float:right;
color:white;
font-size:10px;
padding-top:10px;padding-bottom:10px; text-align:right;
}
#footerJumbotron{
background-color:black;border-radius: 0 !important;
height:100px !important;padding-top:30px;
}
#media (max-width: 800px) {
.contentWrapper{
width: 400px;
margin: auto;
}
}
<div class="container">
<div class = "grid">
<div class="row">
<div class="jumbotron" id="footerJumbotron">
<div class="contentWrapper">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>

In Bootstrap 4 you can just use the responsive alignment classes, something like text-xs-center text-sm-left, Also your code is highly repetitive, consider something like this:
#footerJumbotron img {
width: 30px;
height: 30px;
margin: 5px;
}
#footerFont {
color: white;
font-size: 10px;
}
#footerJumbotron {
background-color: black;
border-radius: 0 !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="grid">
<div class="row">
<div class="container-fluid jumbotron" id="footerJumbotron">
<div class="col-sm-6 text-sm-left">
<img src="ContactImages\facebookLogo.png" id="facebookLogo">
<img src="ContactImages\twitterLogo.png" id="twitterLogo">
<img src="ContactImages\youtubeLogo.png" id="youtubeLogo">
</div>
<div class="col-sm-6 text-sm-right">
<p id="footerFont">© 2016 Company Name. All Rights Reserved.
<br> Built & Managed by Company Name</p>
</div>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/veyytd6u/
* no need to set a fixed height if your footer is going be dynamic (in mobile when there are 2 rows, the height must change so leave it automatic)
* consider escaping the & in HTML => &

Make floated element have height 100% to fill page

I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}

There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.

Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');

Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});

Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.

Css Rescaling Fixed Banner

So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers

Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>

How to add a class if div height reaches a fixed height?

I have some modules on my project that are generated dynamically. This basic HTML will work fine as an example of what I want to achieve:
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
My problem is that I don't want this module to ever grow too much vertically, if the web administrator writes a long "description" (I can't limit how much he wants to write as the "description" text will show on other pages).
I found a nice CSS trick to add "ellipsis" to a multiple lines container. Here you can see this "trick" in the .ellipsis (plus the basic CSS):
.container {
background-color: #eee;
width:100px;
margin:20px;
float:left;
}
.image {
border:2px solid #999;
width:100px;
height:60px;
background-color: #fff;
margin-bottom:10px;
}
.end {
border:2px solid #999;
width:100px;
background-color: #fff;
}
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom:10px;
position:relative;
}
.ellipsis:before {
content:"";
float: left;
height:100%;
width: 5px;
height: 200px;
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 20px; margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color:#eee;
}
You can see everything together here: JSFIDDLE
The problem I have is that while ellipsis works fine, I don't want ALL the modules to have a fixed height. I just want to limit the max-height to a fixed size. (Just delete "height: 200px;" from ".ellipsis:before" to see what I want to achieve.)
So, the problem is the .ellipsis:before fixed height. 100% height won't work unless I turn the position to absolute, but then the "ellipsis" trick won't work as the float won't take effect.
Any help with my problem will be greatly appreciated. I don't think there may be a pure CSS solution, (trust me, I have tried) and I'm very bad a JavaScript/jQuery. However, if you have a jQuery solution that may help, I could implement it in the project (and give you nice rep points here :) ). I was thinking something like:
If div.ellipsis > 200px then add height:200px to ellipsis:before
Thanks a lot in advance and please excuse my poor English. Hope the question is clear enough.

There is no need of :before pseudo class. Check this fiddle.
.ellipsis:after {
content:"\02026";
position: absolute; /* removed position: relative */
top: 200px; /* equal to max-height value */
right: 0px;
margin-top: -25px; /* equal to line-height value */
/* other styles */ /* removed float property */
}
Working Fiddle
In the above fiddle, I removed :before pseudo class and set the position of the :after pseudo class to top by 200px which is equal to the given max-height value of the .ellipsis.
and to remove the default upper and lower gaps of the container, I added margin-top: -25px which is equal to the given line-height.
Note: You can apply just top: 175px which is result value of subtraction of given max-height and line-height values.

Here's a simple jQuery solution.
First add a class for when an ellipsis reaches the maximum height, let's call it maxed. Set the :before height for that to 200px:
.ellipsis.maxed:before {
height:200px;
}
Then as you say. you can do some simple jQuery to check the height. If it is the maximum, then add our maxed class to the ellipsis:
$(function() {
$('.container .ellipsis').each(function() {
var $this = $(this);
if($this.height() >= 200) {
$this.addClass('maxed');
}
});
});
Updated fiddle here

You can do it easily with jquery (I assume jquery is an available option in your project).
You just have to
Remove all "ellipsis" class from HTML
Add "ellipsis" whenever needed with JS (= when your content exceeds 200px).
For that, you can use the following :
$('.description').each(function(){
if($(this).height() >= 200 ){
$(this).parent().addClass('ellipsis');
}
});
Working JSfiddle

You can't directly manipulate pseudo elements like :before. What you could do here is add a class for large ellipsis with height: 200px. Then use jQuery to add the new class according to the height.
$(function() {
$('div.ellipsis').each(function (index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
See the code snippet for the full example:
$(function() {
$('div.ellipsis').each(function(index, element) {
if ($(element).height() >= 200) {
$(element).addClass('ellipsis-large');
}
});
});
.container {
background-color: #eee;
width: 100px;
margin: 20px;
float: left;
}
.image {
border: 2px solid #999;
width: 100px;
height: 60px;
background-color: #fff;
margin-bottom: 10px;
}
.end {
border: 2px solid #999;
width: 100px;
background-color: #fff;
}
/* ellipsis class for small modules */
.ellipsis {
overflow: hidden;
max-height: 200px;
line-height: 25px;
margin-bottom: 10px;
position: relative;
}
.ellipsis:before {
content: "";
float: left;
height: 100%;
width: 5px;
/* height: 200px; */
}
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 20px;
margin-left: -20px;
padding-right: 5px;
text-align: right;
background-color: #eee;
}
/* ellipsis class for large modules */
.ellipsis-large:before {
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class=" ellipsis">
<div class="description">
here we have a text not very long for a small module
</div>
</div>
<div class="end">
buttom
</div>
</div>
<div class="container">
<div class="image">
image here
</div>
<div class="ellipsis">
<div class="description">and here we have a much longer text to reach the 200px "ellipsis" div to activate the effect made with pure css. a nice discovery from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
</div>
</div>
<div class="end">
buttom
</div>
</div>

Is it possible to have a non-rectangular div?

I need to shape ONE div tag in the following shape:
Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.

Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/
It's essentially using three divs to aggregate the mouse events, like so:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
And I use a :hover rule on the outer element to affect the border colors on the inner divs:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.

A one div solution using pseudo elements:
/* relevant styles for shape */
.tab {
border-top-left-radius: 0px;
margin-left: 100px;
}
.tab:before {
content:"";
display: block;
position: relative;
height: 50px;
width: 50px;
right: 52px; /* width + border width */
top: -2px;
background-color: white;
border: inherit;
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* styles to look like example */
div{
box-sizing: border-box;
background-color: white;
border: 2px solid red;
height: 100px;
width: 200px;
border-radius: 5px;
}
div:hover {
border-color: green;
}
<div class="tab"></div>

See this jsFiddle example:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>

You can either use a map or use 2 divs and alter the borders so it looks like one shape.

two options that I can think of:
1) give the div a background image and use CSS pseudo class :hover to change the background image to one that indicates a hover state
2) put three div's inside a wrapper, and position them so so you have one in the upper left hand corner, and then two stacked on top of each other, so that you can simulate the top half of a larger div missing the upper left half border. I don't think CSS alonw can target all the divs in order to change their borders, so will probably have to use JS to execute the hover behavior, by applying an event handler to all three divs.

No. Divs are ALWAYS rectangular. You could fake it in a number of ways (using a background image would be one option).
As for using two DIVs, sure you could. The hover could be done with CSS3 and child selectors of a parent div or you could JavaScript to change the class of both divs when hovering over either one of them.

Definitely requires two or three div's unless you use a background image
Here's a three-div solution
http://jsfiddle.net/pxfunc/SUuF6/
Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support
HTML:
<div id="fancyShape">
<div id="main"><div></div>
<div id="panHandle"></div>
</div>
CSS:
#fancyShape {position:relative;width:504px;height:304px;}
#main {
margin-left:100px;
width:400px;
height:300px;
border:solid 2px #000;
border-radius:0 15px 15px 15px;
}
#panHandle {
width:100px;
height:120px;
position:absolute;
top:0;left:0;
border-top:solid 2px #000;
border-left:solid 2px #000;
border-bottom:solid 2px #000;
border-radius:15px 0 0 15px;
}
/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}

Perhaps you could use Border-radius along with 2 or 3 div's to get the look you want. The only issue then is it's not supported in all browsers.

Use multiple divs, as others have suggested.
http://jsfiddle.net/thomas4g/7B5MA/14/
Keep in mind that it'll be very hard to flow content in this.

<!DOCTYPE HTML>
<html>
<head>
<style>
html{height: 100%; width: 100%;}
body{height: 100%; width: 100%;}
#wrapper{
position: relative;
top: 50px;
right: 25%;
width: 565px;
height: 440px;
margin: 0 auto;
padding: 0px;
}
#left{
position: absolute;
width: 100px;
height: 50px;
border: 2px solid black;
border-right: none;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
background-color: #ffffff;
}
#right{
position: absolute;
left: 100px;
width: 440px;
height: 440px;
border: 2px solid black;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
border-radius: 10px;
padding-left: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#wrapper').hover(
function () {
$(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid red'});
},
function () {
$(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid black'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="right">Some content here</div>
<div id = "left"></div>
</div>
</body>
</html>
You can use CSSPIE for rounded orners for IE