I have some div boxes in my html and they are formatted the way I want.
Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.
Why is that? And how do I prevent it from doing that?
document.getElementById("0").innerHTML = 20;
body {
background-color: red;
width: 1000px;
margin: 10px;
}
#top {
display: block;
width: 200px;
height: 100px;
}
#bottom {
display: block;
width: 200px;
height: 100px;
}
.box {
height: 94px;
width: 96px;
border: 1px solid white;
display: inline-block;
}
<div id="board">
<div class="row" id="top">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"></div>
<div class="box" id="3"></div>
</div>
</div>
Here is my JSFiddle:
https://jsfiddle.net/pb4759jh68/arbsws5u/
In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.
Thanks!!!
It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:
vertical-align:top;
to the box class.
Related
We want to find a solution to show just the green box in front of the backdrop (#back). And this without modifying the html.
HTML:
<div id="body" style="z-index:1;position:relative;">
<div id="div1" style="z-index:4;position:relative;">
</div>
<div style="z-index:4;background-color: red; width: 70px;position:relative;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
<div id="back" style="z-index:5;">
</div>
</div>
CSS:
#body {
background-color: blue;
width: 500px;
height: 500px;
position: relative;
}
#div1 {
position:relative;
background-color: white;
width: 100px;
height: 100px;
}
#back {
position: absolute;
top:0;
width: 100%;
height: 100%;
opacity: 0.7;
background-color: black;
}
div {
width: 50px;
height: 50px;
}
There is a fiddle of our problem :
https://jsfiddle.net/ruj23c60/3/
<div style="z-index:4;background-color: red; width: 70px;height: 70px;">
<div id="div2" style="z-index:7;background-color:green;position:relative;">
</div>
</div>
Removing the style position: relative from the parent of #div2 is sufficient already
There are two way as i know.
First:
You need to give z-index:3 to #back. (less than #div2 parent div) then you can make it front of #back
But this way whole div come in front of black(#back) div.
Fiddle
Second:
Make position:adsolute; to #div2 and remove position:relative; from it's parent.
Fiddle
Note: I have comment opacity: 0.7; from #back to understand properly.
This is how my webpage is currently looking:
And what I want is for the height of box 1 to be equal to be the height of box 3, if there was more text to be added to box 1 or 3 etc (and the same for boxes 2 and 4, at the same time).
I also want the length of which ever side is shorter, to be extended so that it is the same length of the longer side, resulting in both sides (green box and 4 boxes combined) having the same height.
More basically: Boxes 1, 2, 3 and 4 all have the same height. The 4 boxes and green box both extend downwards if necessary to the same height, so that the green box's height is roughly double the height of one smaller box.
This is my code currently:
<div class="container">
<div class="row">
<div class="col-xs-6" id="big-box">
<div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6">
<div class="mini-box" id="firstBox">1</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="secondBox">2</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="thirdBox">3</div>
</div>
<div class="col-xs-6">
<div class="mini-box" id="fourthBox">4</div>
</div>
</div>
</div>
</div>
</div>
With some basic CSS to change the looks of the text and background colour etc.
I have tried playoing around with Javascript, Bootstrap, and CSS properties to try and make this possible, but so far nothing has worked. Any help?
Thanks in advance
I personally don't like the bootstrap class names but that is beside the point. So I think you need to change the CSS:
.row {
position: relative; // set bounds for mini-box absolute.
}
.mini-box {
position: absolute;
top: 0px;
bottom: 0px;
}
I'm not a big fan of bootstrap so i have a alternative,
flexbox. the parent has a height: 200px; were every child in that wil align too but i couldn't fix it with a second child with in the row. so i fixed it with height: 95px; because of the 10px margin
.parent {
align-items: flex;
display: flex;
height: 200px;
}
row {} .child1 {
background-color: green;
color: #fff;
width: 300px;
margin: 0 10px;
}
.child2 {
background-color: grey;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child3 {
background-color: red;
color: #fff;
margin: 0 10px;
height: 95px;
}
.child4 {
background-color: pink;
color: #fff;
margin: 0 10px 10px;
height: 95px;
}
.child5 {
background-color: black;
color: #fff;
margin: 0 10px;
height: 95px;
}
<div class="parent">
<div class="child1">text big</div>
<div class="row">
<div class="child2">text 1</div>
<div class="child3">text 2</div>
</div>
<div class="row">
<div class="child4">text 3</div>
<div class="child5">text 4</div>
</div>
</div>
css tricks for more info over flexbox
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;
}
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
I have this code
<div style="position: relative;">
/***main***/
<div style="top:0">
/*****Content1****/
</div>
<div>
/*****Content2****/
</div>
<div>
/*****Content2****/
</div>
<div style="bottom:0">
/*****Content4****/
</div>
</div>
I want content1 always at top and content4 always at bottom, also want content2 and content3 adjust top and bottom margin equally so that it look even, I am unable to do this, as parent div is of variable height and all other divs are of fixed height.
I think this will help you to understand what I want
http://www.spoiledagent.com/ads/Help.jpg
Please help,
You can try this:
http://jsfiddle.net/Q4XaQ/
<div id="main">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
#main{
margin: 0 auto;
width: 960px;
background: red;
}
#content1{
height: 80px;
background: gray;
}
#content2{
width:480px;
height: 300px;
float: left;
background: yellow;
}
#content3{
width:480px;
height: 300px;
float: right;
background: brown;
}
#bottom{
height: 50px;
clear:both;
background: blue;;
}