Greetings Stackoverflow!
I have problems pixel-perfect setting my tags. Here is the codepen: https://codepen.io/anon/pen/NLbyag
My aim is to have my <svg> and <table id="time-h-axis"> tags horizontally scrollable inside their <div id="main-charts"> parent, but not vertically.
<svg> and <table id="time-h-axis"> have height 330 and 70 which makes the 400px height of <div id="main-charts">.
However, there are a few extra vertical pixels coming from somewhere (one can scroll vertically and see a bit of lightgreen of the div in the codepen)...
I am out of ideas... Help needed! Thanks ;-)
HTML:
<div id="main-charts">
<table id="time-h-axis"><tr></tr></table>
<svg height="330" width="11970"></svg>
</div>
CSS:
#main-charts {
width:1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: scroll;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
}
Set the SVG to display:block (per this SO Q&A) and the wrapper to overflow:auto
#main-charts {
width: 1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: auto;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
display: block;
}
<div id="main-charts">
<table id="time-h-axis">
<tr></tr>
</table>
<svg height="330" width="11970"></svg>
</div>
Codepen Demo
Related
I have code below. I have 2 questions:
Why right border of textarea is hidden? How to show it not use padding for div child1?
I don't set height for div child1. Why child1 is higher than textarea? How to fit it with textarea?
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id='parent' style='width: 100%;height:100%;background-color:blue;position:absolute;'>
<div id='child1' style='background-color:red;margin:10px;overflow:hidden;'>
<textarea style='width:-webkit-fill-available;height:100px;resize:none;border:2px solid black;overflow:hidden'></textarea>
</div>
</div>
</body>
</html>
thats the solution!!
your Problem was, that the Red div was as big as the text-area,
but the border doesn't count to the width, or height of an element.
so width:100%actually results into """width:100% + 2px of the left Border and + 2px on the right Border""".
but width:-webkit-fill-available counts the boreder in, with the non-advantage, (at least i think it is), that it does not work in every Browser
I have added the below CSS to textarea in your snippet to solve the two issues you have mentioned
Solution 1: To fix the border issue
box-sizing: border-box;
Solution 2 : Float to fix the height issue
float: left;
Code Snippet:
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
#child1 {
width: 80%;
}
textarea {
box-sizing: border-box; /* Solution 1: To fix the border issue */
float: left; /* Solution 2 : Float to fix the height issue */
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
<div id="clear" style="clear:both;"></div>
</div>
</div>
You have to give box-sizing:border-box
* {
margin: 0px;
padding: 0px;
box-sizing:border-box;
}
Removing overflow: hidden from your div will display textarea border.
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
Textarea has display: inline-block; styling by default so just change it to display: block;
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
textarea{
display:block;
}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px; overflow: hidden;'>
<textarea style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
These are the answers to your questions:
You should use the CSS calc function to reduce the textarea's 100%-width by 4px (which is the sum of the 2px border on the left and right sides);
You should apply float to left for textarea to reduce #child1's height.
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
#parent {
width: 100%;
height: 100%;
background-color: blue;
position: absolute;
}
#child1 {
background-color: red;
margin: 10px;
overflow: hidden;
}
textarea {
width: calc(100% - 4px);
height: 100px;
resize: none;
border: 2px solid black;
float: left;
}
<div id='parent'>
<div id='child1'>
<textarea></textarea>
</div>
</div>
It is because of the overflow element in DIV tag. you have given overflow: hidden; With the hidden value, the overflow is clipped, The overflow property only works for block elements with a specified height.
function within(){
document.getElementById("child1").style.height = document.getElementById("textarea").offsetHeight + "px";
console.log(document.getElementById("textarea").offsetHeight + "px it die höhe vom Text!")
}
function without(){
document.getElementById("child1").style.height = "unset";
}
* {
margin: 0px;
padding: 0px;
}
div {
background-color: red;
}
button {
position:relative;}
<div id='parent' style='width: 100%; height: 100%; background-color: blue; position: absolute;'>
<div id='child1' style='background-color: red; margin: 10px;'>
<textarea id="textarea" style='width: 100%; height: 100px; resize: none; border: 2px solid black;'></textarea>
</div>
</div>
<button onclick="within()">mit Höhe</button>
<button onclick="without()">ohne Höhe</button>
I'm trying to center a div within a div with equal margins. If possible, the box should be in the center of the page. So far I've got the following code:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #3D3D3D;
padding: 30px;
}
#box{
background-color: gray;
border: solid black 4px;
}
#header {
height:60px;
width: 800px;
margin: auto;
border: solid black 2px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
line-height: 60px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white));
background: -webkit-linear-gradient(left, #52524E, #AAAAA4);
background: -moz-linear-gradient(left, #52524E, #AAAAA4);
background: -o-linear-gradient(left, #52524E, #AAAAA4);
background: linear-gradient(left,#52524E, #AAAAA4);
}
#header a {
font-size: 22px;
color: black;
margin: 30px;
text-decoration: none;
}
img#code {
display: block;
margin: auto;
margin-bottom: 10px;
margin-top: 30px;
width: 500px;
}
#container{
width: 800px;
border: solid white 2px;
margin: auto;
margin-bottom: 30px;
}
.splitter {
width: 500px;
height: 5px;
background-color:black;
margin: auto;
margin-bottom: 10px;
border-radius: 35px;
}
#text1{
background-color: #999999;
margin: auto;
margin-bottom: 30px;
width: 500px;
text-align: left;
border-radius: 5px;
}
.inside{
margin: 30px;
}
#text1 h3{
border-bottom: solid black 1px;
}
.border{
width: 200px;
margin-top: 20px;
margin: auto;
text-align: center;
}
#box2{
width: 500px;
height: 100px;
background-color: blue;
margin: 70px auto ;
position: relative;
}
.midbox{
width: 100px;
height: 50px;
background-color: red;
margin: 30px auto;
position: absolute;
}
and html
<html>
<head>
</head>
<body>
<div id="box">
<div id="header">
About Me
Hobbies
Pictures
Contact Me
</div>
<div id="container">
<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/>
<div class="splitter"></div>
<div id="text1">
<div class="border">
<h3> Coding in clouds</h3>
</div /* border */>
<br>
<div class="inside">
<p> From coding, to Scripting. We all share
the same fate. We look, obsereve, figure out,
and analyze everything around us. We have an
eye to solve things, put things together, Fix
things, and show our pride when the work is done;
yet many of its roots gets unoticed.
<br> <br> To other souls,
we are just a body stuck in this world, but we, in fact
are the ones that assebles technology, make things whole,
and make everyone become one in this crazy thing
called the Web. We are Software developers. We code,
we fix, and we make it possible.
</div inside>
</div /*text1*/>
<div id="box2">
<div class="midbox">
hello
</div>
</div>
</div /* container */>
</div /* box */>
</body>
</html>
Something like this perhaps?
http://jsfiddle.net/tezf8/1/
You had two margin values on each box, so the "margin: auto;" was overriding the "margin: 30px;" in .testbox2
Here is the CSS:
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin: 50px auto 0;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
margin: 48px auto;
}
Try This:
CSS
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin:0 auto;
margin-top:40px;
position:relative;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
HTML
<div id="testbox">
<div class="testbox2">
</div>
</div>
I have a resizable and movable div using JQuery UI. I want a table inside it that scrolls vertically. Trying to set the table height to 100% basically does nothing, and absolute positioning with top and bottom of 0 doesn't work either. I have tried to put a separate div as a container and that has gotten me closer than anything, but it still does not behave properly.
Here is the fiddle: http://jsfiddle.net/scottbeeson/KrP7v/1/
Here is the relevant CSS:
table {
border-collapse: collapse;
width: 100%; height: 100%;
}
#tableContainer {
height: 100%; width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
And the basic HTML layout:
<div id="window">
<div id="header">Draggable Header</div>
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
I think that this is what you want.
http://jsfiddle.net/KrP7v/12/
#window {
width: 500px;
height: 400px;
min-width: 100px;
min-height: 100px;
border-bottom: 1px solid gray;
}
#header {
height: 25px;
line-height: 25px;
background-color: gray;
color: white;
text-align: center;
}
table {
min-height: 300px;
height: 100%;
width: 100%;
border-collapse: collapse;
}
#tableContainer {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
overflow: auto;
}
td {
padding: 5px;
margin: 0px;
border: 1px solid gray;
}
tr:last-child td {
border-bottom: none;
}
Here's what you can do:
http://jsfiddle.net/KrP7v/4/
#window {
width: 400px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
}
Having a bit of trouble getting my nested divs lined up properly. You can see an example of the code I'm working with on Dabblet:
http://dabblet.com/gist/6125817
I've run into the following issues:
The wrapper scrolls vertically. I can live with this, but ideally I would rather it not.
The content needs to fill up most of the box. If the wrapper takes up the screen, then the content needs to take up most of the space.
The footer needs to align itself to the bottom of the wrapper (plus bottom margin), not bottom: 0.
Everything I try seems to make something else fall out of whack. I've been able to do parts of this when disabling other css classes. Just can't get them to all work at the same time.
Just in case the link isn't working:
body, html {
}
body {
background-image: url('/bground_home.png');
background-size: 100%;
background-repeat: no-repeat;
font-family: 'LegacySansUltra';
font-size: 20px;
}
.wrapper {
width: 90%;
height: 90%;
background-color: white;
border: solid 1px #666;
box-shadow: 10px 10px 5px #888888;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.header {
font-size: 27px;
margin: 10px;
background-color: Black;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
color: White;
}
.content {
width: 90%;
height: 70%;
position: relative;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #effbfb;
border-radius: 15px;
-moz-border-radius: 15px;
border: 3px solid #e0f8fd;
font-size: 25px;
}
.footer {
background-color: black;
padding: 5px;
color: White;
margin: 10px;
border-bottom-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
height: 50px;
}
<div class="wrapper">
<div class="header">
<div style="position: relative; float:left; width: {#logowidth}; height: {#logoheight}; padding: 0px 10px;">
<img src="{#logo}" height="{#logoheight}" width="{#logowidth}" alt="{#name}" border="1" />
</div>
<div style="position: relative; float:left; padding-top: 20px;">
{#name}
</div>
<div style="clear: both;"></div>
</div>
<div class="content">
<div class="links">{#links}</div>
</div>
<div class="footer"></div>
</div>
Use this code:
overflow: hidden;
I have no idea why the #mainControldiv div is not being enclosed by it's wrapper div. Here is the html and css following it:
css:
*
{
padding: 0px;
margin: 0px;
}
div
{
border: 1px solid;
}
#mainWrapperdiv
{
width: 1000px;
margin: 0px auto 0px auto;
}
#maindiv
{
width: 850px;
height: 500px;
margin: 50px auto 0px auto;
border: 5px solid;
}
#mainControldiv
{
width: 850px;
height: 150px;
margin: 470px auto 0px auto;
border: 5px solid;
float: right;
}
#moveablediv
{
width: 50px;
height: 50px;
background: lightgreen;
position: relative;
left: 400px;
top: 200px;
}
#centerPointdiv
{
width: 5px;
height: 5px;
background: black;
position: relative;
left: 22px;
top: 22px;
}
It should be pretty straight forward, yet i can't figure out why the mainControldiv does not show up within the border of the mainWrapperdiv, it's direct parent. And can you also tell the logic, or the inner reason why it's not working as I'm expecting, thanks in advance.
You cannot end divs like that, even if a div has no content, it must have a closing tag:
<div></div>
So change you structure to be as follows:
<body>
<div id = "mainWrapperdiv">
<div id = "maindiv">
<div id = "moveablediv" >
<div id = "centerPointdiv"></div>
</div>
</div>
<div id = "mainControldiv"></div>
</div>
</body>