HTML element not obeying vertical align styling when float styling is used - html

I have the following simple HTML and styling (http://jsfiddle.net/ZLNvv/).
<DIV>
<BUTTON class="button"></BUTTON>
<INPUT class="textbox" type=text>
</DIV>
.textbox{vertical-align:middle}
.button{float:left;width:75px;height:75px}
The button is oversized to show clearly that the input box isn't obeying vertical-align:middle. If I remove the float:left styling on the button, the vertical aligning works. Is there any way to combine the two?
I've given the most minimal example which shows the problem, a more accurate example of what I am trying to achieve is below (http://jsfiddle.net/peerz/).
<DIV>
<DIV>Header</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<BUTTON class=button></BUTTON>
<div class="subHeaderText"> Subheader 1</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
<DIV class ="lineDiv">
<Div class="subHeaderDiv">
<div class="subHeaderText"> Subheader 2</div >
</Div>
<INPUT class="textbox" type=text>
</DIV>
</DIV>
.lineDiv{overflow:auto}
.subHeaderDiv{float:left;width:50%}
.subHeaderText{float:right;vertical-align:middle}
.textbox{float:left;height:30px;vertical-align:middle}
.button{float:left;width:75px;height:75px}
Thank you for any help.

If you want to just put the two ones side by side, try display: inline-block instead of float.

this is the default behavior for floats, the floated element will try to go up and left/right as much as possible, hence vertical align will not work. display:inline-block or margins is the way here like panos and bigfatpig said.

Try this :
<div>
<input type='button' class="button" value='press'/>
<input class="textbox" type='text'/>
</div>
<style type='text/css'>
.textbox{vertical-align:middle;display:inline-block;}
.button{width:75px;height:75px;display:inline-block;}
</style>
it should do what you want.

Related

Multi-column label in Twitter Bootstrap

I have the following markup in a form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
States
<img id="clear-selection" src="~/images/delete.png" title="Clear Selection" />
</label>
<select class="form-control"></select>
</div>
</div>
</div>
The control label (States) is followed by an icon. But I would really like the icon to be aligned to the right.
Instead of this:
I want this:
Is there any way to do this within the intended framework of Twitter Bootstrap? I'm not really clear about what sort of Bootstrap styles are considered acceptable within a <label> tag.
You can solve this simply by moving the image above and outside of the label and giving it a class of float-right.
This will float the image to right.

Radio Set CSS Styling, stack some buttons but not others

I'm trying to stack some radio buttons while leaving another on it's own because it has additional content.
My fiddle is here
http://jsfiddle.net/CkRF4/5/
<p>Style Radio Set</p>
This FIDDLE will give you a start.
Just a big div with a series of floated divs. Then three divs stacked inside.
I'm sure there are more elegant ways, just can't think of anything this late.
HTML (one floated div)
<div class='holder'>
<div class='littleholder'>
<input type='radio' id='scores' name='scores1' />
<label for='scores'>Assign All Scores</label>
</div>
<div class='littleholder'>
To: <input type='text' /> out of 1
</div>
<div class='littleholder'>
<input type='checkbox'/>Overwrite Scores
</div>
</div>

center input in bootstrap with input-prepend

<body>
<div class="container">
<div class="row">
<div class="offset4 span4">
<h1 class="text-center">Days</h1>
<form method="post" action="proc/days.php" id="jobs">
<div class="input-prepend">
<span class="add-on">Job Count</span>
<input type="text" class="day1">
</div>
<div class="input-prepend">
<span class="add-on">Day Name</span>
<input type="text" class="day2">
</div>
</form>
</div>
</div>
</div>
</body>
is my primary block of code (with all the other stuff striped out). I want to get the input-prepend to take up all the width available in the span4.
Right now, the only tricks I can find end up not working, or being way to large.
Also, I am using the Cosmo Bootswatch theme.
Setting .day1 to 76% width (after padding and borders are considered etc) will fill up your space. Problem would then be that you have another element depending on the .day1 class. So add an id, or example like:
<input type="text" class="day1" id="day1">
and then use #day1 {width:76%;} in your css. You'd most likely need to adjust the width size as your screen width changes though (through media queries).

What to name div tags that "group" content left and right

I have read some of the articles about semantic HTML code, and I am trying to fix my page applying those principles.
I have a index page that contains a section with a welcome greeting, a quick registration form and a big iphone image.
I want the welcome greeting and quick registration to be on the left side (underneath eachother) while the iphone image is on the right side. Now, I wonder how I should float these divs correctly?
I thought of making a left and right div that has the floating property, but the names are not good I think. I also thought of content and sidebar as two grouping div names...but is it really a sidebar? I could need some help.
<div id="welcomegreeting">
<h2>Title</h2>
</div>
<div id="quickregistration">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
<div id="appshowcase">
<img src="" />
</div>
I know the markup is not valid, but it is just for you can see what I mean.
I want the welcome greeting and quick registration to be on the left
side (underneath eachother) while the iphone image is on the right
side. Now, I wonder how I should float these divs correctly?
<div style="float: left;"></div>
<div style="float: right;"></div>
The question about naming isn't really relevant. Give it whatever name you want.
If you already have a site, don't worry about removing/changing your divs. You can wrap them with semantic tags.
For information, see HTML5 best practices; section/header/aside/article elements.
The use of semantic tags isn't going to help your users. However, it might help bots (such as a search engine).
You can also combine float and margin attributes:
HTML:
<div id="leftside">
<div id="welcomegreeting">
<h2>Welcome</h2>
</div>
<div id="quickregistration">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
</div>
<div id="appshowcase">
<img src="" />
</div>
<div style="clear:both"></div>
CSS:
#leftside {
float:left;
width:200px;
}
#appshowcase {
margin-left: 202px;
}
Fiddle
I wouldn't get caught up too much on it. Semantic code, although the way forward, should be there to help you, not confuse you.
Personally from what you've described, I'd use something like this:
<section>
<div class="welcomeTitle">
<h2>Title</h2>
</div>
<div class="registerForm">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
</section>
<aside>
<div id="appImage">
<img src="" />
</div>
</aside>​
Enclose the left and the right sides in tags with id left and right, and use the float property. You can name them whatever you want, but you can keep it as simple as left and right. Semantic markup does not mean you have to spend hours deliberating what to call it, it just means that the name should relate as closely as possible to the element's function.
See a live example here
HTML
<div id="left">
<div id="welcomegreeting">
<h2>Title</h2>
</div>
<div id="quickregistration">
<h3>Title</h3>
<form>
<input type="text">
<input type="text">
<input type="submit">
</form>
</div>
</div>
<div id="right">
Some content
<div id="appshowcase">
<img src="" />
</div>
</div>
​
CSS
#left {
float: left;
}
#right {
float: right;
}

