UPDATE:
I think the best solution is one mentioned by Timothy Lee. In essence, add vertical-align: top to the <div> tag.
A label, an input, and a div walk into a bar...
These elements all have the following styles:
box-sizing: border-box;
height: 40px;
line-height: 40px;
The div has a border and contains an anchor tag. The goal is to line the div and the input border, but it seems the div is 1px higher than the input.
See codepen for example
https://codepen.io/gosusheep/pen/PEQLOp
Thoughts on how to remedy this? I've mostly been messing around with margins and paddings and styling the anchor tag, but haven't found a solution.
Thanks for your time.
Edit:
P.S.
I've spent a good amount of time googling and looking on stackoverflow for solutions (that's where I found the "line-height" explanation), but still can't solve it.
Edit2:
HTML:
<div class="my-container">
<label for="text">Label</label>
<input type="text" id="text" />
<div class="my-link">
suh dud
</div>
</div>
CSS:
.my-container {
margin: 1rem;
}
input, label {
box-sizing: border-box;
height: 40px;
}
.my-link {
height: 40px;
display: inline-block;
box-sizing: border-box;
border: 1px black solid;
line-height: 40px;
vertical-align: top;
}
.my-link > a {
line-height: 40px;
}
The easiest way, you can remove the div
<div class="my-container">
<label for="text">Label</label>
<input type="text" id="text" />
<a class="my-link" href="#">suh dud</a>
</div>
and add vertical-align
.my-link {
vertical-align:top;
height: 40px;
display: inline-block;
box-sizing: border-box;
border: 1px black solid;
line-height: 40px;}
because the input element has inset border and your button has solid border, in second one, the solid element make a external border.
Here two differents options for border-box >>>
border: 1px solid #000;
border: 1px inset #000;
Related
Whenever I add margin to any element I get overflow, I tried adding box-sizing, position:relative. but nothing works
searched on google but nothing seems to help me
can anyone know why is this happening?
Sample Image
The margin is outside the element. One way to deal with it is to use calc on width as in the following snippet.
And note that margin is diferent from padding: paddingis inside the border (so it is included in the area covered by the background color), margin is outside:
.x {
box-sizing: border-box;
margin: 30px;
width: calc(100% - 60px);
background: yellow;
border: 5px solid red;
}
<div class="x">margin....</div>
With padding instead of margin, this would be:
.x {
box-sizing: border-box;
padding: 30px;
width: 100%;
background: yellow;
border: 5px solid red;
}
<div class="x">Padding....</div>
You can't add margin to a div that is a sibling of your container or else it'll create an overflow. Use padding instead. See how the text in the margin example shifts the text.
.parent {
width: 100px;
height: 100px;
background: red;
}
.padding-example {
padding: 10px;
}
.margin-example {
margin: 10px;
}
<div class="parent">
<div class="padding-example">Correct</div>
</div>
<hr>
<div class="parent">
<div class="margin-example">Wrong</div>
</div>
I want to put a colorful outline around a bunch of inline elements. Is there any easy way to make this look right within the flow of the text?
Here's the HTML:
<span>Text Before</span>
<div class="border">
<div>This</div>
<div>is</div>
<div>not</div>
<div>a</div>
<div>public</div>
<div>service</div>
<div>announcement.</div>
</div>
<span>Text After</span>
Here's the CSS:
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
}
.border > div {
display: inline;
font-size: 30px;
background-color: lavender;
}
Screenshot with .border display: inline:
Screenshot with .border display: inline-block:
I want it to look roughly like this (accomplished with a mixture of manual line height, padding, and relative positioning... ugh!):
Basically, inline-block elements do everything right, but they don't break apart between lines as would inline elements. But inline elements collapse their height and have to be manually adjusted. Is there really no way around this?
Try adding a line-height on container div.
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
font-size: 30px;
}
.border > div {
display: inline-block;
margin-bottom: 15px;
background-color: lavender;
}
This is a cop-out answer on my part, but It Works™, at least for my purposes, so I'm using it until something better comes up.
If you're willing to commit the relatively minor crime of putting a span around the content of each inner div and setting the text style for the span instead of the div, you can make each of the divs an inline-block, give the background and border style to each individual div instead of the parent div, set the left/right margin of each div, to 0, and extend the borders of the divs via padding to make it seem like one continuous background rect. If you want an outline, you can use the nth-item selectors and set the borders accordingly.
Here's the revised HTML (also compressed onto one line, to get rid of the spaces between inline-block elements):
<span>Text Before</span>
<div class="border">
<div><span>This</span></div><div><span>is</span></div><div><span>not</span></div><div><span>a</span></div><div><span>public</span></div><div><span>service</span></div><div><span>announcement.</span></div>
</div>
<span>Text After</span>
And here's the revised CSS:
.border {
display: inline;
word-spacing: 0;
}
.border > div {
display: inline-block;
vertical-align: middle;
background-color: pink;
padding: 5px;
margin: 2px 0 2px 0;
border-top-style: solid;
border-bottom-style: solid;
}
.border > div:nth-child(1) {
border-left-style: solid;
}
.border > div:last-child {
border-right-style: solid;
}
.border > div > span {
background-color: lavender;
font-size: 30px;
vertical-align: middle;
}
And here's what it looks like:
This technique breaks down if you want something more complex than a background color with a border, but for my purposes, the benefits — those being far simpler CSS and mostly automatic layout — outweigh the cons.
I'm trying to understand the basics of css applied to a test site that I'm working with.
Reducing the problem to it barest case I have three equal , two of which should contain lists, the third of which does not.
The html is as follows:
<div id="Div1" class="Results">
<select id="FirmList" size=10></select>
</div>
<div id="Div2" class="Results">
</div>
<div id="Div3" class="Results">
<select id="PersonList" size =10></select>
</div>
And the css as thus:
div {
border: 1px dashed black;
border-radius: 5px;
padding: 10px;
margin: 8px;
}
select {
width: 290px;
}
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
}
If I comment out the elements the three s align correctly.
Bringing in either causes it's parent to move down the page. None of the other elements on the page (tables, headers and other divs) seem to affect the alignment in the same way.
Any suggestions?
Add vertical-align:top to the .Results rule
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
vertical-align:top;
}
Demo at http://jsfiddle.net/QBVz9/1/embedded/result/
It has nothing to do with the select elements. even if you put a single letter in the .Results elements it will cause the problem.
It has to do with the fact that you have turned the div elements to display:inline-block.
.float-left {
float:left;
}
Fiddle example
A solution could be to add float on select element.
I have a textarea, like this
<textarea rows="10" cols="50"></textarea>
In default the cursor will start from the top left of the textarea, But i want it to be started from vertical and horizontal center of textarea like text aligned to middle in a table-cell.
I have achieved horizontal center by applying text-align:center, But how to make it vertically center?
Something like this:
It should be like this if more text is entered.
I tried this CSS:
textarea {
vertical-align:middle;
text-align:center;
display:table-cell;
}
I cannot think of a way to do this with just <textarea> but I have a demo that almost works using a contenteditable <div>. From that article:
Browser support for contenteditable is surprisingly good
The only problem I see is when the text fills the vertical space the <div> expands. I cannot think of any way to stop this in CSS (and I tried many different properties!). It should be possible to intercept this in JavaScript and stop the <div> expanding.
HTML
<div contenteditable="true"></div>
CSS
div {
height:150px;
width:350px;
border:1px solid black;
vertical-align:middle;
text-align:center;
display:table-cell;
}
you have to following code for css.
<style>
textarea {
text-align:center;
padding:50px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display:inline-block;
}
</style>
Ok, I fiddled around a bit, and came up with a solution immitating what you need, it is a div with a textarea inside:
HTML
<div id="expandedText">
<textarea></textarea>
</div>
CSS
div#expandedText {
width: 250px;
height: 50px;
background-color: #fff;
padding: 50px 10px 40px 10px;
border: 1px solid #aaa;
margin: 10px auto;
text-align: center;
}
div#expandedText > textarea {
width: 250px;
height: 50px;
overflow: hidden;
text-align: center;
resize: none;
outline: 0;
border: 0;
}
Very simple question... I'm hacking it right now with floated percentages (but I know that there has to be a better solution) please see my photo as an example to go by. I want to have the parent stay 100% in width and the search box be an automatic width that always stays next to the search button, and I want the search button to be able to grow as wide as it wants to (depending on the text inside of it/padding).
UPDATE (The Flexbox Way!)
The proper way to achieve this now is with Flexbox!
CSS "Flexbox" Way (https://jsfiddle.net/1jxkyLdv/)
/* CSS
**************************************************************************/
/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 1rem; }
h2 { margin: 2rem 0 0; }
/* Flexbox Example */
.flexbox { display: flex; }
.flexbox .stretch { flex: 1; }
.flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
.flexbox div input { padding: .5em 1em; width: 100%; }
.flexbox div button { padding: .5em 1em; white-space: nowrap; }
<!-- HTML ------------------------------------------------------------------->
<h1>Flexbox Way!</h1>
<h2>Short Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Search</button>
</div>
</section>
<h2>Long Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Super Long Word For Search Button With Flexbox!</button>
</div>
</section>
THE OLD WAY
I despise using tables or using css to make divs act like tables), But here's the other way.
CSS "Table-Cell" Way (http://jsfiddle.net/eUhTM/3/)
* { box-sizing: border-box; }
section { width: 100%; display: table; padding: 1em 0 0; }
div { display: table-cell; width: 100%; }
input { width: 100%; padding: .5em 1em; }
button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }
<h1>Short Word</h1>
<section>
<div>
<input type="text" placeholder="Search..." />
</div>
<div>
<button>Search</button>
</div>
</section>
SOLUTION
The main trick is to make the section a "display: table;" and the divs inside "display: table-cell;", you're input "width: 100%" and you're button "white-space: nowrap".
I'm still interested in solutions though!
Thank you everyone for your great answers.
Correct answer from MrRioku in the comments
http://jsfiddle.net/eUhTM/3/
My original answer
http://jsfiddle.net/eUhTM/
This will probably be downvoted to oblivion for obvious reasons but what about doing this:
<table style="width:100%;">
<tr>
<td style="width:100%;">
<input type="text" placeholder="Search" style="width:100%;">
</td>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>
I used inline CSS for simplified viewing :)
This is indeed a bit tricky, especially if you do not know the width of the button in advance. You could off course go for a js solution, which should be fairly straightforward, but I prefer sticking to css as much as possible.
I did come up with a solution that works in your layout:
<div class='searchBox'>
<input type='text' placeholder='search...'/>
<button>Search</button>
</div>
.searchBox {
position: relative;
padding: 10px;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid #999;
background: #fff;
padding: 10px;
}
button {
height: 40px;
background-color: #555;
padding: 0 10px;
border: none;
color: #fff;
position: absolute;
top: 10px;
right: 9px;
}
button:before {
content: '';
position: absolute;
display: block;
height: 40px;
top: 0px;
left: -10px;
width: 10px;
background: #fff;
border-left: 1px solid #999;
}
and a fiddle: http://jsfiddle.net/VhZS5/
Not the cleanest solution ever, but it should be cross (modern) browser (the border-box may require some prefixing), is semantically correct, and it doesn't use tables.
Note that I positioned the button absolute on top of the input field. Then I used a :before on the button to cover up the input box slightly and give the impression of some spacing between the input and the button.
Let me know if you want me to explain further.