I have a question about divs. I have multiple-divs in an parrent div, when I add content to the inner divs divs. The inner divs are pushed down?
I want to know why? Because all my mine margins and padding are add default 0;
Thank you for your time.
https://jsfiddle.net/3w50gj28/
<div class="boxes">
<div class="box">
<h3>MyBMW Login</h3>
<form class="" action="index.html" method="post">
<input type="text" name="email" placeholder="Emailadres">
<input type="password" name="password" placeholder="Wachtwoord">
</form>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.boxes {
margin-top: 25px;
width: 100%;
position: relative;
text-align: center;
}
.box {
display: inline-block;
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;;
}
div are Block-level Element and a block-level element always starts on a new line and takes up the full width available
Margin and padding in this case aren't what is causing it. If you have divs stacked on each other, as you add content to one it will grow and push the div below down.
Related
On this page I have a logo (image file, with a set height to fit better) which centers itself fine in its own div. This logo is wrapped in a wrapper div with text-align: center and centers fine. There are also 2 text input boxes with a search button wrapped in a separate div from the logo's, and they're also wrapped in the wrapper div, but when I load the page that div appears on the left side of the page.
If I comment out the searchArea div so the button and boxes are surrounded only by the wrapper, everything centers fine but gets stretched out because of the width property.
How do I get everything inside the searchArea div to center under the logo without losing the set styles for the searchArea class???
HTML:
<div id="logo" class="centerWrapper">
<img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>
<div id="search" class="centerWrapper">
<div id="searchArea" class="searchArea">
<input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
<input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
<button type="button" class="searchButton">Search</button>
</div>
</div>
CSS:
.centerWrapper {
text-align: center;
}
.logo {
height: 46px;
}
.searchArea{
margin-top: 0.8%;
height: 125px;
width: 340px;
}
input.inputBox {
background-color: #0B122F;
border-color: #877055;
color: #4A4E5A;
margin: 5px 0px;
padding: 5px 10px 5px 10px;
width: 72%;
}
In order to horizontally center block-level elements like <div>, you're looking to the apply the margin-left and marign-right properties, both with auto values.
Normally you can use the shorthand margin: 0 auto, but considering you have a margin-top of 0.8%, you need to specify both manually for your .searchArea selector.
This can be seen in the following:
.centerWrapper {
text-align: center;
}
.logo {
height: 46px;
}
.searchArea {
margin-top: 0.8%;
height: 125px;
width: 340px;
margin-left: auto;
margin-right: auto;
}
input.inputBox {
background-color: #0B122F;
border-color: #877055;
color: #4A4E5A;
margin: 5px 0px;
padding: 5px 10px 5px 10px;
width: 72%;
}
<div id="logo" class="centerWrapper">
<img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>
<div id="search" class="centerWrapper">
<div id="searchArea" class="searchArea">
<input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
<input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
<button type="button" class="searchButton">Search</button>
</div>
</div>
Hope this helps! :)
To horizontally center block elements you have to use margin: 0 auto;
But there is margin-top: 0.8%;
So you can use it together:
.searchArea {
margin: 0.8% auto 0;
}
Good luck!)
I have this CSS:
.div0{padding:5px;height:70px;}
.pos0{float:left;height:50px;padding:5px; background: red;}
.butt{float:middle; position:relative;top:8px;height:40px;}
.pos1 { background: green; position:relative;left:15px;top:4px;min-width:100px; }
.pos2 { position:relative;left:15px;bottom:-8px; } //background: yellow;
and this HTML:
<div class="div0" id="Div0" style="background-color: rgb(255, 255, 221);">
<div class="pos0">
<button name="Pag" class="butt" id="ButtFull0">MY butt here</button>
</div>
<div class="pos1"><span> aLev:</span>
<input size="1" id="S0" type="text"/><span> vMin:</span>
<input size="1" id="n0" type="text"/><span> vMid:</span>
<input size="1" id="inp0" type="text" /><span> vM:</span>
<input size="1" id="inp1" type="text"/><span id="Q0"> text</span>
</div>
<div class="pos2">
<input id="y0" type="checkbox"/><span> 1°:</span>
<input id="y10" type="checkbox"/><span> 2°:</span>
<input id="e0" type="checkbox"/><span> 3°:</span>
<input p id="p0" type="checkbox"/>
</div>
</div>
I want the button vertically centered on the left and two lines with inputs and checkboxes at its right, both vertically even spaced. All maintaining position while shrinking the window.
I tried with this:
http://jsfiddle.net/qacp35fv/33/
Problems:
1) the 2 lines overlap the button (I put a background color green to better see the problem), so you can't easy click on it.
2) when shrinking the result window to the right, the 1° line becomes multiline: I prefer it remains one line without seeing some text and without increasing the total height.
This would be a good base to use. You can add your input elements in the correct divs.
body {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 100%;
font-size: 0px;
display: table;
}
#left-column {
background: red;
display: table-cell;
height: auto;
font-size: 16px;
width: 120px;
vertical-align: top;
}
#right-column {
background: yellow;
display: table-cell;
font-size: 16px;
width: calc(100% - 120px);
vertical-align: top;
}
#row-1, #row-2 {
height: 20px;
overflow-x: hidden;
}
<div id="wrapper">
<div id="left-column">
Left column
</div>
<div id="right-column">
<div id="row-1">
Right column row 1 with extra long text that will be hidden when resized.
</div>
<div id="row-2">
Right column row 1
</div>
</div>
</div>
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton.
At the moment, I've the following structure for a login page.
HTML:
<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->
</div><!-- sixteen columns -->
<div class="sixteen columns">
<p align="center">Click here to register</p>
</div>
</div><!-- container -->
CSS:
#loginBox, #registrationBox {
width: 470px;
height: 450px;
background-color: white;
left: 245px; */
top: 20px; */
position: relative;
margin: 0px auto; }
#registrationBox {
height: 500px; }
.yeditepeLogo {
position: relative;
left: 40px;
top: 33px; }
#loginForm, #registrationForm {
position: relative;
top: 45px; }
.loginTextField, .registrationTextField {
position: relative;
height: 40px;
width: 388px;
left: 40px;
border-color: #dedede;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
text-align: left;
font-size: 18px;
text-indent: 10px;
-webkit-appearance: none; }
.loginTextField:focus, .registrationTextField:focus {
outline-color: #ff9800;
outline-style: solid;
outline-width: 1px;
border-color: white; }
.loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
margin-bottom: 40px; }
.loginButton, .registrationButton {
background-color: #77a942;
position: relative;
border: none;
width: 390px;
height: 60px;
left: 40px;
color: white;
font-size: 24px;
text-align: center;
opacity: 0.8; }
.loginButton:hover, .registrationButton:hover {
opacity: 1; }
As you can see, that #loginBox has a fixed width/height and it should always be on the centre of the page. margin: 0px auto code gives it the horizontal centring. But is it the best practice in Skeleton? Does Skeleton provide a better way?
Also how can I provide it's vertical centring?
There's actually a built in way of centering divs in Skeleton.
<div class="sixteen columns">
<div class="four columns offset-by-six">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
The offset-by-six in this case can be altered from one to fifteen, and offsets the column at hand by as many columns as entered. As a neat feature, the offsetting is not affecting alignment when smaller screens are used.
To clarify: This doesn't center the actual content in the div, but centers the div itself.
I know it has been a while since this question was asked, but maybe somebody else can use the answer.
I was able to accomplish centering with Skeleton by filling one-third column class with a space, then the next one-third column class with content, then another one-third column class with a space again.
<div class="one-third column"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column"> </div>
You can set the container to
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -43 //replace with half of the width of the container
margin-top: -52 //replace with half of the height of the container
}
set the parent container or element to position: relative;
Here's a good article about How to Center Anything With CSS
Asus3000's answer is good as that is what I do and it works well. I would only add that on mobile, it adds quite a bit of unwanted vertical space. To avoid mobile vertical space, I use a class .filler and hide it on mobile.
HTML
<div class="one-third column filler"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column filler"> </div>
CSS
/* or whatever mobile viewport */
#media only screen and (max-width: 960px) {
.filler { display: none}
}
A way I believe works pretty good is:
<div class="container">
<div class="row">
<div class="two-half column">
centered div content
</div>
</div>
</div>
This makes the div centered and responsive. You can change margin-top to make it all the way in the middle, however changing width will (of course) not make it centered anymore.
Correct me if I'm wrong but this works for me! :)
I have this set (JsFiddle link) of labels and text inputs.
How do I center the whole thing in the middle of the page?
I tried wrapping them in a div and setting it's alignment to cetner - didn't do what i expected at all.
Any help is appreciated, than you.
Code for reference:
<div>
<div class="left">
label
</div>
<div class="right">
input element
</div>
</div>
<div>
<div class="left">
another label
</div>
<div class="right">
another input element
</div>
</div>
//align the labels and input nicely
.left {
width: 20%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float:left;
}
If you're going to use float, than you need to wrap the whole thing in a DIV and apply margin: 0 auto;
I'd do this in this case:
<style>
.field {
width: 80%;
margin: 0 auto;
}
.left {
width: 20%;
text-align: right;
display: block;
float: left;
margin-right: 5%;
}
</style>
<div class="field">
<label class="left">label</label>
<input type="text">
</div>
<div class="field">
<label class="left">another label</label>
<input type="text">
</div>
wrap the whole thing in a div and set
margin: auto;
also set a width, if you want to use the text-align: center; method , that should be applied to the parent pf the div to be centered.