I have multiple divs with dynamic content and all of them have the same height. Beside the content a Submit Button is inside of each div, which is directly next to the content.
But i want to display the Button at the bottom of the div.
HTML Markup:
<div class="product-teaser-row">
<div class="product-teaser">
<h2>Title</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<button class="btn btn-grey" type="submit" name="action">Ansehen</button>
</div>
<div class="product-teaser">
<h2>Title 2</h2>
<p>Content</p>
<button class="btn btn-grey" type="submit" name="action">Ansehen</button>
</div>
</div>
CSS Code:
div.product-teaser {
border: 1px #c7d2d6 solid;
padding: 0px 10px 10px 10px;
width: 216px;
height: 100%;
display: table-cell;
}
div.product-teaser-row {
display: table;
border-collapse: separate;
border-spacing: 10px;
}
I've already tried different things like vertical-align: bottom on the div and display: inline-block on the Button, but nothing worked for me.
Here is a JSFiddle Demo of my code.
You can try this
CSS
div.product-teaser {
border: 1px #c7d2d6 solid;
padding: 0px 10px 20px 10px; /*Increase the bottom padding so the button does not overlap the content*/
width: 216px;
height: 100%;
display: table-cell;
position: relative; /*Add this css*/
}
/*Set the button at the bottom using position: absolute;*/
.btn-grey {
bottom: 5px;
left: 5px;
position: absolute;
}
To do that you just have to position absolute your button and define the bottom position and give a padding-bottom to your container to be sure that no content will override your button.
here for a jsfiddle exemple.
You could try adding a height property to the p element.
Example:
p{
height: 95px;
}
JSFiddle Demo : http://jsfiddle.net/robcabrera/g3p2Y/1/
why don't you put button in separate <div> tag like:
<div id=my>
<button class="btn btn-grey" type="submit" name="action">
Ansehen
</button>
</div>
set according margin-top to put the button at bottom like:
#my
{
margin-top:100px;
}
FIDDLE here
Related
I'm having problems making two elements align perfectly. They're in the same line, the one to the left is an input element and the one to the right is a div, in a "bar" (also a div). Please see the picture.
How it looks right now
What I want it to look like is for the two elements to have the exact same height, filling from top to bottom of the grey div with classname "wrapper".
I have simplified the code, and the button clearly doesn't work. What you can see in the code here is a small part of a react app, but that's irrelevant because the problem is in the CSS. The button needs to be a div.
The CSS code:
body{background-color: black}
.wrapper
{
background-color: grey;
padding: 0;
margin: 0;
}
input
{
font-size: 30px;
}
.button
{
background-color: green;
padding-left: 10px;
width: 100px;
height: 100%;
display: inline-block;
}
and the HTML code:
<body>
<div class="wrapper">
<input type="text" size="5"/>
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
I've tried setting the "display" of the elements to "inline" and "inline-block" back and forth, and tried to set the height to 100% for these elements which doesn't seem to work.
Thankful for any advice.
Just use flexbox
body {
background-color: black
}
.wrapper {
background-color: grey;
padding: 0;
margin: 0;
display: flex;
}
input {
font-size: 30px;
}
.button {
background-color: green;
padding-left: 10px;
width: 100px;
}
<body>
<div class="wrapper">
<input type="text" size="5" />
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
On the wrapper class add display: flex; and on the input tag add flex: stretch;
I want to know why an anchor tag with top and bottom padding would not expand its parent div to its full height. e.g here in this fiddle
<div class="container">
Sign Up
Login
</div>
https://jsfiddle.net/exleedo/8qr4srLa/
The parent has grey background and the two buttons are inside this div, but still the div doesn't take the same height as the links.
Because of collapsing margins.
You can fix this by adding display:inline-block to your links:
.container {
background: #CCC;
}
.button {
padding: 10px 15px;
border-radius: 5px;
background: #262626;
color: #FFF;
margin-left: 10px;
display: inline-block;
}
<div style="height:100px">
<!-- Spacer -->
</div>
<div class="container">
Sign Up
Login
</div>
I do not recommend any inline style (height for that matter) just do this:
.container {
background: #CCC;
display: flex;
}
display: flex will have the auto inner wrap similar to box-sizing
I have a <div> with a number of sub-elements (which happen to be custom-sized buttons). It can have between 1 and 3 buttons.
Example of HTML with 2 buttons:
<div id="head">
<div id="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
</div>
</div>
When there are 3 buttons, they fill the entire <div>, so it is not an issue. However, when there are 1 or 2 buttons, they need to be centered but I can't seem to accomplish this without introducing ridiculous conditional margins or something.
How can I modify this CSS so that <div> elements with 1 or 2 of these buttons show the buttons centered within the div?
Please refer to the Fiddle: https://jsfiddle.net/bf33wc6w/1/
Edit: With only 2 buttons, I don't want them to be spread out. I want them to be in the center with only ~2px between them similar to their spacing for when there are 3 buttons.
You could set inline block on the items, with container set to text align center.
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
JSFIDDLE DEMO
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
height: 73px;
width: 128px;
margin: 3px 1.5px;
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
.control-button:hover {
background-color: #3FA9DB;
}
#head, #body, #foot {
border: 1px solid red;
position: absolute;
width: 396px;
height: 80px;
left: 0;
}
#head {
top: 0;
}
#body {
bottom: 50%;
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
#foot {
bottom: 0;
}
<div id="head">
<div class="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="body">
<div class="control-buttons-container">
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="foot">
<div class="control-buttons-container">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
Updates:
Fixed same id being used multiple times on a single page, which is in valid HTML - changed it to class.
Improved the position of middle block, make it to always stay in the middle more accurately - by using CSS transform.
Merged some duplicated CSS rules.
Like this:https://jsfiddle.net/bf33wc6w/7/
All I did was change your float to none and the margin to auto for the left and right margin?
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
height: 73px;
width: 128px;
margin: 3px auto;
}
Add these style rules:
#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }
As an aside, you shouldn't use the same id (control-buttons-container) multiple times in one document. You should use a classname instead.
Updated fiddle: https://jsfiddle.net/mr8e7kyt/
Try something like this:
<div id="control-buttons-container">
<div class="col-1">
<button class="control-button">some button text</button>
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="control-buttons-container">
<div class="col-1">
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
</div>
</div>
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
float: left;
height: 73px;
width: 100%;
}
.control-button:hover {
background-color: #3FA9DB;
}
#control-buttons-container {
max-width: 400px;
padding: 1px;
border: 1px solid red;
}
.col-1, .col-2, .col-3 {
width: 32.6%;
display: inline-block;
margin: auto
}
Isn't flawless, but it was made in a couple of minutes and gets the job done: JSFiddle
For the containers without 3 items you should remove the float: left; for the buttons inside it. Leave it for the one with 3 items. Then you can just set text-align: center; on the container.
You can add a class like no-float on the containers you want to control whether its children should be floated or not.
https://jsfiddle.net/bf33wc6w/10/
This answer will probably help you out. Wrap your buttons in a container, give it a fixed width, and change margin to auto. Be sure to remove float: left.
I'm trying to get my textarea and div to be side by side and have the run button underneath but I'm not sure why it isn't working.
The output looks like this:
http://codeeplus.net/test.php
CSS:
.CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 400px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#drawing { border: 1px solid #555555; float:left; width:480px; height: 400px; }
HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<div style="float:left">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</html></textarea>
</div>
<div style="float:left;">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<input type="button" id="run" value="Run" />
</div>
I would use two div's one to wrap around your text area and one to wrap around your other div. This way you can just use float: left; to put them both side by side :)
your code seems have many problems :), I made some changes:
remove float:left; from divs
set display:inline-block;
add clear:both tag before button
remove width:50%; and height:50% form first div
look at new HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; border: 1px solid #000000;">
<div style="display:inline-block; vertical-align:top;">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</textarea>
</div>
<div style="display:inline-block">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<div style="clear:both"></div>
<input type="button" id="run" value="Run" />
</div>
jsFiddle is here
You should use display: inline-block; property here, on the elements you want to align in one line:
div {
display:inline-block;
}
Online Example
The default value for div tags is display:block;
EDIT 1:
I have checked your page. The div that you're trying to align in is not aligning, because your parent div has width:50% and it's simply not fitting in there. Try changing it to, let's say width:100% and see that it really works!
EDIT 2:
Also remember, that if you use padding, as you apparently do on your page, it's affecting the actual (final) width of the element. For example, if you set the parent div's width: 1200px and padding as padding:10px;, then the actual div's size will be 1160px, cutting 10px on each side.
I have the following HTML :
<div id="ohsnap">
<div class="alert alert-red">First</div>
<div class="alert alert-yellow">Second</div>
</div>
With the following CSS :
#ohsnap {
position: absolute;
bottom: 5px;
right:5px;
margin-left: 5px;
z-index:99;
}
.alert {
text-align: right;
margin-top: 10px;
padding: 15px;
border: 1px solid #eed3d7;
border-radius: 4px;
}
.alert-red {
color: white;
background-color: #DA4453;
}
For some reason, the alerts (child div) takes all the same width. When the biggest div is removed, the width of all alerts divs are recalculated... I would like each div to take only the necessary space to show the text inside and not getting resized when others are delete.
What's the necessary CSS for that?
Fixed with
.alert {
float: right;
clear: right;
}
jsFiddle Demo
Floating is an option, but it allows the alert boxes to get outside the edges of their container. Another option would be:
<div id="ohsnap">
<!-- note BRs added below -->
<div class="alert alert-red">First</div><br>
<div class="alert alert-yellow">Second</div><br>
</div>
And add this to the CSS:
.alert { display: inline-block }