I have a simple HTML, one parent div, and two children. When I am styling one child with float set to right, the next child goes up and the margin-top doesn't apply to it, which I don't want.
Here is the sample code.
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
float: right;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
Can someone please suggest how to handle this situation?
Here is the JSFiddle
I want the output to be something like
Don't use float. float is deprecated. Please take note of this solution using flex.
.outer {
width: 100%;
height: 100%;
display: flex;
flex-flow: row-reverse;
align-items: center;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2 {
width: 50%;
text-align: center;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
Snippet #2
.outer {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
align-items: flex-end;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2 {
width: 50%;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
Try this code:
.outer{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2{
width: 50%;
}
<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>
You can use clear: both; in the element what has float: right; property.
Related
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
I am struggling to make my .centerIt divs be centered vertically, and to have the .div1 stay scrollable after I add more .centerIt divs into the column.
The .centerIt divs have to keep their height: 20px and not squeeze after I add more of them.
JSFiddle example
.container {
display: flex;
background: red;
width: 300px;
height: 300px;
}
.div1 {
background: yellow;
height: 90%;
width: 27%;
margin: 5px;
overflow-y: scroll;
}
.div2 {
background: blue;
height: 90%;
width: 74%;
margin: 5px;
}
.centerIt {
background: green;
width: 100%;
border: solid 1px black;
height: 20px;
color: green;
}
<div class="container">
<div class="div1">
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
</div>
<div class="div2"></div>
</div>
Just try to add min-height: 20px to .centerIt instead of height and
display: flex;
flex-direction: column;
justify-content: center;
to .div1 styles, should do it.
JSFiddle fork
How to make the button text top left in the below case (div2).
I have to use button for some requirement, but make it look like a normal text. Any help you help.
Container is flexbox column and have a button with flex 1.
I don't want add an element inside button and make it position absolute.
Need cleaner way.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
Top left Alignment
Use the property flex-direction: column; to align your text top left.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
flex-direction:column;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
Center Alignment
Just change your style text-align:left to text-align:center.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: center;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
You can do the combination and apply the properties as per your requirements.
This is not perfect and probably you will have to play around with this but i guess this is a step in the right direction.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
position:absolute;
flex-direction: column;
}
So, I added padding-bottom to the .div2 classed element, so the text inside div2 is pushed up and away from the bottom edge of the element.
.container {
display: flex;
flex-flow: column;
height: 200px;
border: 1px solid gray;
}
.div1, .div3 {
height: 40px;
}
.div2 {
flex: 1;
border: 1px solid red;
text-align: left;
padding-bottom: 40%;
}
<div class="container">
<div class="div1">
div1
</div>
<button class="div2">
I want this text to be top left
</button>
<div class="div3">
div3
</div>
</div>
How to vertical-align without using display table/table-cell or position absolute ?
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
Here is an another option using "Flex" property.
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
#parent {
border: 1px solid red;
display: flex;
align-items: center;
height: 100vh;
}
.child {
border: 1px solid blue;
flex-grow: 1;
}
Codepen demo link
You can use position relative, with top of 50% and a translation of -50%.
#parent {
border: 1px solid red;
height: 100vh;
}
.child {
position: relative;
top: 50%;
transform: translate(0,-50%);
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
Another method could be to use a floater div
#parent {
border: 1px solid red;
height: 100vh;
}
.floater {
float:left;
height:50%;
width:100%;
margin-bottom: -25px;
}
.child {
border: 1px solid blue;
clear: both;
height:50px;
}
<div id="parent">
<div class="floater"></div>
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
You can try using display:flex.
CSS
#parent {
border: 1px solid red;
height: 100vh;
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
.child {
border: 1px solid blue;
}
<div id="parent">
<div class="child">
<p>I want to be vertical aligned</p>
</div>
</div>
You can use display:flex;:
#parent {
border: 1px solid red;
height: 100vh;
display:flex;
align-items:center;
justify-content:center;
}
You can use like that I think
position: fixed; top: 50%;
if you do not mind browser compatibility I would go with flex - see #rblarsen, #Satheesh Kumars answers.
but if you need to expand browser support, here is a more complex but rather solid solution : tested IE9+ FF Chrome and other major browsers...
check out this fiddle : https://jsfiddle.net/kLLz0nm2/
HTML
<div class="wrapper">
<div class="content">Middle aligned</div>
<div class="middle"></div>
</div>
CSS
.wrapper{
width : 100%;
height : 100%;
text-align: center;
}
.content{
display: inline-block;
vertical-align: middle;
}
.middle{
height: 100%;
display: inline-block;
vertical-align: middle;
}
P.S - the above translate solution while fairly simple can sometimes cause poor rendering issues, check out :
I am trying to display multiple circles on the same horizontal axis but with different width and height. The problem is that the circles are shrinked.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/cxuxgy0u/
You should not use the table layout for this. Your HTML does not semantically represent a table, so table element is worng to use.
What you want to do can be achieved with Flexbox.
article {
display: flex;
align-items: center;
}
article > div + div {
margin-left: 1rem;
}
article > div {
flex-shrink: 0;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
article > div:nth-child(2) {
height: 6rem;
width: 6rem;
}
<article>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
<div><span>TEXT</span></div>
</article>
You might want to read more about Flexbox on MDN.
A simple flexbox solution. Just be sure to set flex-shrink to 0, because the initial value is 1, which allows flex items to shrink when necessary to prevent overflowing the container.
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container {
display: flex;
align-items: center;
}
.circle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 0 100px; /* flex-shrink: 0, to disable shrinking default */
height: 100px;
border-radius: 50%;
margin: 20px;
border: 1px solid #000;
}
.big-circle {
flex-basis: 300px;
height: 300px;
}
<div class="circles-container">
<div class="circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
<div class="circle">
<span>TEXT</span>
</div>
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
https://jsfiddle.net/cxuxgy0u/7/
Try this:
HTML
<div class="container">
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
<div class="circle">Text</div>
</div>
CSS
.container {
display:flex;
justify-content: space-around;
align-items: center;
height: 100vh;
}
.circle {
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle:nth-child(odd) { width: 100px; height: 100px; }
.circle:nth-child(even) { width: 200px; height: 200px; }
Uses flexbox and is the simplest way to achieve what you want.
Here's a fiddle https://jsfiddle.net/itsag/sk3tdo4L/
Hope it helps!
I think your problem is found in the styling.
For each circle, you need to remove the style
display:table-cell
vertical-align: middle;
and then u need to bring in line-height. The line-height should be equal to the height of the circle, for for the smaller circle, you will have
line-height:100px //this brings the text to the middle of the circle vertically.
Then also, you need to increase the border-radius from 50% to 100%
border-radius:100%;
Therefore, your css will not look like this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: table-row;
}
.circle {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 100%;
text-align: center;
line-height:100px;
}
.cell {
display: table-cell;
}
.big-circle {
width: 300px;
height: 300px;
line-height:300px;
}
This should help you.
Flexbox:
container {
display: flex;
justify-content: center;
}
If you want space between the pictures, use:
margin-left:
or
margin-right:
try this
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.circles-container{
display: table;
border-spacing: 40px;
}
.row {
display: flex;
}
.circle {
padding: 40px 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
}
.cell {
}
.big-circle {
padding: 150px;
}
<div class="circles-container">
<div class="row">
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="circle">
<span>TEXT</span>
</div>
</div>
<div class="cell">
<div class="big-circle circle">
<span>TEXT</span>
</div>
</div>
</div>
</div>