I'm trying to make my search bar have a fluid input field width, whilst also having a 'search' button next to it.
It seems that the input field .search is way bigger than the containing element called .navigation-right, and it causes the button .search-submit to be pushed out of the containing div. See images below.
The Issue:
What I'm trying to make it look like:
Here is my code: (for convenience I left out the margin & padding values)
CSS
.navigation-right {
width: 282px; min-width: 282px;
height: 50px;
display: table-cell;
vertical-align: top;
border: 1px solid #920000;
}
.search {
width: 100%;
height: 30px;
display: table;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
}
HTML
<div class="navigation-right">
<form class="search">
<input class="search-input">
<button class="search-submit"></button>
</form>
</div>
Replace below class
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
}
Is there a specific need of using display: table; and display: table-cell;? It reminds me of the days when the only way of coding was using tables...
If I may suggest an alternative way of doing the same thing and arguably doing it better :) - the input element will occupy 100% of its parent with the button having a fixed width (good for fluid or responsive layouts).
You have set your search field (.search-input) to have a 100% width, so that will fill its parent. You need to reduce the width to around 250px
.search-input {
height: 28px;
width: 70%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
float:left;
}
.search-input {
height: 28px;
width: 100%;
display: table-cell;
border: 1px solid #920000;
outline: 0px;
position:relative;
float:left;
}
.search-submit {
width: 30px;
height: 30px;
display: table-cell;
vertical-align: top;
margin: 0;
padding: 0;
border: 0;
position:absolute;
float:left;
}
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I hate CSS like the plague.
I have a table header, with several table cells inline. This works perfectly until I start trying to add an image to one of the cells, which causes the height of the div to extend but I have absolutely no idea why.
Example of blank table cells working perfectly.
Example of the demon that has been haunting me all day.
.header {
display: table;
width: 100%;
background: white;
border-bottom: 2px solid #eeeff3;
.burger-menu {
width: 75px;
margin-left: auto;
margin-right: auto;
background: url("https://s23.postimg.org/o8wb4i5u3/1484768142_menu_alt.png");
background-size: 30px 30px;
background-repeat: no-repeat;
height: 30px;
width: 30px;
cursor: pointer;
text-indent: 0px;
}
}
.outer {
display: table;
vertical-align: top;
position: relative;
height: 100%;
width: 100%;
}
.outer-icon {
display: table-cell;
position: relative;
height: 75px;
width: 5%;
overflow: hidden;
border-right: 2px solid #eeeff3;
img {
height: 100%;
}
}
.middle {
display: table-cell;
vertical-align: middle;
}
.search-bar {
display: table-cell;
vertical-align: top;
width: 80%;
input {
height: 75px;
border: 0;
padding: 0;
width: 100%;
border-right: 2px solid #eeeff3;
}
}
.inner {
width: 75px;
margin-left: auto;
margin-right: auto;
}
Can anyone put me out of my misery?
Remove height from .outer-icon. I don't know that it's ever a good idea to apply height to a table cell. Set vertical-align: middle; on .search-bar and .outer-icon.
I don't know if this will solve everything but changing display on add-friend seems to improve things:
.add-friend {
background-image: url(https://placeimg.com/75/75/face);
width: 75px;
height: 75px;
display: inherit; <- this here thingy
}
https://codepen.io/anon/pen/zNNdYw
I don't think you want to set an explicit height on .outer-icon because you are wrapping a lot of elements with it and should let the inner content set the height.
.outer-icon {
height: 75px; // remove this line!!!
}
Then set the hamburger menu to be absolute inside of its relative parent div.
.burger-menu {
position: absolute;
left: 20px;
top: 25px;
}
Cheers
I have the following code, and I can't get the text in the header-loggedout div to display centered within the borders. If I adjust the height, vertical margins, or padding of the div it always ends up moving the bottom border down for some reason. The image and text just won't align properly. How can I keep the text and image in (at least roughly) the same position but vertically align both to the middle between the top/bottom borders?
Here's a fiddle.
.header-lower {
position: relative;
display: table;
z-index: 0;
padding: 10px 0px;
width: 100%;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.header-logo {
display: table-cell;
text-align: left;
margin: 0 0 20px;
vertical-align: inherit !important;
}
.header-logo a {
display: inline-block;
float: left;
max-width: 100%;
line-height: 0;
}
.header-loggedout {
font-size: 26px;
vertical-align: middle;
}
<div class="header-lower">
<div class="header-logo">
<a href="#">
<img title="" alt="alt" src="http://placehold.it/310x39" />
</a>
</div>
<div class="header-loggedout">
Test Text
</div>
</div>
You can set display of .header-loggedout as table-cell:
.header-loggedout {
font-size: 26px;
vertical-align: middle;
display: table-cell;
}
Fiddle Here
replace this class
.header-lower {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
display: table;
padding: 10px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
z-index: 0;
}
You can use absolute positioning
Fiddle here
.header-loggedout {
font-size: 26px;
position:absolute;
top:50%;
right: 20px;
transform: translateY(-50%);
}
Here is my fiddle:
http://jsfiddle.net/schmudde/VeA6B/
I cannot remove the top and bottom padding on either side of a font awesome icon:
span {
border: 1px solid red;
line-height: 40%;
}
i {
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
I have attempted specific line-heights and inheriting line-heights. There is something fundamental here I am clearly not understanding.
Use span { line-height: 100%; } so it would fill the block.
The line-height on the span won't help you much as the icon is added to the pseudo class :before on the <i /> tag. This pseudo class will create a somewhat hidden element, if you can call it that.
So if you want to override the css:
.icon-check:before { font-size: 2rem; }
Removing the padding of the icon can be tricky. Maybe if you set the span to display: inline-block you can use height, width in combination with overflow: hidden.
span {
border: 1px solid #FF0000;
display: inline-block;
height: 38px;
overflow: hidden;
position: relative;
width: 45px;
}
i.icon-check:before {
left: 0;
position: absolute;
top: -4px;
}
DEMO
You set borders in span, and line inheriting line-heights in i, that's the problem.
just add borders to i :
span {
line-height: 40%;
}
i {
border: 1px solid red;
border: 1px solid green;
padding: 0px;
margin: 0px;
display: inline-block;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-color: red;
}
<span><i class="icon-check icon-3x"></i></span>
Fiddle
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>