I have a row in a web page. which has three controls
SomeText Input Button
It is like this
<div> SomeText <Input/> <img> </div>
In above img is floating right
Right now i have Input size 30, but in small resolution 30 is too big for the row and it splits in two.
I want input width to be maximum available instead of fixed width.
If i try size = 100% it takes whole row start to finish pushing text and img above and below in new row.
How do i need to format this row?
In the simple case:
<div>
<label for="thing">SomeText</label>
<input type="text" id="thing" />
<img />
</div>
div label { float: left; width: 20%; }
div input { width: 60%; }
This is assuming that SomeText will fit nicely into 20% of whatever width you've got.
But maybe it won't.
If you want to have fixed-size elements (eg. 8em each) at the sides and subtract those from the width of the input, you'd need to say 100% minus 16em. Unfortunately CSS has no such expression-calculating feature. The best you can manage is by adding wrappers to make 100% correspond to what you really want:
<div>
<label for="thing">SomeText</label>
<img />
<div>
<input type="text" id="thing" />
</div>
</div>
div label { float: left; width: 8em; }
div img { float: right; width: 8em; }
div div { margin-left: 8em; margin-right: 8em; }
div div input { width: 100%; }
It's a bit ugly as you have to fiddle the markup order for floats (or use absolute positioning). At this point you may be better off just giving up and using a table to get the desired width:
<table><tr>
<td class="label"><label for="thing">SomeText</label></td>
<td class="input"> <input type="text" id="thing" /></td>
<td class="img"> <img /></td>
</tr></table>
table { table-layout: fixed; width: 100%; }
tabel .label, table .img { width: 8em; }
table input { width: 100%; }
Somewhat-complex liquid-layout forms often exceed the capabilities of CSS Positioning and need help from tables.
(Either way, a bit of box-sizing on the input can also help to line things up.)
Related
#searchBar {
display: inline-block;
}
#container {
width: 580px;
background-color: white;
}
#logo {
margin-left: 25%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" id="logo" height="40px">
<form>
<input type="text" id="searchBar">
<input type="submit" value="Search Google">
<input type="submit" value="Feeling Lucky">
</form>
</div>
I'm trying to replicate the Google home page(sort of),what I'm trying to achieve is that the search bar (where input type equals search)will be one line above the two buttons,i can achieve that by other ways for sure but wanted to check the inline-block property..the object should act like its "inline",captures only the width of the content and "block" too,but for some reason the "block" does not work and the buttons are just next to the right side of the search bar..
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
So you will have to use display: block to fit the width.
display : block will serve the purpose. As {display: inline-block} will not add the line break. So, you have to modify the CSS as:
#searchBar {
display: block;
}
#container {
width: 580px;
background-color: white;
}
#logo {
margin-left: 25%;
}
I have four elements that I would like to take up 100% of the width available in the parent DIV -- an image, a jQuery UI slider, another image, and a button.
<div id="sliderScaleDiv">
<div id="halo">
<img width="75" src="http://www.clker.com/cliparts/n/c/1/B/r/q/angel-halo-with-wings.svg" alt="Angel halo" />
</div>
<div class="fluid"> <div class="slider"></div>
</div>
<div id="skull">
<img width="75" src="https://temporarytattoos.com/pub/media/catalog/product/cache/image/700x560/e9c3970ab036de70892d86c6d221abfe/s/k/skull-and-crossbones-temporary-tattoos_1601.jpg" alt="Skull" />
</div>
<form class="voteForm" id="new_vote" action="/votes" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="Yp7vN3kTCg2brdU3/yHknGxnE3I6V8xA/C3+zj4lbVN7qRS+pWWS/V4UPawx/gngJBkEpWGTZSMltOkSQuUfdw==">
<input value="23" type="hidden" name="vote[person_id]" id="vote_person_id">
<input type="hidden" name="vote[score]" id="vote_score">
<button name="next" type="button" id="nextButton" class="btn-feedback">Skip</button>
</form>
</div>
The only item I would like to have a variable width is the slider (take up as much space as possible). Without hard-coding a pixel value for the button, how do I specify in CSS that I want the button to take up as much width as its text occupies but no more? Right now, it seems like all my items are getting compressed (at least the slider is not filling the remaining space) and I think its because I haven't specified some type of width CSS element for the button -- http://jsfiddle.net/u72596ta/8/ .
The styles I've used for the four elements are
#halo {
position: relative;
z-index: 20;
vertical-align: top;
display: inline-block;
width: 75px;
display: table-cell;
}
.fluid {
display: table-cell;
}
#skull {
position: relative;
z-index: 20;
vertical-align: top;
display: inline-block;
width: 75px;
display: table-cell;
}
#nextButton {
display: inline-block;
display: table-cell;
}
If you change #nextButton to be display: inline-block and allow your .fluid to be width: 100% I think that might be close to the result you
re looking for.
Example: http://jsfiddle.net/u72596ta/10/
EDIT: I also just did another glance over your code and noticed that you're overwriting the display property. Not sure if that's for debugging purposes or not. Another suggestion would be to combine your #halo and #skull selectors. Since they are using the same CSS declarations, it will make your stylesheet shorter and cleaner :)
Having some issues with aligning images side by side on my wordpress staging environment.
I thought this would be the easiest part of the development phase but has actually proven quite difficult.
So in a nutshell, I want to align two images together, with some space inbetween and buttons below them. Simple right?
So I did the following HTML:
<div class="shop-banners">
<ul>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS1">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li>
<li>
<img src="https://www.cutepinkboutique.com/staging/wp-
content/uploads/2017/06/NoHTTPS2">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>
Here is my CSS that I'm using:
.shop-banners ul {
display: inline-block;
float: left;
width: 40%;
margin-left: auto;
margin-right: auto;
}
.shop-banners li {
display: inline-grid;
margin: 0 20px 0 0;
}
.shop-banners input {
margin-top: 20px;
}
This is how it looks below with the above code:
This is all on our staging environment so I can't link the web page. I just can't figure out why this is happening. I've tried messing around with the width percentage and taken out float but no luck.
Any help would be much appreciated.
That is depends on aspect ration of image , if you have two different images with different aspect ratio that if you set width same that you will get what you want but images resoluions will change , so try to wrap image in on block element set width property then assign image to max-width:100%
please use Li for both sections. into the questions, it's showing only one image use CSS below
.shop-banners ul {
display: inline-block;
float: left;
width: 40%
margin-left: auto;
margin-right: auto;
}
li {
display: inline-grid;
margin: 0 20px 0 0;
}
input {
margin-top: 20px;
}
<div class="shop-banners">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfefpyGjtYN37nWjh0koST45Hjx9uA4TP0OKlUG81VBsKaWI7g">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</li>
</ul>
</div>
So for your code,
You should use width: 50% for images, so that it takes half the screen width.
For spacing between two images, use padding on the containing div.
To arrange the button and image in the above fashion, use flexbox in CSS. By simply arranging them in rows. See below CSS-
I have demonstrated with height and width responsive for the image.
You can change that by simply changing the height of the image to an absolute value.
.shop-banners {
display: flex;
flex-direction: row;
}
.shop-banners__left, .shop-banners__right {
display: inline-block;
width: 50%;
}
.shop-banners img {
width: 100%;
height: 100%;
}
.shop-banners input {
width: 100%;
}
.shop-banners__left {
padding-right: 10px;
}
.shop-banners__right {
padding-left: 10px;
}
<div class="shop-banners">
<div class="shop-banners__left">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ce/4d/0c/ce4d0c6e5769b1ae0e78a09a516bce6a.jpg">
<input type="submit" name="submit" value="Shop our Tops and Dresses">
</div>
<div class="shop-banners__right">
<img src="http://vivaglammagazine.com/wp-content/uploads/2017/05/636096742373357996142416222_fashion-beauty-tips.jpg">
<input type="submit" name="submit" value="Shop Now for Boutique Clothing">
</div>
</div>
The code that I used was mainly correct, however it is best practice to encase it in .
The major difference, was scaling down the actual image sizes within the media library of wordpress. Once I did that and modified the width percentage in css, they managed to align without issues.
How to make all inputs with the same width 100%?
if I set width 100% then input will be break on new line:
div > input {
width: 100%;
}
HTML:
<div class="wrapper">
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
<div>
<label>Label</label>
<input type="text" />
</div>
</div>
CSS:
.wrapper label {
float: left;
margin-right: 10px;
}
.wrapper div {
margin-bottom: 15px;
}
The desired result (JSFiddle):
.wrapper input {
width: 90%;
}
You cannot make it 100% without a new line because the Label will take some space of the screen. Remaining portion you can allot for the text fields.
You can do something like this: DEMO
Just remove the float statement, and make both the label and input display: inline-block.
.wrapper div {
margin-bottom: 15px;
}
div > input, div > label {
display: inline-block;
}
div > input {
width: 77%;
}
div > label {
width: 20%;
}
You can change the width of the input fields and/or the labels, but I think width: 77% is the highest value possible for the input fields (with the width of the labels set to 20%) to still display inline.
EDIT:
Do note that using CSS selectors based on HTML tagnames is not the ideal way of doing this. A better way is to give all labels and inputs a class (f.e. class="lbl" and class="inp" respectively), and selecting those, like underneath:
...
.lbl, .inp {
display: inline-block;
}
...
<pre>
.wrapper{width:100%; display:block}
.wrapper lable{width:30%; display:inline-block; position:relative}
.wrapper input{width:70%; display:inline-block; position:relative}
</pre>
I'm working on a form with an horizontal layout:
<div id="container">
<label for="ta">description</label>
<textarea id="ta" name="ta" cols="50" rows="10"></textarea>
</div>
The problem is that what I want is the textarea take up all available space that the label leaves in the same line. If I try with width=100% it jumps to the next line:
div * {
vertical-align: middle;
}
textarea {
width: 100%;
height: 300px;
}
Any idea to implement it without assign a fixed space to each tag?
Like this? http://jsfiddle.net/4QbMr/
<div id="container">
<label for="ta">description</label>
<div class="twrap"><textarea id="ta" name="ta" cols="50" rows="10"></textarea></div>
</div>
label {
float: left
}
.twrap {
overflow: hidden;
padding: 0 4px 0 12px
}
textarea {
width: 100%;
height: 300px;
}
For table-like behaviour with CSS, display: table is your friend:
#container {
display: table;
width: 100%;
}
#container label, #container textarea {
display: table-cell;
vertical-align: top;
}
#container textarea {
width: 100%;
height: 300px;
}
Note that if you specify cols and rows attributes, they will override your CSS.
http://jsfiddle.net/N9hvU/27/
I think this is the behavior you're looking for. Even though I prefer to use divs/spans for element positioning; tables have the unique behavior (from my experience; don't know if this is in w3 specs or not) of not letting items go onto the next row; regardless of how big they become.
So, by setting the table row width to 100 percent, and the width of the cell w/the text area to 100%, the text area will consume any width available.
<div id="container">
<table>
<tr style="width:100%;">
<td>
<label for="ta">description</label>
</td>
<td style="width:100%;">
<textarea id="ta" name="ta"></textarea>
</td>
</tr>
</table>
</div>
You need to specify width for label.
like
label{ width: 20%; } textarea{ width:80%; }
I would instead put text for the label in the div and textarea in a different div and float both divs (and specify widths for both as well).
use a percentage less than 100% and leave out the cols in the textarea.try this http://jsfiddle.net/bingjie2680/Bw4MR/
update: try this: http://jsfiddle.net/bingjie2680/Bw4MR/3/ you need to use table to accomplish this job.