I have the following html code:
<div class="outer ui-draggable" style="position: relative;">
<div class="inner">Foo bar</div>
</div>
With this CSS:
.outer
{
background-color: #F7F085;
margin: 5px;
height: 100px;
width: 150px;
text-align:center;
vertical-align:text-bottom;
}
.outer .inner
{
display:inline;
vertical-align:middle;
height: 100px;
width: 150px;
}
I would like the inner div to fill the outer div completely - the text block should be an entire 100X150 box.
The problem is that this code doesn't produce the desired effect. The outer div is indeed the correct size, but the inner div seems to only fill a small area at the top of the outer div.
I also tried using height:inherit and width:inherit instead of specifying a size.
The problem is with the display:inline style. If you want it to behave like a normal DIV, keep it display:block. If it's display:inline it will only be as tall as the inherited line-height.
Might be because of the vertical-align style property. It is an invalid styling rule. It is only valid for <tr> <td> and <div> with display:table-cell
Related
I have a div with 15% Height and another div inside it with 15% height as well. Inner div has a <p> tag and this <p> tag is dropped out from the inner div but when I remove the height of the inner div everything works fine. Here is my html code and CSS code.
.header {
background-image: url("images/headerBg.jpg");
height: 15%;
width: 100%;
}
.title {
background-color: red;
float: left;
height: 15%;
}
<div class="header">
<div class="title">
<h2>Title</h2>
</div>
</div>
See below image for reference. Red thing is inner div and "Title" should be inside that Red thing but it's not html
You need to change height to min-height in .title class
.header{
background-image:url("images/headerBg.jpg");
height:15%;
width:100%;
}
.title{
background-color:red;
float:left;
min-height:15%;
}
It will give you following view (I just use background-color instead of image, you can use whatever you want).
You can remove float left and and play around with width.
This look will comes up if you will remove float left
And this look will comes up with width, I just added 100px, you can adjust it according to your requirements
I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.
An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.
In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.
JSFiddle code to try in both Chrome and Firefox
HTML as follows:
<style>
#container {
height:80px;
width:100%;
border:1px solid;
overflow:hidden;
resize:vertical;
}
#inner {
height:100%;
width:300px;
border:2px solid red;
overflow-y:auto;
}
table{
height:100%;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="inner">
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</td>
<td>
<img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
</td>
</tr>
</table>
</div>
EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV i.e. the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.
Thats a common mistake. Whenever an element is set to height: 100% or any other percentage, it relates to the height of its parent. So when using this, its important to define a height for the parent of your element:
To demonstrate the problem: Adding a class to the parent <td class="fix"> and add some css fixes the problem:
.fix {
height: 80px;
display: block;
}
WORKING JSFIDDLE DEMO
Keep in mind that setting the display attribute of a table cell from table-cell to block is something you should avoid, as you are changing the elements roots. Consider a solution without using a <table> markup if you have got the possibilities.
#inner {
border: 2px solid red;
height: 75px;
overflow: auto;
width: 300px;
}
You can use this CSS. I think it may work fine.
this is my html (for example)
<div id="wrap">
Some relative item placed item
<div id="fixed">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
</div>
here is my css:
#wrap{
float: left;
position: relative;
width: 80%;
background:#ccc;
}
#fixed{
width:inherit;
}
I want to make the second div that is 'fixed' to have same width as the first 'wrap'. I tried a lot, but i can't do it.
Is it possible to do this without any javascript?
Any suggestion..please.
here is the fiddle for this:
http://jsfiddle.net/sris/tktdf1kk/
You need to leave your width alone. Divs already expand 100% of their containing div. The reason your text is not wrapping is because it's all one word. Add the CSS:
#fixed {
word-wrap: break-word;
}
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I have some text in h3 tag, but the text is not visible, I have tried changing the height of the h3 tag as well of the div containing it.
The text I am talking about is visible in screenshot here - http://imagebin.org/226001
& the web page is here at - http://bit.ly/PLDSCJ
It's because the parent elements (.detail , .details and .details_wrapper) all have a fixed height. The H3 will be placed inside those elements, so when it's bigger you'll not see it.
Solution is to change the height of the parent elements.
try to increase the height of
<div class="details_wrapper">
something like this...
.details_wrapper{
height:400px;
}
I think one of the container divs on you page is clipping that part out.
It is most probably the div with .details_wrapper class that has just 200px as height.
Either align those hheights properly or set overflow to visible
Your wrapper is not high enough, specifically
<div class="wrapper clearfix">
<div class="carousel clearfix" style="position:absolute;">
<div class="panel">
<div class="details_wrapper">
This container cuts off your text. When you change to height to something more, say 400px; your text reappears! It is situated in this part of your CSS:
.carousel .panel .details_wrapper {
height: 400px; /* changed this height */
left: 25px;
overflow: hidden;
position: absolute;
top: 20px;
width: 175px;
}
Increase the height in your details_wrapper
Just add:
style="height: 400px"
And the problem is solved.
Use some color other than White.
<h3 class="Lexia-Bold" style="color:black; overflow: auto; width: 100px; height:500px;">