Hello all CSS newbie here,
I have a special case, where I want to position a text area on the edge of a div. I want the text area to be cropped even when a user types into the text area. I'm deeply confused on why does the textarea grows and pushes the position of the parent div even though I have set the parent div overflow to hidden ? Any ideas so that the textarea position stays as is (cropped)?
My code is as below:
HTML
<div class="wrapper">
<div class='box'>
<textarea class="text"/>
</div
</div>
CSS
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
width:300px;
height:50px;
right:-250px;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
Here is the link to my Codepen
Thank you and deeply appreciate any thoughts and suggestions.
.wrapper {
width:300px;
height:300px;
background:red;
}
.box {
width:200px;
height:200px;
background:blue;
overflow:hidden;
position:relative;
}
.text {
max-width:300px;
height:50px;
right: 0;
background:yellow;
overflow:hidden;
position:absolute;
resize:none;
}
<div class="wrapper">
<div class='box'>
<textarea class="text"></textarea>
</div>
</div>
Your html code is not correct. And I used max-width for textarea.
Related
Basically i'm using a background(body) and i need certain elements to be positioned exactly where i want them to be(i used top/left %) (usually images and tables, but in this example i have used simple div elements); after resizing the browser window/ changing the resolution the elements are of course moving accordingly to the new size, hence they change position. I tried using a div parent to solve that, but i failed.
HTML & CSS :
body
{
background:black;
}
#content
{
background:blue;
top:1%;
position:relative;
height:900px;
max-width:1600px;
margin-left:auto;
margin-right:auto;
}
.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:15%;
left:5%;
}
.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50%;
left:80%;
}
<div id="content">
<div class="a">
Box1
</div>
<div class="b">
Box2
</div>
</div>
I have changed the values to px rather than %
this would be helpful
the values are not exact, just for depiction
body
{
background:black;
}
#content
{
background:blue;
top:9px;
position:relative;
height:900px;
max-width:1600px;
margin-left:auto;
margin-right:auto;
}
.a
{
position:absolute;
background:yellow;
height:600px;
width:800px;
top:150px;
left:50px;
}
.b
{
background:red;
height:100px;
width:100px;
position:absolute;
top:50px;
left:80px;
}
<div id="content">
<div class="a">
Box1
</div>
<div class="b">
Box2
</div>
</div>
.a, .b{transform:translate(-50%,-50%);}
after adding this css you need to change top and left value according to place where you want to display those div/images.
Would like to know how to create some spacing between divs in a horizontal row.
I use justify-content:center to center the boxes, and flex-wrap:wrap to wrap them when the window is re-sized. However, when I try to add margin-left and margin-right to #div2 (middle box), it disturbs the centered layout when the window is re-sized.
As you've probably noticed I'm trying to make my site mobile friendly and responsive to any screen size. Thank you.
Here is the code:
<div id="pusher">
</div>
<section id="billboard">
</section>
<section id="section1">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</section>
body,html{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:brown;
height:75px;
position:fixed;
}
#pusher{
width:100%;
height:75px;
}
#billboard{
height:500px;
background: url("");
background-repeat:no-repeat;
background-size:cover;
background-color:red;
}
#section1{
display:flex;
flex-wrap:wrap;
justify-content:center;
overflow:auto;
}
#div1{
background-color:blue;
height:250px;
width:250px;
min-width:250px;
}
#div2{
background-color:yellow;
height:250px;
width:250px;
min-width:250px;
}
#div3{
background-color:green;
height:250px;
width:250px;
min-width:250px;
}
Just apply a margin to all divs:
#section1 > div { margin: 10px; }
DEMO
Since the display of the section is flex, try changing the justify-content:center; into justify-content:space-around;. It gives spaces between the boxes. And when the browser shrinks, it will also wrap the boxes.
I've created the following to illustrate my question.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content"></div>
</div>
</div>
So I understand the following:
1) The content div is sized to 50px, so the containing divs (relative) also has a 50px height. All the way up to the container which is why the bar is a uniform 50px all across the screen.
2) If I remove the relative tag from the container, then the absolute div contents fill the screen, although the relative div is positioned in front still. This is because the absolute positioned element is now tied to the HTML element rather than the container and so is not restricted by the height of the container.
What I don't understand is:
1) If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:1;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
2) The absolute element is 50px high with no content due to the 100%, but if I give it content, it remains at 50px even when the content would overflow.
#container{
background-color:white;
position:relative;
}
#absolute{
position:absolute;
height:100%;
width:100%;
background-color:black;
color:white;
z-index:2;
}
#relative{
position:relative;
background-color:blue;
width:200px;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute">
Test<br/>Test<br/>Test<br/>Test
</div>
<div id="relative">
<div id="content"></div>
</div>
</div>
Can anyone please explain what the rule is that allows these elements to behave in this way. Many thanks.
To answer the first question :
If I remove the relative tag from the relative element, it disappears behind the absolute element. Even if I set a higher z-index on the relative element it does not show through.
It's because default position is position:static and that means ingnoring all positioning instructions including z-index,
in this case if you set #absolute with z-index negative value it will go on a lower layer:
#container{
position:relative;
}
#absolute{
position:absolute;
height:90%;
width:100%;
background-color:black;
z-index:-11;
}
#relative{
//position:relative;
background-color:blue;
width:200px;
z-index:2;
color:white;
}
#content{
background-color:green;
height:50px;
width:50px;
}
<div id="container">
<div id="absolute"></div>
<div id="relative">
<div id="content">Test</div>
</div>
</div>
as to question 2:
with height:100% it expands to height of parent;
Consider a simple example with html
<div class="parent">
<div class="child">
</div>
</div>
and CSS
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:40px;
left:30px;
width:70px;
height:70px;
background:blue;
}
to place a DIV with absolute position just beneath its parent (with relative position).
In this example, I equaled the absolute's top to the parent relative's height.
How to align the absolute DIV just under the parent when the height is unknown (both parent and child)?
Didn't think this would work myself, but it seems to:
html, body {
height: 100%;
}
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:100%;
left:30px;
width:70px;
height:70px;
background:blue;
}
Check this..
HTML:
-------
<div class="parent">
</div>
<div class="child">
</div>
CSS:
-----
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:auto;
left:30px;
width:70px;
height:70px;
background:blue;
}
(Example)
you can use negative value for bottom, eg. bottom: -100px
EDIT: here is better solution: http://jsfiddle.net/mqy4z/3/ - set child's position to top:100%
Try placing both div's in your HTML file under eachother:
<div class="parent">
</div>
<div class="child">
</div>
Please see the following: http://jsfiddle.net/GWJMf/
What I'm trying to do is have the TITLE fixed, not scroll. But the content scrollable.
Problem is, having a fixed title, makes it very hard to deal with the dynamic range of a title, which can have anywhere from 5 - 250 characters.
Is there a way to have the TITLE be fixed, not scroll, but have the height set based on the title length?
Is this possible w CSS? Ideas? Thanks
Not sure why you have all that extra styling. You don't need to style the h2 or any wrapping elements to have it expand based on the length of the text.
http://jsfiddle.net/xd7a4/
I'm not sure of the height you're desiring for the scrolling container however here I set it to 200px.
<h2>title</h2>
<div class="scroll">content</div>
H2 {
background-color: #FF0000;
}
.scroll {
height: 200px;
overflow: scroll;
overflow-x: hidden;
}
I think this will help :
<style>
.content {
position:absolute;
top:100px;
left:100px;
width:300px;
height:auto;
}
.title {
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
background:red;
color:#fff;
}
.text {
position:relative;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
overflow:auto;
}
</style>
<div class="content">
<div class="title">title<br/>title...</div>
<div class="text">text text <br/> text text...</div>
</div>