Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
If i have a div 100px x 100px.
And i define 10x child divs that should fit next to each other with 10px x 10px.
Why do they not?
try it with your browser: http://dwaves.de/prozentuale-angaben-check.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Statisches Layout</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
}
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
.relative {
width: 10%;
height: 10%;
background: yellow;
position: relative;
float: left;
}
.fixed {
height: 10px;
width: 10px;
background: blue;
position: relative;
float: left;
}
</style>
<body>
<div class="container">
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="relative">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
<div class="fixed">
</div>
</div>
</body>
</html>
In the link you posted, you have 12, not 10 <div> elements. Also, you have an unnecessary <br/> tag. Fix those two issues and they will fit in one row.
JSFiddle demo here (with <br> and two last <div> tags removed).
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am brand spanking new to HTML so please excuse the lack of knowledge. I am currently trying to set up a little website and I want to have three sections that a user can click on that will route the user to a different part of the website. Simply put, I want three sections, aligned left, center, and right that is able to be shown on the same line. Every time I am attempting this however, I set up one section on the left, and then I can get a section on the center and the right, but it is going on another line horizontally.
How can I get all three sections to be on the same horizontal line and simply just left, right and center?
The trick is to use display: inline-block although there are many ways to do this.
Suggest you look into flexbox as this will make your future coding life a lot easier.
#container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<div id='container'>
<div id='left'></div>
<div id='center'></div>
<div id='right'></div>
</div>
<html>
<head>
<style>
#parent-container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: yellow;
}
#right {
background-color: green;
}
</style>
</head>
<body>
<div id='parent-container'>
<div id='left'>
Left
</div>
<div id='center'>
Center
</div>
<div id='right'>
Right
</div>
</div>
</body>
</html>
Use bootstrap to align your divs.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/
I've stuck at the problem with this
.autoHeightParent {
width: 500px; /* just for example */
position: relative;
}
.absolutePosChild {
/* absolute is required to make pretty drag and drop transitions with interpolating left property */
position: absolute;
display:flex;
flex-direction: column;
border: 1px solid green;
}
.absolutePosChild div {
width: 100%;
}
<div class="autoHeightParent" style="height:170px;">
<div class="absolutePosChild" style="left: 0px; width: 100px;">
<div>
Child content
</div>
</div>
<div class="absolutePosChild" style="left: 100px; width: 150px;">
<div>
Child content with nesting
</div>
<!-- !! NESTING -->
<div class="autoHeightParent">
<div class="absolutePosChild" style="left: 0px; width: 50px;">
<div>
We don't know this height too
</div>
</div>
<div class="absolutePosChild" style="left: 50px; width: 100px;">
<div>
G.Child 2
</div>
</div>
</div>
</div>
</div>
<div style="border: 1px solid red">
I need to automatcally calculate height of the box above to make THIS box right after it. For now you can see hardcoded 170px height.
</div>
How do you guys solve problems like this?
I have tried to solve it with JavaScript but my solution looks wrong.
function setRootHeight() {
var root = document.getElementById("root");
var allChilds = root.getElementsByTagName("*");
var rootRect = root.getBoundingClientRect();
var maxChildHeight = 0;
_.each(allChilds, function(item) {
var nodeRect = item.getBoundingClientRect();
var nodeHeightRelativeToRoot = ( nodeRect.top + nodeRect.height ) - rootRect.top;
if ( nodeHeightRelativeToRoot > maxChildHeight) maxChildHeight = nodeHeightRelativeToRoot;
});
root.style.height = maxChildHeight + "px";
}
setInterval(setRootHeight, 300);
.autoHeightParent {
width: 500px; /* just for example */
position: relative;
}
.absolutePosChild {
/* absolute is required to make pretty drag and drop transitions with interpolating left property */
position: absolute;
display:flex;
flex-direction: column;
border: 1px solid green;
}
.absolutePosChild div {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
Test content Above
<div id="root" class="autoHeightParent">
<div class="absolutePosChild" style="left: 0px; width: 100px;">
<div>
Child content
</div>
</div>
<div class="absolutePosChild" style="left: 100px; width: 150px;">
<div>
Child content with nesting
</div>
<!-- !! NESTING -->
<div class="autoHeightParent">
<div class="absolutePosChild" style="left: 0px; width: 50px;">
<div>
We don't know this height too
</div>
</div>
<div class="absolutePosChild" style="left: 50px; width: 100px;">
<div>
G.Child 2
</div>
</div>
</div>
</div>
</div>
<div style="border: 1px solid red">
Visualization of that height was calculated
</div>
It uses setInteval to check if any of nested children changed it's height and then recalculate height of the parent box. Actually i need to find better solution because of performance and code beauty.
Snippets very simplified compared to real recalculations.
I am free to use flexbox or any tool that can solve this
I've solved this issue with relative positioning.
For my complex "absolute position" animations i made function that translates absolute to relative.
.autoHeightParent {
width: 500px; /* just for example */
position: relative;
display: flex;
}
.absolutePosChild {
/* relative position here must do absolutes' job here */
position: relative;
display:flex;
flex-direction: column;
border: 1px solid green;
}
.absolutePosChild div {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="autoHeightParent">
<div class="absolutePosChild">
<div>
Child content
</div>
</div>
<div class="absolutePosChild">
<div>
Child content with nesting
</div>
<!-- !! NESTING -->
<div class="autoHeightParent">
<div class="absolutePosChild">
<div>
We don't know this height too
</div>
</div>
<div class="absolutePosChild">
<div>
G.Child 2
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You see that parent box automatically resizes fine.
But now i can use translate3d to any child and parent box keeps it's size and position.
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to convert a html view to a image. This is the div code
<html>
<div class="row">
<!--image div -->
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div></div>
</html>
i want to convert this html view to a image. does anyone know ?
You can use html2canvas library:
function convertImg() {
html2canvas(document.querySelector('.row'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
$('button').click(convertImg);
.row > div {
background: red;
color: white;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button>Convert page as img.</button>
<div class="row" style='height:260px; position:relative; top:10px;'>
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div>
</div>
There's a library that converts HTML to HTML-Canvas. This Canvas can be saved as an image afterwards. Check out the examples:
http://html2canvas.hertzen.com/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
A page is loading everything correctly in Chrome but not in firefox. Can anyone tell me what is the problem and how can i get rid of it?
Check This Link on both chrome and firefox.
Chrome:
Firefox:
HTML :
<div class="container archo-all-projects-container">
<div class="row ">
<div class="col-lg-12">
<h4 class="archo-all-projects-header">All Projects</h4>
</div>
</div>
<div class="argo-project-list">
<div class="row"><div class="col-lg-12"><h5 class="archo-project-type-header">Architecture</h5></div></div>
<div class="row">
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-3 ">
<div class="archo-project-item">
<div class="archo-project-item-title">
<h5>Project Title</h5>
</div>
<div class="archo-project-item-image">
<img src="asset/images/project-thumnail/1.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.archo-project-type-header{
background: #000;
color: #fff;
opacity: .8;
padding: 15px;
}
.archo-all-projects-container>.argo-project-list>.row{
}
.archo-all-projects-container .argo-project-list{
overflow-y: auto;
overflow-x: hidden;
}
.archo-all-projects-container .archo-all-projects-header{
background: #fff;
opacity: .8;
padding: 15px;
}
.archo-all-projects-container .archo-project-item{
background: #2b2b2b;
margin-bottom: 15px;
}
.archo-all-projects-container .archo-project-item-image{
text-align: center;
padding: 10px;
}
.archo-all-projects-container .archo-project-item-title{
text-align: center;
padding: 10px 0 0 0;
}
.archo-all-projects-container .archo-project-item-image a,.archo-all-projects-container .archo-project-item-title a{
text-decoration: none;
color: #fff;
}
.archo-all-projects-container .archo-project-item-image a:hover,.archo-all-projects-container .archo-project-item-title a:hover{
text-decoration: none;
color: #fff;
}
.archo-all-projects-container .archo-all-project-title{
background: #000;
}
.archo-project-item .archo-project-item-title{
color:#fff;
}
/*testing down*/
.archo-all-projects-container {
/*background: #fff;*/
bottom: 168px;
width: 100%;
top: 75px;
position: absolute;
}
Fiddle is showing correct in both chrome and firefox
In your code $('body').outerHeight() results with 0. It is because you are using absolute positioning of elements. While you do this, body element will always have 0px height because it does not contain any element that will expand its height.
You can try set width: 100% on body element. It should work.
The problem is in the javascript. With Firefox, I disabled javascript (using Web Developer toolbar) and refreshed the page. The elements didn't disappear.
Disable your JavaScript includes one by one until it works, then you know what the offending file is, and can use an alternate solution or fix it.
You have a javascript plugin adding height:0 to the .slimScrollDiv div.