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>
Related
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
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>
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
I just want to make everything in the 'wrapper' stretch out to fit the wrapper, but everything is being annoying and staying a fixed height??
So I wanted the 'sidebar' and the 'inside' of the 'content' area to be the same height all of the time, and i also want the 'content' to stretch to fit the 'wrapper' at all time, while having a 'header', 'nav', and 'footer'. but nothing I try seems to work. I had it at one point but lost the code and forgot what I did.. help? :c
also I was playing around to see what would happen by changing the 'wrapper's min-height, that's why it is so low.
OKAY. to specify: for one, I want the 'wrapper' to encapsulate everything inside of it and always increase its height when one of the children increase their height, like with the 'inside' div is filled with text and increases the height of the 'content'
In addition, I also want the 'sidebar' and 'inside' to keep the same height, aka why they have a height of 100% or top; 0 bottom; 0 w/e i have on here.
Html:
#wrapper {
width: 1000px;
min-height: 300px;
background-color: red;
position: relative;
margin: auto;
margin-bottom: 10px;
border: 1px solid black;
}
#header {
width: 100%;
background-color: blue;
height: 100px;
float: left;
clear: both;
position: relative;
border-bottom: 1px solid black;
}
#content {
width: 100%;
background-color: grey;
height: 100%;
float: left;
clear: both;
position: relative;
}
#sidebar {
width: 180px;
background-color: green;
float: left;
position: absolute;
top: 0px;
bottom: 0px;
padding: 10px;
border-right: 1px solid black;
}
#inside {
width: 779px;
padding: 10px;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
background-color: orange;
float: right;
}
#footer {
width: 100%;
height: 100px;
float: left;
clear: both;
background-color: pink;
border-top: 1px solid black;
}
#nav {
width: 100%;
border-bottom: 1px solid black;
float: left;
clear: both;
height: 20px;
background-color: purple;
}
<div id="wrapper">
<div id="header">
hi
</div>
<div id="nav">
hi
</div>
<div id="content">
<div id="sidebar">
sidebar stuff
</div>
<div id="inside">
inside stuff
</div>
</div>
<div id="footer">
hi
</div>
</div>
If I understand, you're looking for same height columns.
Check these two links:
http://css-tricks.com/fluid-width-equal-height-columns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).
Atm I've got this:
HTML:
<div class="wrapper">
<div class="header">
<!-- .... -->
</div>
<div class="content">
<div class="left-column">
<!-- ... -->
</div>
<div class="right-column">
<!-- ... -->
</div>
</div>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
min-width: 1000px;
min-height: 500px;
}
body {
font: 12px sans-serif;
background-color: #fff;
color: #000;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.header {
padding: 0 30px;
height: 100px;
left: 0px;
right: 0px;
position: absolute;
border: 1px solid black;
border-top: none;
}
.content {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0px;
margin: 10px 20px;
border: 1px solid black;
}
.left-column {
float: left;
width: 300px;
border: 1px solid black;
}
.right-column {
margin-left: 315px;
border: 1px solid black;
}
The question is: are there any better solutions?
Thanks.
I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!
P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.