I know the title of the question sounds absolutely weird but I had no idea what else to call it.
First off I have a grid layout where I want my .search-wrapper to be 50% wide and floated right. In my demo on jsfiddle the entire .search-wrapper has a green background color. It's important that this element stays the way it is because it should fit into my grid.
Inside this .search-wrapper I have a searchbox and a button both floated side by side. This is just how I want it to be. So the #search-button should be floated left and the input should be aligned right to it.
However the thing I can't achieve is how to float both - the #search-button and the ´inputto the right inside the outer container.search-wrapper`.
The current status …
The way I'd like it to be …
Here is a demo of my problem: http://jsfiddle.net/mQSBR/2/
Any ideas on that? Your help is very much appreciated. Thank you!
See this, if this is the effect you want: http://jsfiddle.net/mQSBR/9/ [EDIT]
div.search { width: 180px; float: right; } /* fix to 180px wide, float to right */
also add:
.search-wrapper {
min-width: 180px;
}
so the wrapper won't go past the .search div when resizing.
Here is the solution in the updated jsfiddle
<div class="wrapper search-wrapper">
<div class="search">
<form action="/" method="get">
<fieldset>
<input type="text" name="s" id="search-box" value="" class="" placeholder="Search this platform …">
<button type="submit" id="search-button">Search</button>
</fieldset>
</form>
</div>
.search-wrapper {
width: 50%;
float: right;
background:green;
margin-top:1em;
}
#search-box {
border: none;
background-color: transparent;
color: transparent;
height: 20px;
float: right;
}
#search-button {
border: none;
background-color: transparent;
color: transparent;
float: right;
background-color:red;
background-position: center -36px;
background-repeat: no-repeat;
}
Right align of search box/button
Also, my proposal is to use placeholder attribute of an element instead of overflowing label
You could do something like this
.search {
float: right;
width: 80%;
}
You can do this:
<fieldset style="margin-left: 20%">
<div class="input-inside-label">
http://jsfiddle.net/userdude/mQSBR/3/
Made a couple of edits to compensate for the overflow-x scroll bar:
#search-button {
...
margin-left: -20px;
...
}
.input-inside-label {
...
margin-left: 0;
width: 70%;
...
}
http://jsfiddle.net/userdude/mQSBR/7/
Related
I have a label, input and button one line. The width of the label and button are dynamic, they take the width of the text they contain. The label is aligned to the left, and the button to the right.
I want the button to be aligned to the far right, and the input in the middle take up all the remaining space.
I put a float: right on the button, but if I put the width of the input to 100% it goes to the next line and acts like a block element.
What would be the best / easiest way to realize what I'm trying to do here? This is a little bit tricky for me. I'm not sure what to do.
label {
margin-right: 10px;
}
input[type=text] {
width: 355px; /*100% doesnt work*/
height: 20px;
padding: 5px 10px;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
vertical-align: bottom;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<input type="text" id="place" value="Test value">
<button>Click</button>
</fieldset>
JSFiddle Demo
Here's a bit of a hacky way to do it:
table {
width: 100%;
}
.fixedText {
width: 1px;
white-space: nowrap;
}
.relativeText {
width: 100%;
}
#place {
width: 100%;
}
<table>
<tr>
<td class="fixedText">
<label for="place">Any text here:</label>
</td>
<td class="relativeText">
<input type="text" id="place" value="Test value">
</td>
<td class="fixedText">
<button>Click</button>
</td>
</tr>
</table>
Just to show you that you can also do it without tables (although I would probably go for the display: table-cell).
First float the label and the button to the left and right. Add a wrapper around the input. The wrapper gets overflow: hidden which creates a new block formatting context, see http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ for background information. In short this allow the wrapper to take up the remaining space.
Afterwards we apply some fixes to the padding, box-sizing, height and line-height to make it all look good again.
label {
height: 40px;
line-height: 40px;
margin-right: 10px;
float: left;
}
.wrapper {
overflow: hidden;
}
input[type=text] {
width: 100%;
height: 40px;
padding: 5px 10px;
box-sizing: border-box;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<button>Click</button>
<div class="wrapper"><input type="text" id="place" value="Test value"></div>
</fieldset>
Here is my example from jdfiddle:
http://jsfiddle.net/7RT7a/
Here is html code:
<div id="product-pack">
<div name="productRow">
<div class="product-title-input">
<p class="titles">Product</p>
<input name="product" type="text" >
</div>
<div class="unit-title-input">
<p class="titles">Unit</p>
<input name="unit" type="text" >
</div>
<div class="quality-title-input">
<p class="titles">Qty.</p>
<input name="qty" type="text" >
</div>
</div>
Here is CSS:
.product-pack {
float: left;
width : 96%;
}
#product-pack input {
width: 95%;
height: 1em;
font-size:1em;
font-weight:bold;
border-style: solid;
background-color:#CCC;
border-color:#999;
border-width:thin;
padding: 1% 0 1% 0;
margin-top: 0.5%;
}
#product-pack .product-title-input, .unit-title-input, .quality-title-input {
float: left;
text-align: left;
}
#product-pack .product-title-input {
width: 82.5%;
padding-top: 2%;
}
#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}
#product-pack .quality-title-input {
width: 5%;
padding-top: 2%;
}
In jsfiddle result, you can see that effect of #product-pack input CSS selector only applies to first input element inside #product-pack and no matter what I try, the other two input elements get no effect.
Am I missing something with CSS or HTML? Any help would be appreciated.
Padding percentages are calculated from the width of the containing block (per MDN). Use px or em instead to specify the padding.
If you're trying to get all the input's to be the same height you have padding differences between the input's parents. specifically here,
#product-pack .unit-title-input {
width: 5%;
padding: 2% 1.5% 0 0;
}
You forgot to add </input> after <input>
Jsfiddle - as you can see here, all of the <input> boxes now are affected by the css styling (they turn yellow)
I have this code:
<div class="outer">
<ul class="list">
<li class="inner">
<div class="line">information1</div>
<div class="line">hyperlink1</div>
</li>
<li>
<div class="line">information2</div>
<div class="line">hyperlink2</div>
</li>
<li>
<div class="line">information3</div>
<div class="line">hyperlink3</div>
</li>
<li>
<div class="line">information4</div>
<div class="line">hyperlink4</div>
</li>
</ul>
<input type="submit" id="send" value="send" class="button"/>
</div>
and the css:
.outer
{
display: table;
border: 1px solid;
padding: 5px;
}
.list
{
list-style: none;
padding: 5px;
}
.inner
{
display: table-row;
padding: 5px;
}
.line
{
display: table-cell;
border: 1px solid;
border-radius: 5px;
}
.button
{
top:50%;
left:50%;
}
the output is: this
Now i want to place the button in the center of the 'outer' div no matter what is the width.
example: i want the button to be in center even for: this. without having to change the css each time the div size changes. Even if the 'outer' div is dynamic, the button should be in the center.
thank you.
This achieves what you're looking for in a simple, succinct, way:
.button {
display:block;
margin: 0 auto;
}
You need to give the button a specific width and then you can use automatic margins
.button {
display: block;
margin: 0 auto;
}
http://fiddle.jshell.net/CrHyd/
There's more than one way to do this. I prefer using percentages like so:
input[type="submit"]{
min-width:20%;
max-width:20%;
margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}
Other people prefer a margin:auto approach but personally I've never found this to work. Other methods include using floats but I don't agree with this property as it mis aligns other elements in some browsers.
Using top and left will cause errors as you've not specified a position type other than default (static).
This should work
.outer {
display: inline-block;
text-align: center;
}
fiddle
Just change .button to this, using the margin property. (1 line fix)
.button
{
margin:0 auto;
}
Here's a Fiddle where I made the .outer a fixed width of 500px just to show an example of what margin does:
DEMO
HTML (3x times):
<div class="scream">
<div class="author">
<img src="avatars/dagrevis.png" alt="" title="daGrevis" />
</div>
<div class="data">
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
</div>
<div class="clearer"></div>
</div>
CSS:
.scream {
background: #F4F4F4;
width: 944px; height: 48px;
}
.scream .author {
float: left;
}
.scream .data {
float: left;
}
.clearer { clear: both; }
This is how it looks on my browser:
As you can see, height is set to 48px. Images size is 48px as well. How it comes that I don't see each div.scream in separate line? If I set height to 50px, for example, all works! In my opinion, it's because there are some-kind of border/outline/margin/padding that ruin my life. Unfortunately, with FireBug I don't see anything like that...
The bottom edge of an image is aligned with the baseline (the grey line) of the line box by default. The space below the baseline (also called "descender space") is what's causing your problem. See this article by Eric Meyer for more details.
To fix it, add this rule:
.scream .author img {
display: block;
}
Or this one:
.scream .author img {
vertical-align: bottom;
}
If you play around with a DOM inspector for a bit, you'll find that .author is coming out with a height of 52px or so. The extra 4px appears to be coming from the line-height. Setting line-height to 0:
.scream .author {
float: left;
line-height: 0;
}
Fixes the layout: http://jsfiddle.net/ambiguous/8KzdD/
Or, you can float the image to the left as well:
.scream .author {
float: left;
}
.scream .author img {
float: left;
}
That will remove the image from the local flow and make the line-height irrelevant: http://jsfiddle.net/ambiguous/8KzdD/1/
Yet another option is to ditch the clearing <div> and use overflow:hidden on the outer <div>:
.scream {
background: #F4F4F4;
width: 944px;
height: 48px;
overflow: hidden;
}
This will leave the <div class="author"> with their 52px height but the effect won't be visually noticeable: http://jsfiddle.net/ambiguous/8KzdD/2/
I need to do dinamic rounded box, (dinamic height and dinamic width)
I try using the code offer in the link bellow:
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
but I need it also with images for the middle left and right (I can't use simply background and border as offers in the up code,
I try modified the code, and the box looks great,
but when I enter text in it, the text wrap down.
any idea?
Html code
<div class="RoundCrnr">
<div class="TopLeft"></div>
<div class="TopRight"></div>
<div class="inside">
<div class="MiddleLeft">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
<div class="MiddleRight"></div>
</div>
<div class="BottomLeft"></div>
<div class="BottomRight"></div>
</div>
the Css Code
.RoundCrnr {
width:590px;
float:right;
}
.TopLeft {
background-image: url("/Content/Images/Top_left.png");
height: 34px;
font-size: 2px;
margin-right: 34px;
}
.TopRight {
float: right;
margin-top: -34px;
background-image: url("/Content/Images/box_top_right.png");
height:34px;
width: 34px;
font-size: 2px;
}
.gap-saver {
height: 1px;
margin: 0 0 -1px 0;
padding: 0;
font-size: 1px; /* to correct IE */
}
.MiddleLeft {
background-image: url("/Content/Images/Middle_left.png");
height: 7px;
margin-right: 20px;
}
.MiddleRight {
float: right;
margin-top: -7px;
background-image: url("/Content/Images/box_right.png");
height:7px;
width: 20px;
}
.BottomLeft {
background-image: url("/Content/Images/Bottom_left.png");
height: 33px;
font-size: 2px;
margin-right: 33px;
}
.BottomRight {
background-image: url("/Content/Images/box_bottom_right.png");
background-position: 100% 0;
background-repeat: no-repeat;
height: 33px;
font-size: 2px;
margin-top: -33px;
}
.inside {
}
thanks a lot!
I suggest using pure CSS. CSS3 to be precise. And if you are worried about browser compatibility, this is truly excellent:
http://css3pie.com/
The documentation should help you get started with some css3 code to make a box with rounded corners, and how to use their script to be cross-compatible:
http://css3pie.com/documentation/getting-started/
I've used it several times so far, and now not afraid to use CSS3!
BTW in regards to why your text is wrapping down, it is because you have several div tags, which are block elements (display:block). This makes them sit on top of one another (they kinda behave like paragraphs). I don't know the reason why you have several divs, but you could either change the div's display value like this:
.MiddleLeft div {
display: inline;
}
Or change them to span tags, which are inline elements. You can find out more by googling for difference between span & div tags.
Hope this all helps!
Ali.