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
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 have stuffed two elements on a single line: an inline element followed by an inline-block element. Despite having exactly the same vertical-align: baseline, they do not appear to line up properly on the line. They are offset by one pixel on my test browser
A reduced testcase:
<div>
<span style="background-color: #f00;"> </span>
<div style="background-color: #f00; display: inline-block; height: 1em"> </div>
</div>
https://jsfiddle.net/vupn9yk6/
Any idea on how to make both elements perfectly aligned vertically ?
Span is not a block level element. you have to update your css like this.
HTML
<div class="someclass">
<span style="background-color: #f00;"> </span>
<div style="background-color: #000;"> </div>
</div>
CSS
.someclass span, .someclass div{display:inline-block}
Check this fiddle. Hope this help you.
inline
inline element is not taking height and width, it's height and with property auto,
inline-block
inline-block element is taking height and width, if you not define in your css, when you will change the property in (inline-block) then it's came same base line
Please check below image
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/
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.
<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.