Normally I wouldn't post here for such a small question but I've tried everything I can think of. I've literally spent the past hour trying to make this work, vertical-align, padding up and down, etc. I'm sure it's easy.
http://jsfiddle.net/vWzZz/
Thanks for any help.
Remove the "float:left" from your button and it will be centered.
If that's not an option in your deployed environment, surround all the labels in a new div and add a margin-top or padding-top to that div.
wrap it with some div and try inline
.someButton,.someText
{
display:inline-block;
}
<div class = "someButton">
<input type=button />
</div>
<div class = "someText">
some text .....
</div>
Use a negative margin on the top. The button is taller than the other items on the line because of the added padding and other box-model elements.
margin:-4px .7em 0 0;
Related
Hello i used Bootstrap and my 2 div col-md-6 and col-md-6 are not in align in height.
Use this css for the first div.
div.col-md-6 {
display: inline-block;
vertical-align:middle;
}
The simplest way to align vertical align here is to add padding from top in the first div.Your second div have buttons and must be having padding also.
Use min-height for both using class to div. It will solve your query.
eg:
<div class="col-md-6 mycol">
</div>
<div class="col-md-6 mycol">
</div>
style.css
.mycol{
min-height:100px;
}
Without the code, it's hard to find the cause, but I guess your two div are without a css height property and then adapt to their content.
The div on the right contains items that seems to have a padding on top and bottom, resulting in an item with a greatest height than the one on the left.
Your two div are aligned on the top and as it's already been mentionned you need to add the same padding on the left and right cols (I don't like the vertical align answer, as it work in this case, but could cause issues as the cols height could change).
If you dont have a scenario where you text will wrap to the next line, you can use line-height which will be same for both the sections.
I was trying to make a scrollable with a fieldset but then the scroll is not working. I'd like to make a scroll because when the text is already not seen the scroll in mozilla firefox is not display also. That's why I'm trying to put or insert a overflow in fieldset but not working...
Here's the sample code I'm using.
<div class = "sam">
<fieldset>
<legend>test</legend>
space
space
<br> space
<br> space
</fieldset>
</div>
CSS
.sam
{
overflow:scroll;
}
thanks..
You need to set the height of .sam. Otherwise it will just grow with the content. Also, you can use overflow: auto to have the scrollbars show up as needed.
if you use overflow must use the height otherwise the form will be extend to outward from the field set
Please take a look at the following image..
As you can see.. I have added :hover property to the div enclosing each comment. but I get a small white space. When I use the chrome dev tools to highlight elements, the white space comes out of the area of all elements. it seems its a white space stuck between two divs. Please help me remove it. I added margin-top as a neg value but it gives a jerking effect on hover.
Without source to go on, I can only speculate about the HTML so bear with me.
Check for margins extending from the elements inside the <div>. If there's a <p> in there, the margins could be extending past the boundaries of the parent <div>.
If that's the case then this should do the trick:
div p {
margin: 0;
}
Assuming your layout is something like:
<div>Line 1</div>
<div>Line 2</div>
<div>Line 3</div> ...
You'd simply need to reset their margins:
div {
margin:0;
}
You may need to apply this to div:hover as well.
Alternatively you could look through your existing styling and (if it isn't user-agent styling causing this - which is unlikely for the div element), simply change your custom styling accordingly.
Thanks guys. I should have added a jsfiddle.
I had used a HR at the bottom of each comment and this HR had a margin after property. I removed hr and added a border-bottom for the div containing the comment. So that margin was removed. :)
Thanks a ton! I added padding to give space for the comments.
Is there a way to make a div element fit its content AND break the line, so that the next element is under that div?
I´ve tried to set the display property to inline-block, but then the div doesn´t break the line anymore... By default, it breaks the line, but doesn´t fit its content.
Hope someone can help me.
Thanks!
If you're trying to do it without an extra div, I don't think there's a way. Here's how with 2 divs:
<div>
<div style="background-color: #FF0000; display: inline">Test</div>
</div>
Something like this buddy?
http://jsfiddle.net/A6n2h/2/
I used this CSS code:
.container div *{float:left; display:inline-block; clear:both;}
There was a few errors in your HTML code too.
I have html:
<div class="field-label"><label>Email: </label></div>
<div class="field"><input class="input" ......></div>
and piece of css:
.field-label { clear:left; float:left; padding:0.5em; width:6em; }
.field { padding:0.5em; }
And it worked fine. But for some elements I wanted to apply following change:
when I add width to .field class layout goes to blazes: element with .field class appears under element with field-label class. Container of whole form is width enough to hold elements with field-label & field class.
Why is it happening, did I miss something in css basics?
Thanks ,Pawel
Did you take into account that padding, margin etc. is not included in width?
You might be better off using spans instead of divs for this layout, as spans are inline elements they might behave better than divs. Also, do you have a live example?
If the label and the field should appear on one line, you have to have a around the two 's witn an explicit width wide enought to contain the two others.