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;
}
Related
I would like to have a layout as follows:
Whereby I have a parent container, and centred inside of that is a breadcrumb. However, I also would like a logo inside of the container which floats to the left of the breadcrumb, but respects the boundaries of the breadcrumb.
I have been playing around with flexbox and can only get it to work with absolutely positioning the logo, which means the breadcrumb does not respect the boundaries of the logo.
I have put together a JSFiddle playground here: https://jsfiddle.net/joyqwpc1/25/.
The difficult thing is, the logo can be a variable width, so setting a margin is not viable for this.
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 50px;
}
#logo {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
I've created 2 separate containers for the logo and breadcrumbs and set them a width. Then, I aligned elements inside these containers.
https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/
<div id="container">
<div class="logoContainer">
<div id="logo">
</div>
</div>
<div class="breadcrumbContainer">
<div id="breadcrumb">
</div>
</div>
</div>
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
}
.logoContainer{
width: 10%;
height: 100%;
background: yellow;
}
#logo {
height: 50px;
width: 100%;
background-color: blue;
}
.breadcrumbContainer{
width:90%;
display: flex;
justify-content: center;
}
#breadcrumb {
width: 200px;
max-width: calc(100% - 2rem);
height: 20px;
background-color: green;
}
For clean solution a little bit of JavaScript is needed:
Make sure to click "Run with JS" button: https://jsbin.com/ziziqidole/edit?html,output
<html>
<head>
<script>
function handleResize() {
var crumb = document.getElementById("breadcrumb");
var logoWidth = document.getElementById("logo").offsetWidth;
var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
if (calcWidth < 10) {
calcWidth = 10;
}
crumb.style.marginLeft = calcWidth;
}
</script>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body onresize="handleResize()" onload="handleResize()">
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
Solution without JavaScript. But some hardcoding needed e.g. logo width and crumb width.
https://jsbin.com/juxijowova/edit?html,output
<html>
<head>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
position: absolute;
left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
transform: translate(-50%, 0);
/*margin: 0 auto;
margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body>
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
This is usually how I lay something like this out: 3 containers, the side 2 will flex to fill space equally because they have the same exact basis (auto basis would break this because the left "Logo" content would be included in the basis for the left container). The middle is sized to the content and stays centered unless it becomes too wide and will start to take up space on the right and become uncentered.
.f-row {
display: flex;
}
.left-box {
flex: 1 1 0.0000001px;
padding: 1em;
border: 1px solid blue;
}
.middle-box {
padding: 1em;
border: 1px solid red;
justify-self: center
}
.right-box {
padding: 1em;
border: 1px solid green;
flex: 1 0 0.0000001px;
}
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
<div class="right-box"></div>
</div>
This question already has answers here:
How do I right align div elements?
(17 answers)
Closed 3 years ago.
How to align element to right side of div box?
My div
<div id="foo">
<div id="tree">Some Text here</div>
</div>
My css
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
}
I need tree placed at top-right side of foo.
There are a few ways to accomplish this. One way is to add an automatic left margin to the tree:
margin-left: auto;
Another option would be to apply float: right; to the tree, which may or may not result in the content flow you need.
And finally, my recommendation honestly would be to just use flexbox.
Margin Example
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
margin-left: auto;
}
<div id="foo">
<div id="tree">Some Text here</div>
</div>
Float Example
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
float: right;
}
<div id="foo">
<div id="tree">Some Text here</div>
</div>
Flex Example
#foo {
display: flex;
justify-content: flex-end;
width: 500px;
height: 500px;
background: #5e5e5e;
}
#tree {
display: flex;
width: 100px;
height: 30px;
background: #000000;
}
<div id="foo">
<div id="tree">Some Text here</div>
</div>
Give float:right to #tree.
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
}
#tree {
float: right;
width: 100px;
height: 30px;
background: #000000;
}
<div id="foo">
<div id="tree">Some Text here</div>
</div>
It is possible with position:absolute
#foo {
display: block;
width: 500px;
height: 500px;
position: relative;
background: #5e5e5e;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
color: #fff;
position: absolute;
right: 0;
}
<div id="foo">
<div id="tree">Some Text here</div>
</div>
One way would be to use a position: relative / absolute combination:
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
position:relative;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
position:absolute;
right:0;
}
<div id="foo">
<div id="tree">Some Text here</div>
</div>
Update your css like this. #tree div will always be at the top right corner of #foo
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
position: relative;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
position: absolute;
top: 0;
right: 0;
}
I have 3 divs (colored squares) and a button.
How can I center the button under the divs?
With my current code the button appears in the same line as #squares and it's floating to the left. Thanks for your answers.
#div1 {
background-color: red;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
position: absolute;
margin-left: 35%;
}
#button {
width: 100px;
height: 50px;
clear: both;
}
<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>
Since you're already using flexbox, there are multiple solutions, all of them relatively simple.
Here's one:
Wrap both containers in a parent container.
Add display: flex and flex-direction: column to this new container.
Now you can easily align the squares and the button both vertically and horizontally.
#container {
display: flex;
flex-direction: column;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin: 0 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
align-self: center;
margin-bottom: 10px;
}
#button {
align-self: center;
text-align: center;
width: 100px;
height: 50px;
}
<div id="container">
<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>
</div>
Is there a specific reason you are using position: absolute for the square-container?
If not, you can just make the position relative, recenter the content and center the button.
Important code changes:
#squares {
position: relative;
justify-content: center;
}
#button {
margin: 0 auto;
}
Fiddle: https://jsfiddle.net/q17fa25w/
Other way to solve it, you can set padding left and top for #button div like this:
#button {
width: 100px;
height: 50px;
clear: both;
padding: 120px 35%;
}
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.
How do I align div to the bottom of another div in HTML?
And why it doesn't work?
HTML:
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
CSS:
#big {
background-color: red;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
display: inline-block;
position: absolute;
bottom: 0px;
margin: 10px;
display: inline-block;
}
Your question is unclear but do you mean like this?..
#big {
display:table-cell;
position:relative;
vertical-align:bottom;
background-color: red; margin: 10px; width: 800px; height: 300px;
}
.small {
display: inline-block;
width: 150px; height: 150px; background-color: blue;
margin: 10px;
}
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
This will work:
http://jsfiddle.net/4f4ejwr0/5/
#big {
background-color: red;
margin: 10px;
position: relative;
height: 300px;
}
#bottom {
position: absolute;
bottom: 0px;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
margin-left: 10px;
}
<div id="big">
<div id="bottom">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
</div>
is this what youre looking for? http://jsfiddle.net/swm53ran/94/
should be changed to
position: relative;
Add the following to your CSS Class:
bottom:0 !important;
and remove the position portion.
Try this
#big {
background-color: red;
margin: 10px;
width: 150px; //new line
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
position: relative; // new line
margin: 10px;
}
Live jsfiddle
Update: This is ok ? Jsfiddle