I got a tag inside a :
#in .css file
div.box {
width: 50px;
height: 30px;
}
#in .html file
<div class="box">
<p>Here</p>
</div>
and it looks like this:
------------
| |
| Here |
| |
------------
but I want to put <p> at the bottom of <div>, like this:
------------
| |
| |
| Here |
------------
How?
add this
div.box {
width: 50px;
height: 30px;
position:relative;
}
div.box p{
margin:0;
padding:0;
position:absolute;
bottom:0;
}
Related
Fiddle
I have two Div , one is in table and other , outside of table .
My problem is , as you can see , divOne overflow outside of parent Div .
I want to show like
---------------------
| ---- ---- |
| | | | D2 | |
| | D1 | | | |
| | | ---- |
| | | |
| ---- |
---------------------
Here is my code ,
html
<div class="wrapper">
<textarea rows="12" cols="8" class="divOne">
Division One
</textarea>
<table>
<tr>
<td>
<textarea rows="6" cols="8" class="divOne">
Division Two
</textarea>
</td>
</tr>
</table>
</div>
Css
.wrapper
{
border: 1px solid #999999;
position: relative;
margin: 0px;
padding: 10px;
width: 600px;
background-color: #FCFCFC;
min-height: 50px;
color: black;
border-radius: 8px;
-moz-border-radius: 8px;
line-height:normal;
}
.divOne
{
float:left;
}
http://jsfiddle.net/fNhet/1/
.wrapper {
display: inline-block;
}
The issue over there is that you are using floats but you aren't clearing
.wrapper:after { /* Using a clearfix */
display: table;
content: "";
clear: both;
}
Demo
So, the parent takes the height of the non floated elements... and thus the background doesn't increase.
For more information on float and clear, read my answers here and here.
In your css try addding to your .wrapper
CSS:-
overflow:hidden;
DEMO.This will do the trick.
use display: inline-block; overflow: hidden; width: 50% .. this will give you some additional effect
Add display:inline-block; to wrapper div then you can get the result.....
I have a calendar and I am trying to add events to it. Each event has a style and will have a link associated with it. It seems to be doing OK when there is only one event per day, but the issue comes when I am trying to add 2 events inside a single day. I have played around with absolute and relative position but it doesn't seem to be working. I would like it to look like this:
example Image
but it actuallty looks like this: actual html
Here is my Code:
CSS
.calendarDay {
position: relative;
clear: none;
width: 14.2851%;
height: 142px;
background-image: url(images/calendarDayBG.png);
background-repeat: no-repeat;
background-size: cover;
font-family: "Stag Sans book", "Arial";
font-size: 45pt;
vertical-align: top;
color: #4d4f53;
overflow: hidden;
top: 40px;
text-align: left;
}
.calendarDay h1 {
font-family: "Stag Sans light", "Arial";
font-size: 45pt;
text-overflow:clip;
vertical-align: top;
}
/* event styles */
surgicalCare {
display: inline;
alignment-baseline:baseline;
background-color: #d75f17;
position: absolute;
}
surgicalCareStacked {
display: inline;
background-color: #d75f17;
position: absolute;
}
strategicaccounts {
display: block;
alignment-baseline:baseline;
background-color: #5e249e;
}
HTML
<li class="fluid calendarDay zeroMargin_desktop">17<a href="EAST/msn.html"><div class="fluid surgicalCareStacked">
<p>E.A.S.T.</p>
</div></a>
<a href="EAST/sponsorship_EAST.html"><div class="fluid surgicalCare">
<p>E.A.S.T.</p>
</div></a></li>
I was thinking that I may need to use different styles: one for multiple events in a day "stacked," and one with a single event...but I could be totally wrong!
Thanks!!
Your images are not available for some reason. If I understand your question correctly, this is what you are looking for:
______________________
| Parent div |
| __________________ |
| | Child div 1 | |
| | | |
| |__________________| |
| __________________ |
| | Child div 2 | |
| | | |
| |__________________| |
|______________________|
Something like this would work:
HTML
<div id="parent">
<div id="child1">
<!-- Stuff here -->
</div>
<div id="child2">
<!-- Stuff here -->
</div>
</div>
CSS
#div1 {
width: 250px; // Or whatever width you need
}
This works because divs are block elements by default, so they span the whole width of their parent element, and force other elements down.
I have a container of a fixed size, containing a vertical list of blocks of varying heights .
I would like to hide all blocks that does not fit completely within the container.
So assuming something like this:
#container{
height: 150px;
width: 220px;
border:1px solid green;
padding:10px;
overflow: hidden;
}
.inner{
border:1px solid blue;
height: 50px;
width: 200px;
margin: 10px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
<div id="container" >
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
<div class="inner">D</div>
</div>
(See: http://jsfiddle.net/TSCzS/)
I get something like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
+--| C |--+
+-------+
+-------+
| D |
+-------+
I do not want to just have the C block clipped:
(as when simply using overflow:hidden on the container)
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
| | C | |
+-------------+
but instead, the blocks C and D should be hidden like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| |
+-------------+
How can I do this?
My application for this is that I have a full screen browser window (in a digital signage application) showing the "latest news". The units have no input devices, so scrolling is not possible.
A similar question, but without a working solution:
Hide block which does not fit container height
Thanks.
The only way I can imagine a solution is via JavaScript. CSS itself wont help.
Here's an update of your fiddle: http://jsfiddle.net/bukfixart/TSCzS/1/
This snippet selects all clipping elements and hides them.
$('.inner', '#container').filter(function() {
return $('#container').offset().top + $('#container').height() < $(this).offset().top + $(this).height();
}).hide();
For this solution you need to use jQuery
edit:
For all the pure CSS enthusiasts ;-)
http://jsfiddle.net/bukfixart/CfMer/
I tried a solution without javascript and used css3 transformations instead. Therefore some markup changes are necessary
<div id="outercontainer" >
<div id="container" >
<div class="outer">
<div class="inner">A</div>
</div>
<div class="outer">
<div class="inner">B</div>
</div>
<div class="outer">
<div class="inner">C</div>
</div>
<div class="outer">
<div class="inner">D</div>
</div>
<div style="clear:left;"></div>
</div>
</div>
And here's the a little bit stranger style code
#outercontainer {
width:240px; /* container width + padding */
height:170px; /* container height + padding */
border:1px solid green;
}
#container{
height: 220px; /* container width ^^ */
width: 150px; /* container height ^^ */
padding:10px;
overflow: hidden;
position:relative;
left:35px; /* half of difference from width + padding to outer container width */
top:-35px; /* half of difference from height + padding to outer container height */
-webkit-transform:rotate(90deg);
}
.outer{
float:left;
height:202px; /* width of the inner box + border */
width:52px; /* height of the inner box + border */
margin:10px 10px 10px 0px;
line-height:200px; /* width of the inner box */
vertical-align:middle;
-webkit-transform:rotate(-90deg);
}
.inner{
border:1px solid blue;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
line-height: 50px;
display:inline-block;
position: relative;
left: -75px; /* half of difference between width and height */
}
I have 3 divs with display:inline-block style. I want to set their height value so that it matches the one with the highest value. I also want to set height values auto. I've tried to show visually what I want to get below. Is this possible with pure CSS?
----- ----- ----- ----- ----- -----
| | | | | | | | | | | |
----- | | | | ==> | | | | | |
----- | | | | | | | |
----- ----- ----- -----
With CSS you can set the inner divs to be display: table-cell and the outer one to be display: table
Demo: http://jsfiddle.net/maniator/C2dNu/
HTML:
<div id='out'>
<div class='red'></div>
<div class='blue'></div>
<div class='green'></div>
</div>
CSS:
.red {
background: red;
height: 60px;
}
.blue {
background: blue;
height: 160px;
}
.green {
background: green;
height: 80px;
}
#out {
display: table;
width: 500px;
}
#out > div {
display: table-cell;
width: 33%;
}
With JS, it can be done with Equalize.js. I don't know a pure CSS solution though.
The basic question is: How can a be shrink-to-fit over an element while itself containing other elements?
The goal is to have a (centered) menu over an (centered) image, which´s width and height shall relate to the images dimensions.
All of it being responsive, meaning no absolute sizes!
Here´s the sample code:
<div id="menu">
<img src="picture.jpg" />
<div id="left">
test1
</div>
<div id="right">
test2
</div>
</div>
#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}
#menu img{
height: 90%;
position:relative;
}
#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}
#clear{
clear: both;
}
#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}
and this is what it´s supposed to look like:
____________________________________
| |
| ------------------------------ |
| | | |
| | p i c t u r e | |
| | | |
| | | |
| | | |
| | | |
| | left <button> right | |
| | | |
| ------------------------------ |
| |
------------------------------------
The height/width ratio of the picture is always the same. It´s total size depends on the users window though.
I just can´t get the "menu" div to wrap around the and the "left" and "right" divs be positionable at the same time.
Is this even possible? I´m not even talking about browser compatibiliy yet...
See if this works: http://jsfiddle.net/sdvnh/1/
Changes:
#menu {
display: block;
}
#menu img{
height: 90%;
width: 90%;
}