CSS: Label/Input wont float in IE7 - html

I am having problems with floating a label and input next to each other in IE7. I have tried everything I can think of:
Giving it a fixed width
Overflow hidden,border, background.
Wrapping inside of a div with float left.
The only way I can get it to work correctly is if I put it inside a table.

Try to make a clearing div under each row.
Like
<label>Username</label><input type="text" name="username"/>
<div class="clear"></div>
<label>Password</label><input type="text" name="password"/>
<div class="clear"></div>
.clear {
clear:both;
}

Related

Distribute Size of elements inside div

I want to display the unit of the input next to it.
I don't want the unit "g" to break into the next line when the size of the div changes.
The input should use all remaining space inside the div, as long as this does not cause a line break.
<div style="width:100px">
<input type="number" />
g
</div>
Just use display:flex and surround internal elements with a div tag. More on flex you can find on Mother Google.
Hope this helps.
<div style="width:100px;display:flex;">
<div><input type="number" /></div>
<div>g</div>
</div>
Easiest way and cross-browser supported way is using display - table and table-cell
You can wrap 'g' inside another <div>. Then you can get it in side-by-side irrespective of width by following CSS
body > div {
display: table;
}
body > div > * {
display: table-cell;
}
<div style="width:100px">
<input type="number" />
<div>g</div>
</div>
Try this.,
just give some room for the text to display
Change width of your div
<div style="width:200px;">
<input type="number" />
g
</div>

html display inline property and make two check box in the same row

I am a newbie to Html and currently I have some problem playing around with display style:
I would like to create two checkbox in the same line with one label in front of each, however, with the following syntax, my checkbox will always go vertical (one on top of the other).
<div>
<label></label>
<div><input type='checkbox'></div>
<label></label>
<div><input type='checkbox'></div>
</div>
I understand that there display:inline can solve this problem. But as you can see, in the following code, I have several <div> element, I tried to add display:inline into all the elements in the outer <div>, but it is not working. I am not entirely sure what is going wrong. Maybe I miss something ?
The other thing is that what if I want to make them both in the same line and also float to the left, should I just add a float:left to each elements in the outer <div>? It seems very inefficient since there maybe quite a lot elements in the outer <div>.
Any help or hint will be appreciated ~
If you wrap your inputs into div's, you will get line breaks. Get rid of them. Like this for example:
<div>
<label>First</label>
<input type='checkbox'>
<label>Second</label>
<input type='checkbox'>
</div>
Working demo
What you say you've tried should be working. Here is a basic demo:
div * {
display: inline;
}
<div>
<label></label>
<div><input type='checkbox'></div>
<label></label>
<div><input type='checkbox'></div>
</div>
I imagine what's happening is that your parent div style is also being applied to your inner div elements, overriding the inline style declaration. Ensure that your inner div element selectors have higher specificity than your parent one.
An easy solution is to simply give your parent div element a class attribute and style on that:
<div class="parent">
....
.parent {
/* Parent style. */
}
.parent div {
display: inline;
/* Child style. */
}
Depending on what you're trying to achieve though, a better solution may just be to place your input elements inside your label elements:
<label>
My label text
<input type="checkbox" />
</label>
Example
<label>
My first label text
<input type="checkbox" />
</label>
<label>
My second label text
<input type="checkbox" />
</label>
With this approach you can click on the label text to toggle the checkboxes.

Div content in same line

Following is the js fiddle
http://jsfiddle.net/zk7Uf/1/
<div style="width:200px">
<span class="span-blankPDF">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving:</label>
</span>
<div class="div-PDF" style="display: inline;width: 50px;">Reason to livelong</div>
</div>
The result i want is like this with the above divs width should not be increased.
Reason for leaving:Reason
to livelong
I think this is what you are looking for :
http://jsfiddle.net/BY294/
<div style="width:200px">
<span class="span-blankPDF" style="float:left">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving :</label></span>
<div class="div-PDF" style="display: block;width: 50px; float:left">Reason to livelong</div>
</div>
Position them baby!
You want the span to float left so it has a point of reference, then you want the next div to be a block as its its own entity as such and float that left to 'lean' on the span you have..
Or else i have completely misunderstood the question, in which case im not to blame! :)
Assuming your span element should remain a span and the div inside should remain a div, you can do it nicely with some CSS.
Use the display: inline-block to get rid of how span and div position themselves by default. Then use vertical-align: top to make the elements in the same line align on top of their containers.
So, without changing the widths (as you requested) and just adding some CSS, you can write it like this:
<div style="width:200px;">
<span class="span-blankPDF" style="display:inline-block;vertical-align:top;">
<label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving</label>
</span>
<div class="div-PDF" style="display:inline-block;width:50px;vertical-align:top;">Reason to livelong</div>
</div>
Se live demo here: http://jsfiddle.net/Vg6RG/
EDIT: You get the same result sa Pogrindis suggested, but this one is not using floating.

float:right causes parent div to shrink

<div style="width:50%;" class="outerdiv">
<div style="">
<div style="display:inline;">
<span><?php echo __('Başlık :', 'goldmem');?></span>
</div>
<div style="display:inline; float:right;">
<input class="postptext" type="text" id="posttitle">
</div>
</div>
</div>
I have this layout. Outerdiv has borders so I can see it's size change. This is the result :
Without float : http://i.imgur.com/F73U0jX.png?1
With float :http://i.imgur.com/8berzkN.png?1
How can I make it so that the size of the div contains all the elements.
Try adding overflow: hidden; to .outerdiv - as this creates a new Block Formatting Context for it's descendants (which are taken out of the normal flow, because they're floated, similar to the way absolutely positioned elements are, but not identical) - it basically allows the container to acknowledge the presence of the float as if it were in the normal flow. The key is to remember that regular block-level elements in the normal flow will ignore a float if it isn't cleared or if a new block formatting context isn't provided.
You can also add a div at the bottom that will clear all floating items. Add this to your html:
<div style="display:inline; float:right;">
<input class="postptext" type="text" id="posttitle">
</div>
<div class="clear"></div>
And add this to your css:
.clear {
border: none;
clear: both;
}
It will display as is shown here in JSFiddle:

Why doesn't this div force the following divs to move the right?

jsFiddle
I am trying to use a div as an empty space div, so that the follow divs are moved further to the right.
Style
div.note {float:left;width:60px; padding:0 0 0 50px;}
#buffer_div {width:150px;}
HTML
<div id="buffer_div"></div>
<div id="note-1" class="note">
note display here1
</div>
<div id="note-2" class="note">
note display here2
</div>
<div id="note-3" class="note">
note display here3
</div>
As you can see from the jsFiddle, this doesn't work. What am I doing wrong?
Why don't you do something like the following instead. It helps if you have as little markup as possible to achieve your goal and if all you want to do is add some space, a margin will do just fine.
<div id="note-1" class="note">
note display here1
</div>
<div id="note-2" class="note">
note display here2
</div>
<div id="note-3" class="note">
note display here3
</div>
And in your CSS:
div.note {
float:left;
width:60px;
padding:0 0 0 50px;
}
div#note-1{
margin-left:150px;
}
If you wanted to actually use "#buffer_div" to have maybe some content like a side bar, you would need to add a float to that too. If you want a group of elements to display in a row, there is nothing wrong with adding a float to all of them.
Your buffer div needs to float also. Float and non-float elements do not interfere with each other.
Your div is empty, hence it takes no space. If you want to have a left spacing just remove that div and do
.note:first-child {margin-left: 150px}
An easier way (unless there is a very good reason for a buffer div) would be make all the notes children of the buffer div and then change the "width" to "margin-left".