HTML / CSS Vertical align two lines next to radio

I'm trying to have two lines aligned to the middle of a radio button, shown below.
What is the best way to achieve this with CSS? I can line up the top line but the bottom line is super stubborn. I'm trying not to float the radio, if possible, as it is being restyled using a jquery plugin.
Thanks for your help!
EDIT:
here's my code that I've been working with:
<div>
<input id="method-{{Description}}" type="radio" name="project[shipping-method]" value="{{Description}}" />
<label for="method-{{Description}}" class="pb-shipping-method-label">{{Description}} ({{DeliveryTime}})
<span>{{Price}}</span></label>
</div>
Two divs, one holding the radio and one holding the text. Set the line-height of the radio div to equal the height of the text div. Also add a vertical-align:middle to the radio itself.
Here's a demo: http://jsfiddle.net/AlienWebguy/JffCD/
Play with vertical-align or margin-top property of your input element.
I achieved this with no extra markup whatsoever. http://jsfiddle.net/KFpXQ/
Good luck :)
Bootstrap 4 with flexbox way:
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="pr-2"><input type="radio" /></div>
<div><label for="...">Name 1<br />Price 1</label></div>
</div>
<div class="d-flex flex-row">
<div class="pr-2"><input type="radio" /></div>
<div><label for="...">Name 2<br />Price 2</label></div>
</div>
</div>
Result: