I am facing a weird issue while using display: inline-block on 2 elements.
Maybe I am missing something but why there is some space on top of the button ?
Code here:
.contact-validation {
text-align: right;
}
.contact-captcha {
width: 320px;
height: 90px;
background-color: #879;
display: inline-block;
}
.contact-submit {
display: inline-block;
}
.contact-button {
margin-top: 0;
height: 90px;
width: 300px;
font-size: 35px;
background-color: #000;
color: #fff;
border: 0;
}
<div class="contact-validation">
<div class="contact-captcha"></div>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
</div>
Issue here: http://jsbin.com/jowosejahe/edit?html,css,output
Just apply the Vertical-align :
.contact-validation {
text-align: right;
}
.contact-captcha {
width: 35%;
height: 90px;
background-color:#879;
display: inline-block;
}
.contact-submit {
display: inline-block;
vertical-align: top;
}
.contact-button {
margin-top: 0;
height: 90px;
width: 300px;
font-size: 35px;
background-color: #000;
color: #fff;
border:0;
}
<div class="contact-validation">
<div class="contact-captcha"></div>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
</div>
i have change same css and remove you can replace two class
.contact-validation {
text-align: right;
display: inline-block;
float: right;
}
.contact-captcha {
width: 320px;
height: 90px;
background-color: #879;
/* display: inline-block; */
}
I tried your code in my computer and I can see like there is something strange on the space between the two divs:
<div class="contact-captcha"></div>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
If you erase the newline between the divs:
<div class="contact-captcha"></div><div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
The space between them disappears. I think is because of the properties of the inline-block, that takes each character into his code as something to be written. Also if you end your first div like this:
<div class="contact-captcha"/>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
It works different too. Maybe you want this to happen instead. Hope it helped a bit.
Change these two elements to contain float:right.
.contact-captcha {
width: 320px;
height: 90px;
background-color:#879;
display: inline-block;
float:right;
}
.contact-submit {
display: inline-block;
float:right;
}
Related
I have problem where I can't move objects in div (buttons in this case) to one side.
I have this HTML:
<div class='post-div'>
<h1>There will be title</h1>
<div class='post-content-and-actions'>
<div class='peace-of-content'>
<p>Here will be a little bit of content and Lorem ipsum</p>
</div>
<div class='actions'>
<button class='edit'>EDIT</button>
<button class='edit delete'>DELETE</button>
</div>
</div>
</div>
And css:
.post-div {
width: 1000px;
height: 150px;
padding: 8px;
.post-content-and-actions {
width: 100%;
display: flex;
.peace-of-content {
width: 700px;
}
.actions {
width: 300px;
.edit {
width: 100px;
height: 30px;
font-size: 15px;
background-color: green;
&.delete {
background-color: red;
}
}
}
}
}
In actions section I want to move all buttons to the right and whatever I do, I just can't. float: right, right: 0 etc. Actually, I have no idea why!
You could add text-align: right; to .actions :
...
.actions {
width: 300px;
text-align: right;
...
Flexbox will easily achieve this..
.actions {
display: flex;
justify-content: flex-end;
width: 300px;
.edit {
width: 100px;
height: 30px;
font-size: 15px;
}
I am new to html and css. My question is how do I place image and two buttons to be sure that they will be displayed together? Look at the image to understand what i mean. Thanks!!!!
Height alignment
This is my solution. Try opening the snippet in full screen, and then resize the browser.
When the width of the screen is greater than 768px(u can change this value) the width of the container is 500px.
And when the width is less, then the container takes full width of the screen.
This is handled by
.container {
width: 500px;
margin: 0 auto;
}
#media(max-width:768px) {
.container {
width: 100%;
}
}
As for the buttons, their combined width will be always equal to that of the image.
This is handled by
.btn-container {
font-size: 0;/*used for removing whitespace from inline elements*/
}
.btn-container button {
width: 50%;
font-size: initial;
padding: 15px;
}
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: 0 auto;
}
#media(max-width:768px) { /* can be any number less than this depending on ur choice */
.container {
width: 100%;
}
}
img {
display: block;
width: 100%;
height: 200px;
}
.btn-container {
font-size: 0;
}
.btn-container button {
width: 50%;
font-size: initial;
padding: 15px;
}
/*Space between */
.btn-holder {
width: 50%;
display: inline-block;
}
.btn-holder button {
width: 100%;
}
.b1 {
padding-right: 5px;
}
.b2 {
padding-left: 5px;
}
<div class="container">
<img src="http:placehold.it/250x250">
<div class="btn-container">
<button>button 1 </button>
<button>button 1 </button>
</div>
</div>
<br/>
<br/>
<br/>
<h3>If u want space between buttons</h3>
<div class="container">
<img src="http:placehold.it/250x250">
<div class="btn-container">
<div class="btn-holder b1">
<button>button 1 </button>
</div>
<div class="btn-holder b2">
<button>button 1 </button>
</div>
</div>
</div>
for the image centering you can just use:
<div id="container">
<img style="margin-left:auto;margin-right:auto;"></img>
</div>
Then for the buttons you can use:
<div id="wrapper">
<button id="button1">button left</button>
<button id="button2">button right</button>
</div>
and then this css:
#button1 {
display: inline-block;
width:120px;
height:120px;
}
#button2 {
display: inline-block;
width:160px;
height:160px;
}
Which you then combine into this:
#button1 {
display: inline-block;
width:120px;
height:120px;
}
#button2 {
display: inline-block;
width:160px;
height:160px;
}
<div id="container">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F8%2F8f%2FExample_image.svg%2F1024px-Example_image.svg.png&f=1" style="margin-left:auto;margin-right:auto;"></img>
<br>
<button id="button1">button left</button>
<button id="button2">button right</button>
</div>
in case you're confused as to what the <br> tag does it is just a line break in order to make sure that the buttons don't get placed next to the image.
I have a navbar with a container in it. This container will hold many divs later on. It should act like a tree view. I want the navbar to fill the whole left side from top to bottom. But when the content grows bigger, it should stop growing, a scrollbar should appear.
Using height: 100% does not work because currently my navbar is empty so the bar is a small one.
Here I attached two pictures, showing what I need. I want the bar "navContent" filling untill it reaches the bottom bar.
Here you can see a working fiddle with a full overview, I want the yellow bar to grow till it reaches the bottom.
* {
margin: 0;
}
.bar {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#navBar {
height: 100%;
}
#btnBar {
height: 40px;
}
#navContent {
background-color: yellow;
}
#wrapper {
margin: 0;
}
#navBar {
float: left;
width: 30%;
overflow: hidden;
}
#mainContainer {
float: left;
width: 70%;
overflow: hidden;
}
#header {
height: 50px;
background-color: red;
}
#headerContent {
height: 100%;
width: 80%;
}
#headerTitle {
margin: auto;
}
.headerBtn {
margin: 0px 10px 0px 10px;
}
#footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: red;
}
#footerContent {
height: 100%;
}
.footerBtn {
margin: 0px 20px 0px 20px;
}
#mainContainer {
height: 100%;
background-color: inherit;
}
<div id="header">
<div id="headerContent" class="bar">
<p id="headerTitle">Title</p>
<button class="btn headerBtn">Profile</button>
<button class="btn headerBtn">Logout</button>
</div>
</div>
<div id="wrapper">
<div id="navBar">
<div id="btnBar" class="bar">
<button class="btn navBtn">New Folder</button>
<button class="btn navBtn">New File</button>
<button class="btn navBtn">Delete</button>
</div>
<div id="navContent">
navContent
</div>
</div>
<div id="mainContainer">
Content
</div>
</div>
<div id="footer">
<div id="footerContent" class="bar">
<button class="btn footerBtn">Help</button>
<button class="btn footerBtn">Conditions</button>
<button class="btn footerBtn">Terms</button>
<button class="btn footerBtn">Imprint</button>
</div>
</div>
I think you may be looking for:
overflow-y: scroll;
Here, you can review what i did here: https://codepen.io/anon/pen/JJRrjG. I used the overflow property: https://developer.mozilla.org/en/docs/Web/CSS/overflow?v=example and percentages for the heights. The code is below:
https://codepen.io/anon/pen/JJRrjG
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #fff;
font-family: sans-serif;
}
.top {
height: 10%;
background: #111;
}
.navbar {
height: 10%;
background: #444;
width: 50%;
box-sizing: border-box;
padding: 0.5%;
text-align: center;
}
.navbar span {
margin: 10px;
}
.navbar-content {
height: 80%;
width: 50%;
background: #d9d9d9;
overflow-y: auto;
}
.everything {
height: 100%;
}
.filler-space {
height: 10000px;
background: blue;
width: 70%;
margin: 10px auto;
color: #fff;
}
<div class="everything">
<div class="top"></div>
<div class="navbar">
<span>New folder</span>
<span>New file</span>
<span>Delete</span>
</div>
<div class="navbar-content">
<div class="filler-space">I take up a lot of space</div>
</div>
<div>
You can just set either a fixed height or a max-height. In both cases a scrollbar will automatically appear if the elements grows beyond the defined height.
If you want the scrollbar always visible (even if the content isn't that high) you can add overflow-y: scroll
Try it using the property overflow: auto on your class too.
This property is used when the content overflows an element's box.
It's very useful when your content is too big to fit in a specified area.
I try to achieve the effect that on my blue screen two controls are centered on the bottom, next to each other... I tried to center them using:
.volumeControl{
float: right;
background: red;
}
.muteButton{
background: green;
float: right;
}
and it almost worked, but first of all - the elements are not in the center of the screen, and second of all - somehow the mute button is on the left side (and I would like to put it on the right side of the volume bar)..
Here is my fiddle: http://jsfiddle.net/en0r1Lgu/
Thanks!
When centering it's adviseable not to use floats. display:inline-block with text-align:center on the parent works much better.
#video-controls {
position: absolute;
bottom: 10px;
left: 0px;
width: 223px;
overflow: hidden;
text-align: center;
float: none;
display: inline-block;
text-align: center;
}
.volumeControl {
background: red;
display: inline-block;
vertical-align: middle;
}
.muteButton {
background: green;
display: inline-block;
vertical-align: middle;
}
#volume-bar {
width: 120px;
}
.player {
position: absolute;
width: 226px; /* sizes changed for demo reasons only */
height: 126px;
margin: 0 auto;
overflow: hidden;
background: blue;
text-align: center;
}
<div class="player">
<div id="video-controls">
<div class="volumeControl">
<input type="range" id="volume-bar" class="volumeRange" min="0" max="1" step="0.1" value="1" />
</div>
<div class="muteButton">
<button type="button" id="mute">Mute</button>
</div>
</div>
</div>
use margin:auto instead of floating things
#video-controls{
position: absolute;
bottom: 10px;
left: 0px;
width: 223px;
overflow:hidden;
text-align: center;
float: none;
display: inline-block;
text-align: center;
}
.volumeControl{
margin: auto; /* added */
background: red;
display:inline-block;
}
.muteButton{
background: green;
margin: auto; /* added */
display:inline-block;
margin-top: -5px;
}
#volume-bar {
width: 120px;
}
.player{
position: absolute;
top: 43px;
left: 29px;
width: 226px;
height: 426px;
margin: 0 auto;
overflow:hidden;
background:blue;
}
<div class="player">
<div id="video-controls">
<div class="muteButton">
<button type="button" id="mute">Mute</button>
</div>
<div class="volumeControl">
<input type="range" id="volume-bar" class="volumeRange" min="0" max="1" step="0.1" value="1" />
</div>
</div>
</div>
you may use dispplay:inline-block insteed of float then remove the habitual undesirable space between inline-block elements with a small negative margin and don't forget to use vertical-alignproperty to set the elements the right way:
.volumeControl{
display:inline-block;
background: red;
vertical-align:middle;
}
.muteButton{
background: green;
display:inline-block;
vertical-align:center;
margin-left:-2px;
}
JSFIDDLE
You don't need to use so much code. This can be easily accomplished with CSS Flexbox.
HTML
<div id="container">
<div class="player">
<div id="video-controls">
<div class="volumeControl">
<input type="range" id="volume-bar" class="volumeRange"
min="0" max="1" step="0.1" value="1" />
</div>
<div class="muteButton">
<button type="button" id="mute">Mute</button>
</div>
</div><!-- end #video-controls -->
</div><!-- end .player -->
</div><!-- end #container -->
CSS
#container {
display: flex;
justify-content: center;
align-items: center;
}
.player {
display: flex;
justify-content: center;
align-items: flex-end;
width: 226px;
height: 426px;
background-color: blue;
}
#video-controls {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.volumeControl { background: red; }
.muteButton { background: green; }
#volume-bar { width: 120px; }
UPDATED FIDDLE DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9.
I'm trying to create three buttons on either side of my main logo. These buttons should appear vertically center however when applying different display properties and/or margins and padding of 24px~ nothing changes. The attached JSFiddle shows the issue I have.
http://jsfiddle.net/LRaJy/
.header {
width: 100%;
background-color: #64767f;
background-position: bottom;
padding: 10px 0;
}
.header .logo {
background-image: url('../img/header-logo.png');
display:inline-block;
width: 415px;
height: 100px;
background: #fff;
}
.header-container {
width: 733px;
height: 100px;
margin: 0 auto;
}
.hover-buttons {
height: 44px;
display: inline-block;
padding-top: -5px;
}
.hover-buttons .button {
width: 44px;
height: 44px;
display: inline-block;
margin-right: 5px;
background: #fff;
}
with the HTML
<div class="header">
<div class="header-container">
<div class="hover-buttons">
<div class="button backups"></div>
<div class="button currency"></div>
<div class="button contact"></div>
</div>
<div class="logo">
</div>
<div class="hover-buttons">
<div class="button satisfaction"></div>
<div class="button security"></div>
<div class="button care"></div>
</div>
</div>
</div>
Is this what you're looking for?
jsFiddle Demo
.button, .logo {
vertical-align: middle;
}