Well, I have created a jsfiddle snippet as follow
link to jsfillde
here is the code
html
<div id="container">
<div class="media">
<img src="http://i.minus.com/i3qPeX4FjQRFt.jpg"/>
</div>
</div>
css
#container {
position:relative;
width:400px;
height:320px;
background-color:#efefef;
}
.media {
wight:100%;
padding:2px;
background-color:#a0a0a0;
position:absolute;
bottom:0;
}
.media > img {
width:100%;
height:auto;
}
The purpose of this is to show an image on the bottom of #container. But as you can see, the media class has an extra "4px" on its bottom and I have no idea why. It completely destroys the view .. Please help.
Add vertical-align:bottom to your image's CSS:
.media > img {
width:100%;
height:auto;
vertical-align:bottom;
}
jsFiddle example
Related
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.
I want make two columns with text inside. Depending on where it will be more text box will increase the width, but height must be the same.
This is my code, and i don't know how to solved the problem.
https://jsfiddle.net/x0qqtr2y/
<div id="main>
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
#main {
width:100%;
background:gray;
display:table;
position:relative;
}
.cell1 {
width:auto;
height:auto;
display:table-cell;
background:red;
float:left;
}
.cell2 {
width:auto;
height:auto;
display:table-cell;
float:left;
background:blue;
}
use display:flex; on the parent element example below
CSS
#main {
width:100%;
display:flex;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
HTML on your main make sure you close the quote marks
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div>
<div class="cell2">SomeTEXTSomeTEXT</div>
</div>
To learn more about flex use the link:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would try this CSS, worked when I tried it in your Fiddle:
#main {
width:100%;
background:gray;
position:relative;
}
#main div {
display: inline;
}
.cell1 {
background:red;
}
.cell2 {
background:blue;
}
Hi Because u miss (") id="main" below code working fine check it
CSS
#main {
width:100%;
background:gray;
}
.cell1 {
background:blue;
float:left;
}
.cell2 {
float:left;
background:red;
}
Html
<div id="main">
<div class="cell1">SomeTEXTSomeTEXTSome</div>
<div class="cell2">SomeTEXTSomeTEXT1</div>
</div>
I'm trying to fit an image inside a div. I think that's a easy thing to do but i don't understand why the image is half out of the div.
That's my html:
<div class="bar">
<img src="images/bar.png" />
</div>
My css:
.bar {
height:10px;
width:100px;
border:1px solid black;
}
.bar img {
width:100%;
}
Here is a fiddle to show what i try to say
Add display:block; to the image.
Fiddle
You can change the default vertical alignment on the image:
.bar img {
width:100%;
vertical-align:top;
}
jsFiddle example
Im busy making this website homepage but have come across a problem which must be so simple but i just can't find it anywhere, I want to position both 'topskin' and 'topskin2' next to each other, i will also be adding more which i also want next to each other.
Here is the HTML :
<div id="secondinner">
<div id="topskin">
</div>
<div id="topskin2">
</div>
This is the third segment to the home page.
</div>
Here is the CSS:
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
Just to inform you, i have tried float:left, on both elements, and instead of going below each other they simply disappear.
I see at your image, your element are floarting out of div. You must set overflow:hidden to their parent to avoid that.
#secondinner {
overflow:hidden
}
Each child must be floated:
#topskin, #topskin2 {
float:left
}
There are two ways doing that.
Use float:left on #topskin and topskin2
use display: inline-block; on #topskin and topskin2
Try to use float.
FIDDLE
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
You just have to add display: inline-block..
With this code, even if you add as many as images with div having class img-container they will appear inline.
Here's working code for you.
<div id="secondinner">
<div id="topskin" class="img-container">
</div>
<div id="topskin2" class="img-container">
</div>
This is the third segment to the home page.
</div>
img-container is class having following css property.
.img-container{
display:inline-block;
}
JSFIDDLE DEMO : http://jsfiddle.net/rahulrulez/5mnxqphx/
I'm trying to create a search bar where the middle stretches. I have three images: left.png, middle.png, and right.png
jsFiddle
I tried this code in the CSS:
.div1 {
background-image:url('../images/searchbar_a_corner-left.png');
background-repeat:no-repeat;
width:15px;
height:100px;
float:left;
padding:0;
margin:0;
}
.div2 {
background-image:url('../images/searchbar_a_corner-middle.png');
background-repeat:repeat-x;
width:15px;
height:100px;
float:left;
padding:0;
margin:0;
}
.div3 {
background-image:url('../images/searchbar_a_corner-right.png');
background-repeat:no-repeat;
width:15px;
height:100px;
float:left;
padding:0;
margin:0;
}
And this in the HTML (which I think is the incorrect part):
<div class="div1">
<img src="search-icon.svg" />
</div>
<div class="div2">
<input id="search" type="text" />
</div>
<div class="div3"></div>
All that shows up is right.png.
Try setting the width on .div2 to "auto", and set "float: right" on .div3
See if this helps
I think you're referencing your pictures incorrectly. Using all of your code, I just found some pictures to use as backgrounds for this fiddle, which works perfectly!
right.png is not the only picture to show up, but I think your intention is for middle.png to span the entire search box background. If this is the case, remove width:15px; from .div2, as seen here.
Remove the width:15px from .div2
.div2 {
background-image:url('../images/searchbar_a_corner-middle.png');
background-repeat:repeat-x;
height:100px;
float:left;
padding:0;
margin:0;
}
For illustration purpuses I added colors for the background of divs.
Here is the forked fiddle: JsFiddle