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
Related
I was creating a search tool for my website, and i wanted it to be in center, So i created main div container that would hold every search tool element, which had margin: 0 auto and it worked. But inside it another element which had margin: 0 auto; would not be centered.
HTML:
<div class="searchbox">
<div class="mover">
<input type="text" name="searchfield" class="search" placeholder="Search Item">
CSS:
.searchbox {
position: absolute;
width: 100%;
overflow: hidden;
left: 0%;
top: 55px;
height: 350px;
background-color: black;
}
.mover {
display: block;
z-index: 2;
background-color: white;
margin: 0 auto;
width: 70%;
height: 100%;
min-width: 600px;
height: 250px;
}
.search {
position: relative;
width: 70%;
height: 35px;
top: 100px;
margin: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
.search[type=text] {
color: black;
text-align: center;
font-family: 'Lato';
font-size: 15px;
}
Please note that i do not want width: 100% for search element, as you see in code, i have min-width: 600px defined, which is for other elements in mover which is not relevant in this case.
Please check out, Fiddle
What could the problem be? I have defined width on both elements, but margin auto still doesn't work, is there any way to fix this?
The <input> is an inline-level element, the margin: auto tricks only works for block level elements.
You can do:
.search {
...
width: 70%;
margin: 0 auto;
display: block; /*add this line*/
}
Or, if you prefer leave it as inline you can do:
.mover {
text-align: center;
}
I'm having troubles animating change in height from bottom to top. Currently, the entire legend itself gets pushed down as the height of each color changes: http://jsfiddle.net/b7q9781o/
How can I make it so the legend stays at its position and the height changes from its base (bottom) to top?
If I add float: left; to #holder, it kind of works the way I want to but it gets flipped. Try it.
#holder {
border: 1px solid red;
margin: 10em;
display: block;
height: 150px;
position: relative;
}
.legend {
height: 5px;
width: 14px;
display: inline-block;
bottom: 0;
position: relative;
}
please try this one:
#holder {
border: 1px solid red;
margin: 10em;
display: block;
height: 150px;
position: fixed;
float: left;
}
DEMO
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;
}
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
I have a container with a defined height containing two divs, the first which has a pixel-defined height and the second which I would like to fill the remaining space of its container, i.e. 100% minus first div's pixel-defined height.
Is there a solution to this problem which doesn't involve JavaScript? I can use a JavaScript solution (and in fact JavaScript changing the container's height is what brought me here), but this seems like it should have lower-level support, and this looks like it might become quite a cascading problem.
Example
http://jsfiddle.net/h3gsz/1/
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
An answer was already provided for the original fiddle, but in simplifying the question I allowed the answer to introduce new problems: http://jsfiddle.net/h3gsz/6/
I had removed the inline-block styling and a max-width value. Given the absolute positioning of the remaining content, the container's width is no longer defined by said content (from inline-block), so a horizontal scrollbar is introduced where there shouldn't be one.
I'm not sure if I should simply make a new question or not.
#container {
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
top: 50px;
bottom: 0;
position: absolute;
}
http://jsfiddle.net/h3gsz/4/
How about using overflow:hidden;?
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow:hidden;
}
JSFiddle.
Why not just use auto?
http://jsfiddle.net/h3gsz/3/
CSS:
#container {
width: 400px;
height: auto;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: auto;
}
you could also do it by using display:table; fiddle here
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
Someone more experienced might have a better option but you can try this :
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow: hidden ;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
margin-bottom: 0;
}
Depending on what you want to use this for you could remove the #remaining_content <div>
HTML:
<div id="container">
<div id="top_content"></div>
</div>
CSS:
#container {
background-color: green;
width: 400px;
height: relative;
min-height:400px;
border: 5px solid black;
overflow:none;
word-wrap:break-word;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}