Not the most self explanatory title I've ever authored.
What I'm trying to do (see this fiddle) is for the text field and button to remain positioned right next to eachother (no margins), with the button to the right, and thetext field covering 100% of the remaining width of the container that the button isn't occupying. The relationship between the two should remain even if the containing element is resized.
Browser requirements: IE9+, Firefox, Webkit
Check out this little demo: little link. The code is pretty-self explaining, but here's the basic idea:
<div class = "container">
<div class = "cell">
<input type="text" placeholder="Glee's awesome!" />
</div>
<div class = "cell" style = "width: 1px"> <!--make sure it's only large enough to fit the button-->
<button type="submit">Glee</button>
</div>
</div>
CSS:
.container {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
Hope that helped!
Related
I am trying to have a text input and two buttons in the same row. The length of the text input should be maxed out so that everything still fits in a row:
<div style="display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; width:100%;">
<!-- div style='width:calc(~"100% - 150px")' -->
<div style='width: calc(50% - 120px);'>
<SfTextBox FloatLabelType="#FloatLabelType.Never" Placeholder='' Value=#WatermarkID() Enabled="false"></SfTextBox>
</div>
<div><SfButton Type="button" Content="Edit..." #onclick="EditWatermark" IsPrimary="false"></SfButton></div>
<div><SfButton Type="button" Content="Remove..." #onclick="RemoveWatermark" IsPrimary="false"></SfButton></div>
</div>
This is the result (with Google Chrome):
If I give the div e.g. a width of 50% (style="width:50%;"), the div's width gets set as desired. The above code shows another attempt to call calc in the commented out line, which didn't work either.
What do I have to do to get the desired result (text input as long as possible with buttons to its right), and why doesn't calc seem to work here?
If you want both buttons pushed to the right and the input field taking up all of the available space left, you can use flexbox (what you're already using):
Remove the justify-content: space-between property (it's not needed anymore) and set the width of your input field to 100%. The buttons need the property flex-shrink: 0; so they won't get shrinked.
Working example:
<div style="display: flex; width: 100%;">
<div style="height: 30px; background: orange; width: 100%;"></div>
<button style="flex-shrink: 0;">Hello</button>
<button style="flex-shrink: 0;">World</button>
</div>
If you want some spacing between the elements, you an use the gap property on the flex container, e.g. gap: 10px;.
Your codes are working, just not the way you expect(text input as long as possible with buttons to its right).
Few things to get it work as you expect:
Remove the "justify-content:space-between;" in #d1 (text input as long as possible means no space)
Replace "width: calc(50% - 120px)" with "width:100%" in #d2 to make it fill the space. As you used "display:flex" in #d1, item in it will "flex", making it not occupying the whole 100% width of #d1 but shrinking a bit to achieve "as long as possible with buttons to its right"
Add "width:100%" to your input
<div id="d1" style="display:flex; flex-flow:row nowrap; align-items:center;width:100%;">
<div id="d2" style='width:100%;'>
<input type='text' style="width:100%">
</div>
<div id="d3"><button>Edit...</button></div>
<div id="d4"><button>Remove...</button></div>
</div>
I have a web page that has five buttons of width 50 arranged next to each other in a row, and above each one, I want there to be a text item. However, putting each one in a <span> or a <div style="display:inline"> does not pad them correctly with either "width="50"" or adding "width:50px" to the style; they just appear next to each other. The "obvious" answer is to put each item into a table cell, but W3C says this is a Bad Thing now.
I also tried using input tags with readonly set; these space properly, but the text appears in input boxes rather than "on the page background."
Is there a way to align label elements (that can be changed in the script) evenly spaced horizontally without using a table?
There are a few possible solutions. Either you can use display: table-cell, which perfectly follows the W3C recommendations or you can use a flex box which is an even better solution. However the flex box is still quite new and you may want to support an older browser so the display: table-cell approach might work at least as a fallback.
Please, see the working fiddle.
HTML
<div class="container">
<div class="row">
<span>Text 1</span>
<span>Text 2</span>
<span>Text 3</span>
<span>Text 4</span>
</div>
</div>
CSS
.container {
display: table;
width: 100%;
}
.row {
display: table-row
}
span {
display: table-cell;
text-align: center;
}
Inline elements can't have fixed width or height. Try adding display: inline-block;.
Elements of display: inline don't take a width property, their size is dictated by their contents; to allow for elements to appear in-line with their siblings and to also accept a width switch their display property to that of inline-block.
It's because inline elements does not have fixed width. They are automatically set to fit in the space. You need to set display: inline-block to set width of an inline element.
Try this:
<style>
.btnbtnSpace{
width:50px;
display: inline-block;
}
</style>
<div class="btnbtnSpace">Text<br /><button > 1</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 4</button></div>
<div class="btnbtnSpace">Text<br /><button > 5</button></div>
"display: inline-block" worked. I didn't notice it at first because the options on the "CSS Display" page at W3Schools didn't include it; inline-block gets its own page for some reason.
I have a page layout with two div. They are both float:left and so appear as columns next to each other. I want them to stay that way. However, if the text in the right-most div is too long then the whole text moves down below the left most column. This also happens if the text is short, but I make the browser window smaller. What I want is for the long text to take up more lines, but only within its own right column.
CSS:
.left{float:left}
.right{float:left}
HTML:
<div id="container">
<div class = "left">
<span>some text</span>
</div>
<div class = "right">
<span>some long text....</span>
</div>
</div>
Edit: Also, the left column should stay fixed.
Sounds like you want to do something like this:
http://jsfiddle.net/VV4Hc/8/
The outer container specifies the width those two divs should occupy. As you can see, they also have percentage widths so you can change the container's property without having to go back and change the divs.
Word of warning, remember to clear your floats as well, so other elements don't get "caught" in the float. To do that, just define an element with the property clear:both like this:
.container {
width: 1000px;
margin: 0px auto; /* This will center the container on the page. */
}
.left, .right {
float: left;
width: 50%;
}
.clearfix {clear:both;}
<div class="container">
<div class="left">...</div>
<div class="right">...</div>
<div class="clearfix"></div>
<p>I won't get caught.</p>
</div>
If you're looking to do this for layout, you may want to consider a CSS framework, which has these sorts of things perfectly measured based on a specified number of columns. See:
Bootstrap/Kickstrap
960.gs
Blueprint
You can set the positions for those divs like
.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}
I was able to solve it with a table. When the window is made smaller, at first only the right column is made smaller and the words squeeze down on more lines until the column has disappeared. If the browser is made smaller than the width of the left column, then the left column starts disappearing, cutting off words. Works in my Chrome and IE although I don't know about older IE.
.td_right{vertical-align:top; max-width:300px;}
.td_left{vertical-align:top; min-width:300px; width:300}
<table >
<tr>
<td class = "td_left">
stuff here
</td>
<td class = "td_right">
stuff here
</td>
</tr>
</table>
I would like to make a simple panel with buttons that are placed horizontally and aligned to the right. Willing to align it to the left I can easily do this like that :
.button {
float:left;
background-color: #55cc66;
margin-right: 50px;
padding: 5px;
}
//......
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
But when I do the same with float:right it obviously aligns it to the right but in inverted order. I have also tried text-align: right, position: absolute; right:150; and position: fixed; right:150;. The last two align to the right but awkwardly overlap the 'buttons'.
How can I achieve this then ?
You can remove floats and align the container of your "buttons" to the right with the property text-align.
You don't want your heading to be aligned to the right so you've to cancel it with text-align: left;.
One problem remains: you're using non-semantic div when what you really want are buttons. You should use ... button elements (or maybe input[type"button|image|submit"]).
These ones are focusable and are made for an action taking place when clicked (with mouse, keyboard or tap).
Back to these div: they are displayed as blocks by default, you've to change for inline-block - IE8+.
Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/
Leave the class .button with float left, wrap all your buttons with another division (btn_wrapper) and add a specific width to it and float right. Just make sure that all your buttons fit inside the wrapper
.btn_wrapper{
width:300px;
float:right
}
<div id="switcher">
<h3>Style Switcher</h3>
<div class="btn_wrapper">
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
</div>
I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.