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.
Related
When I shrink the browser + button separated between checkbox event though both div have inline-block
Please see the mini version of the code:
<div style="display: inline-block;">
<a class="plus" data-toggle="collapse" data-target="#data" href="#">
<i class="fa fa-plus-circle"></i><span></span>
</a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
<label>
<input name="unique_id" value="" type="checkbox">
<div id="unique_id">name - address <span class="label label-info">display</span>
</div>
</label>
</div>
But I just want + button and check box will place together when re sizing like this image( without re size )
When using inline-block on your elements they wrap with the parent width. So if you have a parent DIV to your structure juste add white-space: nowrap; to it. It will prevent the children with ìnline-block`to wrap (go under).
EDIT : You could also simplify your HTML structure, you have a lot of elements for a simple thing.
Set the width to both Div or add "float:left" to both div with some width to second div.
white-space: nowrap;
will force the content to stay on one line
Does it fit nicely if you made one of the divs a little shorter?
Reason because even with inline-block, two divs with a width of 50% might not actually fit in one row. There's a little space in between them. Not sure where it comes from; someone here should be able to provide the exact reason why.
But for me personally, what I'll do is wrap the two divs and give that parent div style="font-size:0;". Only caveat with this is that you must explicitly set the font sizes of the children div.
See JSFiddle
I used 4 different ways to align nested divs side by side. I expect these 4 ways to be correct, but only one is working (float). Can somebody explain why ?
<div style="background-color:black; width:100px; height:100px;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;float:left"></div>
<div style="background-color:blue;width:30%;height:100%;float:left"></div>
</div>
<br/>
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div>
<div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
Or JSFiddle
Thanks in advance.
A <span> isn't a block element, so it doesn't have width and height.
The same goes for <div>'s set to display: inline.
This works as you expected.
You can remove the white space between the div's to make it work. Elements set to inline-block have a space between them just like two words would. That's why you could also set font-size: 0; and it would work.
You could do the same as #3 but with position: absolute.
this is painfull... but the first one, the span is an inline element, so is the second set the div that has the style="inline" attached to it. This means they wont accept any height or width styles, as they are not blocks!
Your first example uses SPANs, SPANs are an inline element and therefore you cannot apply a height or width to them.
Your second example, you are changing a BLOCK element (DIV) but changing it into an inline element cannot apply a height or width to them.
Floating an element removes it from the flow of the document, so different rules apply, and you can apply width and height
The last example will work if you remove the white space between the 2 nested DIVS:
<div style="background-color:black; width:100px; height:100px;">
<div style="background-color:red;width:70%;height:100%;display:inline-block"></div><div style="background-color:blue;width:30%;height:100%;display:inline-block"></div>
</div>
http://jsfiddle.net/kKScJ/76/
try this:
give on div inline style code as float:left;
it give as align div all are one side one
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;"></span>
<span style="background-color:blue;width:30%;height:100%;"></span>
</div>
<div style="clear:both;"></div>
<div style="background-color:black; width:100px; height:100px;float:left;">
<span style="background-color:red;width:70%;height:100%;float:left;"></span>
<span style="background-color:blue;width:30%;height:100%;float:left;"></span>
</div>
I have a div surrounding multiple divs. The border of parent div is not covering all child divs as shown in the fiddle. Can anyone tell what is the issue here?
<div style="border:1px dashed gray;">
<div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:50px;font-size: 10px">Some content</div>
<div style="position:relative;top:60px;background-color:#E6E0EC">
<div class="glyphicon glyphicon-remove"></div>
</div>
</div>
JSFiddle link
You are using position: relative on the divs not surrounded by the border. The relative position property moves the contents of the element but keeps the reserved space of the element in the normal flow.
If you want to achieve the same layout with a border around everything it is best to use the marginproperty. I updated your jsfiddle to show an example
JsFiddle
Well there is no need for position relative, in all the child divs, just remove those tags.
Using top to specify the spacing is not a good idea in a case like this. It will be fragile. Let the elements make room for themselves and let the box model make space in the parent. To do this use margin-top instead.
Fiddle: http://jsfiddle.net/markm/rmvneo88/
Please check out this JSFiddle: http://jsfiddle.net/dNJxd/1/
As you can see in there, the divs at .left_field > div and .right_field > div have a border on them. However, that border is "collapsing" to 0 height.
If I change the overflow to hidden (all the similar questions are advocating for that), it fixes the issue, but that's not an option because it cuts off the date control that I'm using.
Any suggestions?
In the following segment:
<div>
<span class="field_label">PO Number:</span>
<span class="field_data">12345</span>
</div>
The first span has position: absolute; and as such assumes no space in its container, and the second is floating, which has that same effect on container space, unless it is cleared.
The following code will not have the same issue:
<div>
<span class="field_label">PO Number:</span>
<span class="field_data">12345</span>
<div style="clear: both;"></div>
</div>
Fiddle
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.