I am trying out forms in HTML.
Fiddle
For the div #status, the CSS rules are-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40%;
}
But I cannot understand why the height of divison does not get altered by height rule in the CSS. More over If I try out-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40px;
}
JSFiddle
This leaves the text on the bottom while div is placed at some random place.
Could some help with placing this division below E-mail ID field so that text appears inside it?
Also, which rule in my CSS is responsible for this positioning of div.
You're inserting the div under elements that are floating. You need to add clear: both to your #status CSS rules:
#status {
margin: auto;
width: 50%;
border: 2px solid red;
background: white;
height: 40%; /* or 40px, which will look slightly different. Your choice. */
clear: both;
}
Updated Fiddle
Related
In the following code, the #wrapper div contains the #left and the #right div. But they do not turn out to be contained inside the #wrapper div.
I want them to be treated as the content of the #wrapper div, so they are contained inside it, leaving the 10px padding applied to the #wrapper. Why are they displaced?
JSFiddle here.
<div id="wrapper">
<div id="left">Alpha</div>
<div id="right">Bravo</div>
</div>
The CSS is as follows.
#wrapper {
background-color:grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding:10px;
}
#left {
background-color:yellow;
float:left;
}
#right {
background-color:pink;
float:right;
}
I want to solve this without manipulating position attributes of the #wrapper as that might disrupt the normal structure of my page (I'm afraid so).
Because you are floating them so they sit outside of the DOM flow. If you want the parent to consider them, add overflow: hidden to the parent CSS or add a div at the bottom of the container with the rule clear: both;
Demo : http://jsfiddle.net/cros1mrv/1/
You should set the overflow of your wrapper to overflow: auto to flow around your floating divs.
#wrapper {
background-color: grey;
border-top: 1px solid black;
border-botton: 1px solid black;
padding: 10px;
overflow: auto;
}
See this fiddle.
Because of floating. One way to clear that is to use:
#wrapper {
overflow: hidden;
}
I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?
what<div style="display:inline-block;width:200px;border:1px solid red">hello</div>
If you can wrap a span around the div, like:
what<span><div>hello</div></span>
jsFiddle example
You can apply this CSS to get what you're after:
a {
background: #ccc;
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
div {
width: 100%;
display:inline-block;
border:1px solid red
}
You could wrap everything within a div and give it table and table cell to children:
http://jsfiddle.net/T4Qcd/
.inner{
border:1px solid red;
display:table-cell;
width:100%;
}
a{
display:table-cell;
}
.wrapper{
display:table;
}
You can do so by applying width to both anchor tag as well as the div.
a{
width:10%;
}
div{
width:90%;
}
Your html would be.
what
<div style="display:inline-block;border:1px solid red">hello</div>
Following my code:
HTML:
<div>aaaaaaaaaaaaaaa
<span>test</span>
</div>
CSS:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
}
span{
float: right
}
I would get this result: http://oi41.tinypic.com/2py25w1.jpg
I would like the text right-floated should not have to get out the div, so it must go to a new line inside the div when needed, as in the code that I posted.
In this case, for example, there is no need to let go of the text in a new line, because the text fits on the right of the text: http://jsfiddle.net/3kRan/2/
Set the overflow on your div to hidden like so:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
overflow: hidden;
}
Your contents are overflowing when the span tries to float. This will allow your span to stay within its parent container.
This answer depends on your ability to wrap your text in an element, such as p. The ending result would be:
<div><p>aaaaaaaaaa</p>
<span>test</span>
</div>
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
height: 100%;
overflow: auto; /* fix to clear the parent */
}
p {
padding:0;
margin:0;
}
span{
float: right
}
Updated fiddle: http://jsfiddle.net/3kRan/5/
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
This is how i configured the divs in HTML
<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>
And this the css for the div's
#wrapper {
border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
margin-top: 15px;
margin-bottom:15px;
}
#content {
margin-left:20px;
width:1008px;
}
#details-middle
{
float:left;
width:700px;
}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px;
padding:10px 12px;
background-color: #FFF;
}
Everything is showing out of the div's ..
You are floating details-middle, which means non floated elements will not make room for it, unless they themselves are floated, or you clear the float.
My preferred solution is to give the parent overflow: hidden; which will force the parent to make room for its floated children:
#content
{
margin-left:20px;
width:1008px;
overflow: hidden; /* change here */
}
Not exactly sure what you're wanting, there isn't a lot of description in regards to your question, but you need:
$('#details-middle').text();
to gather just the text from that DIV.
If you're not wanting to display children elements of the DIV, then refer to this answer I gave recently - it might be your scenario too:
jQuery pull out text inside div but not in p tag