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;
}
Related
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%;
}
Question 1:I learnt Holy Grail of Layouts today, after coding,the browsers show me strange format like this(not a complete black border):
[
my code is following:
#container {
border: 10px solid black;
/*this code cause the umcomplete black border*/
padding: 0 220px 0 200px;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
Question 2:In my opion,if I make some changes, same layout will show but position:relative is not included.The format is still strange(content in midddle area is covered by both side areas):
.main2 {
background-color: grey;
float: left;
width: 100%;
min-height: 100px;
}
/*this is the only new code*/
#main2Inner {
margin: 0 220px 0 600px;
}
.left2 {
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
min-height: 100px;
}
.right2 {
float: left;
width: 220px;
margin-left: -220px;
background-color: green;
min-height: 100px;
}
<div id="container2">
<div class="main2">
<div id="mianInner">this is paragraph 4 I dont know why some content cannot be displayed</div>
</div>
<div class="left2">this is paragraph 5</div>
<div class="right2">this is paragraph 6</div>
</div>
You are dealing with floating elements overflowing their container. You may use overflow:hidden (or position/float, display) to modify the block formating context (BFC).
#container {
border: 10px solid black;
overflow: hidden;
/*keyword : Block Formating Context */
padding: 0 220px 0 200px;
min-width: 500px;
;
}
.main1 {
float: left;
position: relative;
width: 100%;
background-color: grey;
min-height: 100px;
}
.left1 {
float: left;
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background-color: red;
min-height: 100px;
}
.right1 {
float: left;
position: relative;
width: 220px;
margin-left: -220px;
right: -220px;
background-color: green;
min-height: 100px;
}
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
Flex or table display would be more reliable in my own opinion
#container {
border: 10px solid black;
display: flex;
min-height: 50px;
box-sizing: border-box;
}
.main1 {
background-color: grey;
flex: 1;
}
.left1 {
order: -1;
width: 200px;
background-color: red;
}
.right1 {
width: 220px;
background-color: green;
}
#container2 {
border: 10px solid black;
height: 50px;
/* will grow taller if needed */
display: table;
width: 100%;
box-sizing: border-box;
table-layout: fixed;
}
#container2 > div {
display: table-cell;
}
<h1>display:flex</h1>
<div id="container">
<div class="main1">this is paragraph 1</div>
<div class="left1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
<hr/>
<h1>display:table</h1>
<div id="container2">
<div class="left1">this is paragraph 1</div>
<div class="main1">this is paragraph 2</div>
<div class="right1">this is paragraph 3</div>
</div>
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.
Divs inside Div (id="icons") not starting new line (like Windows 7 icons)
I want the divs inside div with id="icons" don't start a new line it flows vertically. Why not start new line?
JsFiddle
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
body {
margin:0;
padding:0;
}
#icons {
position: fixed;
background: red;
width: 100%;
height: 100%;
overflow: auto;
}
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons2 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons3 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons4 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons5 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
#icons6 {
position: relative;
background: blue;
width: 20%;
height: 25%;
}
#icons7 {
position: relative;
background: yellow;
width: 20%;
height: 25%;
}
#icons8 {
position: relative;
background: lime;
width: 20%;
height: 25%;
}
#icons9 {
position: relative;
background: pink;
width: 20%;
height: 25%;
}
#icons10 {
position: relative;
background: purple;
width: 20%;
height: 25%;
}
<div id="desktop">
<div id="icons">
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
</div>
</div>
A DIV by default is a display type of 'block' and therefore forces in the line break.
You can get around this by using display: inline-block; in your CSS like so:
#icons1 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
#icons2 {
position: relative;
background: blue;
width: 20%;
height: 25%;
display: inline-block;
}
/* etc */
You can add this in at the higher level (Icons) but if you're trying to do Windows style then you probably want more control over what and where breaks occur.
(hopefully I interpreted your question correctly!)
Change the display type on those icon divs.
#icons div {
display:inline-block;
margin:5px;
}
http://jsfiddle.net/0y7ktkd2/1/
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