This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 7 years ago.
I'm trying to get everything centered horizontally but no go.I feel like it's because of the floats but if I remove them then the left_wrap and right_wrap don't sit beside each other.
https://jsfiddle.net/ydt17yvz/
.main_wrap {width:100%;}
.main_wrap_2 { position:relative;margin:0 auto;}
.left_wrap {background-color:#fff; width: 50%;
max-width: 930px; position:relative;float:left;}
.right_wrap {background-color:#fff; width: 50%;
max-width: 930px; margin-top:80vh;position:relative;float:left;}
You should use inline block, putting comment in the center of your 2 block (since else it'll count as a in your html document and will break the 50% 2 column layout)
Fiddle:
https://jsfiddle.net/dLgej4tx/3/
.main_wrap {
width: 100%;
}
.main_wrap_2 {
position: relative;
margin: 0 auto;
}
.left_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
position: relative;
vertical-align: top;
}
.right_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
margin-top: 80vh;
position: relative;
text-align: center;
vertical-align: top;
}
.carousel_wrap {
width: 92%;
margin-top: 80vh;
}
.content_wrap {
margin-top: 0px;
padding: 0;
position: relative;
clear: both;
}
.content {
margin: 0;
padding: 0;
font-family: 'Helvetica LT Std';
font-size: 12px;
line-height: 1.5;
width: 280px;
}
You will see, it'll make all your interaction easier and it will work as expected
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
Run the snippet below, and you will see that these two balck boxes occupy more space than they need (vertically). Why is that so? I have tried settting margin / padding to 0, but it did not work.
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
use font-size: 0;
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
font-size: 0;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
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 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
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I'm running into this issue where there's a gap between two div tags. Here's my code -- I've tried to manually overwrite the margin/padding associated with the two divs and doesn't seem like it helps.
Here's what the CSS look like
.left_block{
display: inline-block;
background-color: blue;
width:40%;
height: 2em;
margin: 0px;
margin-right: 0px;
padding-right: 0px;
border-width: 0px;
overflow: hidden;
}
.right_block{
margin: 0px;
display: inline-block;
background-color: red;
width: 59%;
height: 2em;
margin-left: 0px;
padding-left: 0px;
border-width: 0px;
overflow: hidden;
}
Here's the HTML part
<div class="playground">
<div class = 'left_block'></div>
<div class = 'right_block'></div>
...
What am I missing?
What about using float property? Will it be a problem with your css?
.left_block {
display: inline-block;
background-color: blue;
width: 40%;
height: 2em;
margin: 0 auto;
padding: 0;
float: left;
}
.right_block {
display: inline-block;
background-color: red;
width: 60%;
height: 2em;
margin: 0 auto;
padding: 0;
overflow: hidden;
float: left;
}
<div class="playground">
<div class='left_block'></div>
<div class='right_block'></div>
</div>
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 7 years ago.
I have this code:
<div class='block'>
<div class='container'></div>
</div>
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
width: 30px;
height: 30px;
background: red;
margin: 50px;
}
I can not understand why margin does not work inside the block?
JsFiddle: https://jsfiddle.net/39yy7a0q/
Try below css. I have added position to .container, and adjusted margin value as it should relevant to parents width. https://jsfiddle.net/39yy7a0q/4/
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
position:absolute;
width: 30px;
height: 30px;
background: red;
margin: 35px;
}