I'm overlapping a div (div2 over div1) using top: -50px; to push it up. Now this leaves 50px below it before the next div (div3). How can I "clear" that and make the div (div3) fall in exactly below the div (div2) I positioned -50px?
<div id="div1" style="width: 1000px; height: 90px; background: red;"></div>
<div id="div2" style="position: relative; top:-50px; width: 1000px; height: 90px; background: blue;"></div>
<!--50 wasted pixels here-->
<div id="div3" style="width: 1000px; background: green; height:90px;"></div>
Add margin-top: -50px to your #div3:
<div id="div3" style="width: 1000px; background: green; height:90px; margin-top: -50px;"></div>
Fiddle: http://jsfiddle.net/N7z6e/
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I have this layout (which is a header):
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color: aqua; height: 160px;">
<img src="logo.png" class="img-responsive logo">
</div>
<div class="col-sm-8" style="background-color: blueviolet; height: 160px;"></div>
<div class="col-sm-2" style="background-color: aqua; height: 160px;"></div>
</div>
</div>
what i would like to achieve is:
Align the logo to the bottom and the center
Let the image be responsible (set width to 80% of the column)
I did this:
.logo {
position: absolute;
width: 80%;
left: 10%;
right: 10%;
bottom: 0;
}
but it somehow dosen't work as you can see here:
https://jsfiddle.net/9kauhbhs/2/
Use left: 50% and a margin left that is negative half of the image width.
e.g.
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}
Fiddle
You can try this..
https://jsfiddle.net/9kauhbhs/7/
.container{
position:absolute;
bottom:0px;
height:auto;
width:100%;
text-align:center;
}
.logo {
position: relative;
width: auto;
height:auto;
margin:0 auto;
max-height:100%;
vertical-align:bottom;
}
<div class="col-sm-2 text-center" style="background-color: aqua; height: 160px;">
<div class="container">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" class="logo">
</div>
</div>
How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution
I have a div with position: fixed, which contains two other divs inside: one with content and second which must always be positioned on the bottom of the main div.
Here is an example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
The problem is that footer starts to move with other content when user scrolls content of the main block, despite of position:absolute of the footer block.
Is there any way to stick footer to the bottom of the main fixed block without changing html structure?
And what if main div contains many children and only last of them is the footer which we need to stick to bottom? Example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
Since the absolutely positioned element is inside .scroller and you don't want it to move when scrolling, the scrollable container should be .content instead to .scroller.
.content {
height: 100px;
overflow: auto;
}
Moreover, you should remove bottom: 0 from the fixed wrapper so that its height is given by its content, that is, 100px.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.content {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
In case you want multiple .content elements and don't want to scroll each one separately, you can wrap them all in a .scroller-inner container, and set the styles above to it.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.scroller-inner {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="scroller-inner">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Alternatively, if you know the height of the header, you can make the footer a fixed element, and use margins to correct its position. This is kinda hacky, though.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px; /* val1 */
top: 0; /* val2 */
overflow: auto;
}
.footer {
position: fixed;
white-space: nowrap;
top: 100px; /* val1 + val2 */
line-height: 20px; /* val3 */
font-size: 16px; /* val4 */
margin-top: -18px; /* val3/2 + val4/2 */
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
a have three column layout and i want to have three divs inside the middle column, but every time my content in sidebars is "longer" than content in the middle div, boxes just jump down under "the longest div". Here is my code:
<div style="float: left; width: 15%; background-color: yellow;">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div style="float: right; width: 15%; background-color: pink;">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div style="margin-left: 20%; margin-right: 20%;">
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
Here is code on jsfiddle for better understanding. I would be glad if somebody could explain "clearing" to me.
Edit:
I followed this tutorial http://css.maxdesign.com.au/floatutorial/tutorial0406.htm
Your middle div is being presented as a block level element and is why is being pushed along with the content of your sidebar divs. Float it to the left and add a proper width to it to fix the issue. Middle div width = 20% + 20% margin + 15% + 15% sidebar widths = 70% + 30% middle div = 100%.
http://jsfiddle.net/DyHGP/5/
It's because of the following, which you have after every three divs.
<div style="clear: both;"></div>
Clearing is used to drop an elementy right under anything that is float. Using clear: both; means that it will clear anything that is floated left or right.
A quick fix would be to remove those elements and increase the width of each of the divs in the centre column to 30% which would then force the 4th one onto the next line.