This question already has answers here:
CSS side by side div's auto equal widths
(5 answers)
Closed 8 years ago.
I have a container width some buttons in it:
<div class="button-container">
<button type="button" class="edit-quantity">Edit Quantity</button>
<button type="button" class="edit-price">Edit Price</button>
<button type="button" class="remove-item">Remove</button>
<button type="button" class="remove-all">Remove All</button>
</div>
http://jsfiddle.net/gRzAB/
How can I style the buttons and the container in a way that the buttons fill the container width equally, even if there is just 1 or 2 or 3 buttons?
Use display: flex from CSS3: Check my fiddle.
.button-container{
width:100%;
display: flex;
}
.button-container button{
width:100%;
}
You can use display:table; and display:table-cell; if you add a wrapping div around your buttons :
FIDDLE
HTML :
<div class="button-container">
<div>
<button type="button" class="edit-quantity">...</button>
</div>
<div>
<button type="button" class="edit-price">...</button>
</div>
<div>
<button type="button" class="remove-item">...</button>
</div>
<div>
<button type="button" class="remove-all">...</button>
</div>
</div>
CSS :
.button-container {
width:100%;
height:100px;
display:table;
}
.button-container >div {
display:table-cell;
}
.button-container button {
height:100%;
width:100%;
}
Related
Here is my HTML code. I am trying to add a vertical line that seperates the login and sign up buttons, anybody have an idea how to do this?
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
add a div between them and give it proper height width and color
.line{
background-color:black;
height:20px;
width:3px;
}
.header-buttons{
display:flex;
justify-content:center;
align-items:center;
}
.btn{
margin: 10px
}
<header class="header">
<h1>The Textbook Marketplace</h1>
<div class="header-buttons">
<button class="btn login-btn">Log In</button>
<div class="line"></div>
<button class="btn signup-btn">Sign Up</button>
</div>
</header>
Depends of the height you want for the line. But I think the solution would be to put a border (for ex: solid 2px black) on the right border of the left button or vice versa if you put a border for the right button. Or, create a <div> between the two buttons and play with background color or the borders.
This question already has answers here:
How can i Display div Elements in one row
(7 answers)
How to float 3 divs side by side using CSS?
(16 answers)
Closed 2 years ago.
I have 3 buttons that display in a vertical line and I want them to display horizontally
<form method="twitch" action= "https://www.twitch.tv/">
<button type="submit"><img src="img/twitch.png" alt="Twitch"></button>
</form>
<form method="Instagram" action="https://www.instagram.com/">
<button type="submit"><img src="img/instagram.png" alt="Instagram" > </button>
</form>
<form method="linkedin" action="https://www.linkedin.com/">
<button type="submit"><img src="img/linkedin.png" alt="Linkedin" ></button>
</form>
Wrap them in a parent div and, in your CSS, set that div to display: flex.
In css add to each one of them float: left;
You can put each form and button inside individual <div>'s, wrap those <div>'s in a parent <div>, and then use flex: https://jsfiddle.net/HappyHands31/hnkqsjba/2/
.container {
display: flex;
}
.first, .second, .third {
display: flex;
}
<div class="container">
<div class="first">
<form method="twitch" action= "https://www.twitch.tv/">
<button type="submit"><img src="img/twitch.png" alt="Twitch">
</button>
</form>
</div>
<div class="second">
<form method="Instagram" action="https://www.instagram.com/">
<button type="submit"><img src="img/instagram.png" alt="Instagram" ></button>
</form>
</div>
<div class="third">
<form method="linkedin" action="https://www.linkedin.com/">
<button type="submit"><img src="img/linkedin.png" alt="Linkedin" > </button>
</form>
</div>
Use display:inline-block;
most people use flex but its not good becasue some of the old browsers can't understand flex.!
but all of the browsers support inline block
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
I have four 100*100px sized buttons in a div. However they are positioned different depending on their text content.
This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Memo demo</title>
<style>
button {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="buttonHolder">
<button type="button" >X</button>
<button type="button" ></button>
<button type="button" >X</button>
<button type="button" >X</button>
</div>
</body>
</html>
This is how it is rendered in Chrome:
This is how it is rendered on Firefox:
What should I do to make them appear aligned?
By default buttons are aligned along their last line of text (the "baseline", same as inline-block elements). If there is no text, the bottom border is used instead, which happens in your snippet. To change that, you can use vertical-align, either top, bottom or middle , whatever fits best for your particular situation:
button {
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Memo demo</title>
<style>
button {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="buttonHolder">
<button type="button">X</button>
<button type="button"></button>
<button type="button">X</button>
<button type="button">X</button>
</div>
</body>
</html>
You can add for a small blank space.
OR
You can use vertical-align: middle;
button {
height: 100px;
width: 100px;
vertical-align: middle;
}
<div id="buttonHolder">
<button type="button" >X</button>
<button type="button" > </button>
<button type="button" >X</button>
<button type="button" >X</button>
</div>
You should try to had a float property in order to align buttons.
Here is an example with float: left;
button {
height: 100px;
width: 100px;
float: left;
}
<div id="buttonHolder">
<button type="button" >X</button>
<button type="button" ></button>
<button type="button" >X</button>
<button type="button" >X</button>
</div>
You can use display: flex on the #buttonHolder. It works for me in Firefox and Chrome.
#buttonHolder {
display: flex
}
button {
height: 100px;
width: 100px;
}
<div id="buttonHolder">
<button type="button" >X</button>
<button type="button" ></button>
<button type="button" >X</button>
<button type="button" >X</button>
</div>
Consider a <div> element that contains <button> elements:
<div id="box">
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
...
</div>
I want to fit these elements into a grid pattern, so that
buttons are of equal dimensions and have a fixed minimum width,
a maximal amount of buttons is stacked on each row,
button width is adjusted so that each row is filled completely,
and this behavior persists when #box is resized.
Is there a way to do so using native HTML/CSS features (without using JavaScript)? I tried using the new CSS Flexbox layout:
#box {
display: flex;
width: 500px;
height: 500px;
}
.button {
flex: 1 1 auto;
min-width: 40px;
height: 40px;
}
But this doesn't work..
Thanks for your help!
You can easily use CSS grid layout.
I prefer it over flexbox.
<div id='grid'>
<button class='button'>1</button>
<button class='button'>2</button>
<button class='button'>3</button>
<button class='button'>4</button>
<button class='button'>5</button>
<button class='button'>6</button>
<button class='button'>7</button>
<button class='button'>8</button>
<button class='button'>9</button>
<button class='button'>10</button>
<button class='button'>11</button>
<button class='button'>12</button>
<button class='button'>13</button>
<button class='button'>14</button>
<button class='button'>15</button>
<button class='button'>16</button>
</div>
<style>
#grid {
display: grid;
grid: 50px / auto-flow;
}
</style>
Here is the codepen.
https://codepen.io/kenanbalija/pen/bYYarj
You can use CSS flex for this, as you suspected.
flex-wrap is what you were missing, as well as using percentages for responsiveness.
#box {
display: flex;
flex-wrap: wrap;
}
#box > * {
flex: 1 0 100px; /* each button should be at least 100px wide */
}
<div id='box'>
<button class='button'>1</button>
<button class='button'>2</button>
<button class='button'>3</button>
<button class='button'>4</button>
<button class='button'>5</button>
<button class='button'>6</button>
<button class='button'>7</button>
<button class='button'>8</button>
<button class='button'>9</button>
<button class='button'>10</button>
<button class='button'>11</button>
<button class='button'>12</button>
<button class='button'>13</button>
<button class='button'>14</button>
<button class='button'>15</button>
<button class='button'>16</button>
</div>
i am trying to make affect of the visibility of an span on hover
when i hover over the img the sqaure must be visible
<div class="headar_top">
<img id="timg"src="images/user.png"/>
<img id="timg"src="images/sitemap.png"/>
<span id="Square">
<button type="button" class="SquareButt">Log In</button>
<button type="button" class="SquareButt">Sign Up</button>
</span>
</div>
#timg:hover > #Square{
visibility:visible;
}
#Square{
margin-top:50px;
height:80px;
width:100px;
background-color:#f3f603;
float:right;
margin-right:-145px;
visibility:hidden;
}
but still i can not make the changes .
#square is not a child of #timg, thus the direct children selector > can't work as you might expect: move instead the id to the parent link
<img src="images/user.png"/>
<img id="timg"src="images/sitemap.png"/>
<span id="Square">
<button type="button" class="SquareButt">Log In</button>
<button type="button" class="SquareButt">Sign Up</button>
</span>
and change the style like so
#timg:hover ~ #Square { ... }
Note: a button element can't be enclosed into a link
You should be using #timg:hover ~ #Square { ... }
Checkout this.
#timg:hover ~#Square {
display:block;
}
#Square{
margin-top:50px;
height:80px;
width:100px;
background-color:#f3f603;
float:right;
margin-right:145px;
display:none;
}
<img src="images/user.png"/>
<img id="timg"src="images/sitemap.png"/>
<span id="Square">
<button type="button" class="SquareButt">Log In</button>
<button type="button" class="SquareButt">Sign Up</button>
</span>
.container {
position: relative;
float: left;
}
.container span {
display:none;
}
.container:hover span {
display:block;
}
<div class="container">
<img id="timg"src="images/user.png"/>
<span>
<button type="button" class="SquareButt">Log In</button>
<button type="button" class="SquareButt">Sign Up</button>
</span>
</div>
Please use this code, working perfectly.