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;
}
Related
I have an HTML structure like:
.container {
width: 100%;
height: 300px;
background-color: blue;
}
.dots-container-wrapper {
width: 100%;
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
.dots-container>ul {
padding: 0;
display: flex !important;
transition: all 0.25s;
position: relative;
margin: 0;
list-style: none;
transform: translateX(0);
align-items: center;
bottom: unset;
height: 100%;
}
.dots-container>ul li {
width: 6px;
height: 6px;
margin: 0 2.5px;
background-color: #fff;
border: none;
border-radius: 50%;
display: inline-block;
opacity: .7;
}
<div class="container">
<div class="dots-container-wrapper">
<div class="dots-container">
<ul class="dots">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
The problem is that the div "dots-container" has a property max-width: 55px. But in case the width is less than 55px, I would like to use the real width, however, the div is always 55px. This is a problem because I´m using this in a carousel with dots functionality. When there are 5 pictures, you can see 5 dots aligned in the center, but in case there are fewer pictures, let´s say 2, the div is still 55px and the dots don´t seem to be aligned in the center. See example screenshots.
Your .dots-container is displayed as a block. By default a block will always try to fill up the entire width. By making the container .dots-container-wrapper display flex, it's children will only take up as much space as they need (while also centering them if needed).
.dots-container-wrapper {
width: 100%;
display: flex; // change to flex
}
.dots-container {
max-width: 55px;
overflow: hidden;
min-width: 1px;
display: block;
padding: 0;
margin: 0 auto;
height: 0.875rem;
position: relative;
}
I have a div where I inputted a picture and I "Position: absolute" another div that when clicked will bring you down to the bottom of the page. But when you zoom out, it stays in place but, when you zoom out it moves down and out of the picture div. I am asking, how do i keep my content centered and in position when zooming in and out of your browser. I searched all over stack and other websites but can't find a solution.
HTML
#pic-div {
width: 100%;
height: 700px;
margin: 0 auto;
overflow: hidden;
}
#pic-button {
width: 100px;
height: 100px;
margin: 0 auto;
}
#down-button {
max-width: 200px;
max-height: 200px;
background-color: black;
border-style: none;
color: white;
font-family: 'Coiny', cursive;
position: absolute;
cursor: pointer;
margin: 0 auto;
margin-top: 500px;
}
#down-button:hover {
background-color: grey;
}
<div id="pic-div">
<div id="welcome-pic"> <img id="pic-welcome" src="luxpics/logobar.jpg">
<div id="pic-button">
<button id="down-button">LET'S START</button>
</div>
</div>
</div
Try this
#down-button {
max-width: 200px;
max-height: 200px;
background-color: black;
border-style: none;
color: white;
font-family: 'Coiny', cursive;
position: absolute;
cursor: pointer;
margin: 0 auto;
bottom: 25px;
//margin-top: 500px;
}
Can you try using position: fixed instead of using absolute?
I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:
The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.
Here is the html for this section of the page:
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
The css:
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:
This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.
There are two fixes:
Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
/*Just make font size as 0*/
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.
#james donnelly has already given you an accurate and concise explanation to the cause.
So I have this code here: http://jsfiddle.net/nUwgX/ which has a little arrow at the bottom. What I'd like to happen is when the window get's resized is to keep the arrow about 15% from the bottom of the screen but I'm not sure how I'd do that. Any help would be appreciated.
HTML:
<div class = "container">
<div class = "top-wrapper">
<a id = "name" href = "#">Bigfoot Games</a>
</div>
<div class = "bottom-wrapper">
<p>Content</p>
</div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
padding: 0;
text-align: center;
}
.top-wrapper {
position: relative;
background: #0f0f0f;
height: auto;
height: 100%;
max-height: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
display: table;
}
.top-wrapper:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(15, 15, 15, 0);
border-top-color: #0f0f0f;
border-width: 30px;
margin-left: -30px;
}
#name {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 20px;
color: white;
font-size: 80px;
text-decoration: none;
margin: auto 0;
}
.bottom-wrapper {
background: white;
margin: 0 auto;
padding: 20px;
}
Edit: Okay, so saying that I wanted the arrow about 15% above is not what I meant! Ha! What I mean is, I want the .top-wrapper to be 100% so that it covers the whole window, and you scroll down to see the .bottom-wrapper - however when the screen is resized (other than my 1920 x 1080 resolution) the arrow get's hidden just out of sight, what I'd like is the arrow to be visible regardless of resolution and have the look (in terms of padding/distance) as a 1920 x 1080 resolution.
Change the css of .top-wrapper to only take up 85%, that leaves 15% for the "arrow" on the bottom to take up.
.top-wrapper {
...
height: 85%;
...
}
see the jsfiddle:
http://jsfiddle.net/nUwgX/1/
Change your .top-wrapper height to 85%
I changed just that in the jsfiddle and it maintains when the screen is resized. If that isn't what you are looking for, please elaborate on the question.
Good Luck!
If you want to keep your bottom-wrapper at the bottom fixed position ...
Replace your .bottom-wrapper class with below
.bottom-wrapper {
position:fixed;
bottom: 0px;
height: 15%;
width: 100%;
background-color: white;
margin: 0 auto;
}
.bottom-wrapper p{
padding-top: 20px;
}
Then change .top-wrapper:after to .bottom-wrapper:before
<div id="progressbarr"> still did not wrap well within its ancestor div when I use margin-top :50%, and expecting it will be placed at the middle horizontally.
HTML
box
css
#col3wrap{
height: 50px;
background: #DDD;
}
.profilepic {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 0 10px 0 0;
}
#progressbarr {
float: left;
width: 300px;
height: 20px;
background: #eee;
margin: 50% 0 0 0;
}
#progressbarr > div {
background-color: green;
width: 40%;
height: 20px;
}
http://jsfiddle.net/Xdwhk/
Your margin value is calculated using the parent elements width. Why? Good question. I don't know but here is some discussion on the topic:
Why are margin/padding percentages in CSS always calculated against width?
Here is your demo with the #col3wrap with a width set:
http://jsfiddle.net/Xdwhk/1/
Try adjusting the width to see how the margin-top value changes with it.
So you're going to have to find a different method, other than using margin-top, to vertically centre your progress bar.
Here is one way, using position: relative and calc to set the top value:
CSS
#col3wrap{
height: 50px;
background: #DDD;
position: relative;
}
.profilepic {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 0 10px 0 0;
}
#progressbarr {
float: left;
width: 300px;
height: 20px;
background: #eee;
position: relative;
top: 30%;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
}
#progressbarr > div {
background-color: green;
width: 40%;
height: 20px;
}
Demo
Note calc is not supported by all browsers so we must have a fall back.