I have two div's.
For first div I have position:absolute and for second div I just have margin-top:50px.
Assuming the first div (which one have position absolute) has some data from backend
No matter how my text is long, how can I always have 50px gap from first div to second
my code
.box1 {
position: absolute;
top: 0;
border: 1px solid red;
width: 100px;
}
.box2 {
margin-top: 50px;
border: 1px solid green;
width: 100px;
}
<div class="box1">
Lorem Ipsum is simply
</div>
<div class="box2">box 2</div>
This should do the job
.wrap{
position: absolute;
top: 0;
}
.box1 {
border: 1px solid red;
width: 100px;
word-break: break-all;
}
.box2 {
position:absolute;
margin-top: 50px;
border: 1px solid green;
width: 100px;
}
<body>
<div class="wrap">
<div class="box1">
Lorem Ipsum is
</div>
<div class="box2">box 2</div>
</div>
</body>
Better solution don't fix your first div with position: absolute;
I propose you this solution
.main {
display: block;
}
.box1 {
top: 0;
border: 1px solid red;
width: 100px;
}
.box2 {
margin-top: 50px;
border: 1px solid green;
width: 100px;
}
<div class="main">
<div class="box1">
Lorem Ipsum is simply
Lorem Ipsum is simply
Lorem Ipsum is simply
Lorem Ipsum is simply
</div>
<div class="box2">box 2</div>
</div>
Related
I want to align elements inside div
a - > to the top
b - > to the bottom
c - > above b element (but also to the bottom of the div container)
#container { position: relative}
#a { position: absolute; top: 0px;}
#b { position: absolute; bottom: 0px;}
#C {????}
I didn't find a way for C
You can use another container for below divs.
<div id="container">
<div id="a"></div>
<div id="container-below">
<div id="b"></div>
<div id="c"></div>
</div>
</div>
#container { position: relative}
#a { position: absolute; top: 0px;}
#container-below { position: absolute; bottom: 0px;}
You can put c inside b and position it absolutely with bottom: 100%, thus c will always be on top of b.
.d {
position: relative;
height: 200px;
width: 200px;
float: left;
margin: 0 5px;
border: 1px solid green;
}
.a, .b, .c{
position: absolute;
width: 100%;
min-height: 40px;
left: 0;
}
.a {
top: 0;
background: lightgreen;
}
.b {
bottom: 0;
background: tomato;
}
.c {
bottom: 100%;
background: orange;
}
<div class="d">
<div class="a">a
</div>
<div class="b">b
<div class="c">c
</div>
</div>
</div>
<div class="d">
<div class="a">a
</div>
<div class="b"> Block b Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsu
<div class="c">c
</div>
</div>
</div>
please start using flexbox and soon css grids :P
.p > div {
width: 100px;
height: 100px;
border: 1px solid red
}
.p {
height: 500px;
display: flex;
background-color: beige;
width: 200px;
flex-direction: column;
}
.b {
margin-top: auto;
}
<div class="p">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
I have a big problem with 4 columns layout inside my view.
I must build this layout:
Anybody know how I can make this layout? I use -clip method but first div always is another from last div. Two centered div is OK but first and last not.
Please, help me if you know how I can do this...
Here is an example using trapezoid borders in combination with positioning:
body {
margin: 0;
}
.section {
position: relative;
display: inline-block;
width: 25%;
margin-right: -4px;
}
.background {
position: absolute;
top: 0;
width: 100%;
height: 0;
border-right: 30px solid transparent;
border-bottom: 300px solid #346;
}
.content {
position: absolute;
top: 0;
color: #fff;
padding: 10px 10px 10px 30px;
z-index: 100;
}
.s1 .background {
border-bottom-color: yellow;
z-index: 5;
}
.s2 .background {
border-bottom-color: blue;
z-index: 4;
}
.s3 .background {
border-bottom-color: navy;
z-index: 3;
}
.s4 .background {
background-color: black;
border: none;
height: 300px;
}
<div class="section s1">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section s2">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section s3">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
<div class="section s4 last">
<div class="background"></div>
<div class="content">Lorem Ipsum</div>
</div>
Limits: You have to define a fixed height (300px in the example above)
Codepen: http://codepen.io/eguneys/pen/jPRexo
I have a parent with position:relative and two child with position:absolute side by side:
<div class='parent'>
<div class='child child1'>
</div>
<div class='child child2'>
</div>
</div>
.parent {
position: relative;
height: 200px;
border: 1px solid black;
}
.child {
position: absolute;
height: 90px;
width: 70px;
border: 1px solid red;
}
.child1 {
top: 0px;
left: 0px;
}
.child2 {
top: 0px;
left: 70px;
}
I want to put the children in a group:
<div class='parent'>
<div class='child-group'>
<div class='child child1'/>
<div class='child child2'/>
</div>
</div>
So that child-group wraps two children. (The child-group border is around two child).
This should work for wherever the children are absolutely positioned. They will be always side by side and child-group should wrap them.
Notes
In case this is not possible, what is a possible solution to have borders around the children?
I can set the width of the child-group with js so that I can calculate.
http://codepen.io/eguneys/pen/jPRexo
Don't position the child divs, position the child-group wrapper.
.parent {
position: relative;
height: 200px;
border: 1px solid black;
}
.child-group {
border: 2px solid green;
position: absolute;
top: 0;
left: 0;
}
.child {
float: left;
height: 90px;
width: 70px;
border: 1px solid red;
}
<div class='parent'>
<div class='child-group'>
<div class='child child1'>
</div>
<div class='child child2'>
</div>
</div>
</div>
I would like to implement timeline part on my website.
I have picture how it should look but I can't think any good way to do it.
How it should look:
Actual code:
js fiddle
<div class="right ">
what should I put here to get that circle?
</div>
Most confusing part is how to get that circle and that line together?
Could anyone suggest anything?
Thank you.
You could use :after, changing the styles to your liking.
.border needs to be positioned non-statically.
.wrapper {
width: 1030px;
background-color: #534741;
height: 500px;
}
.right {
color: #fff;
width: 90%;
text-align: right;
padding: 10px 10px 0 0;
display: block;
}
.border {
border-bottom: 2px solid #000;
width: 50%;
float: right;
margin: 10px 140px 0 10px;
position: relative;
}
.border:after {
/* Position and border */
display: block;
content: '';
border: 2px solid #000;
position: absolute;
width: 32px;
right: -34px; /*** -(Width+Border) ***/
height: 32px;
bottom: -18px; /*** -((Height/2)+Border) ***/
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.text {
float: right;
width: 300px;
margin-right: 90px;
}
<div class="wrapper">
<div class="right">
<h2>Text</h2>
</div>
<div class="right">
<h3>2014</h3>
</div>
<div class="right "></div>
<div class="right border"></div>
<div class="right text">
<p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p>
</div>
</div>
JSFiddle
Try to make it with positioning and borer radius. Or simply use images.
.content-wrapper {
position: relative;
width: 400px;
margin-bottom: 30px;
}
.line .circle {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid black;
position: absolute;
top: -25px;
}
.line {
position: relative;
border-bottom: 1px solid black;
}
.odd .line {
margin-right: 50px;
}
.even .line {
margin-left: 50px;
}
.odd .circle {
right: -50px;
}
.even .circle {
left: -50px;
}
.content,
.header {
padding: 0 60px;
}
.odd .content,
.odd .header {
text-align: right;
}
.even .content,
.even .header {
text-align: left;
}
<div class="content-wrapper odd">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
<div class="content-wrapper even">
<div class="header">Some title</div>
<div class="line">
<div class="circle"></div>
</div>
<div class="content">Loerm ipsum dolerom</div>
</div>
Below code should work:
.box-with-circle {
width: 90%;
position: relative;
}
.box-with-circle .circle {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
margin -20px 0 0 -20px;
border: 1px solid #000;
background-color: #fff;
z-index: 1;
border-radius: 50%;
}
.box-with-circle hr {
position: relative;
top: 20px;
}
<div class="box-with-circle">
<div class="circle"></div>
<hr />
</div>
I have the following html markup:
.container {
border: 1px solid green;
}
.right {
border: 1px solid #000;
float: right;
width: 40px;
}
.left {
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
<br/>
multiple rows
</div>
</div>
</div>
As you can see right block looks ugly. How could I make right element fluid height 100%?
Add the rule height:100% the right div, and remove float:right. I changed it to position:absolute, so that you didn't need the container's height.
.container {
border: 1px solid green;
position: relative;
width: 100%;
}
.right {
border: 1px solid #000;
width: 40px;
height: 100%;
position: absolute;
right: 0;
}
.left {
display: block;
border: 1px solid red;
overflow: hidden;
margin-right:40px;
}
<br><br><div class="container">
<div class="right">Right</div>
<div class="left-container">
<div class="left">
Left fluid
multiple rows a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence a really long sentence.
</div>
</div>
</div>
If your application will run in a modern browser, then using flexbox is a good way to go: http://jsfiddle.net/2hn9zgog/.
HTML:
<div class="container">
<div class="right">Right</div>
<div class="left">
Left fluid
<br/>multiple rows
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
outline: 1px dotted gray;
}
.right {
order: 2;
flex: 0 0 auto;
border: 1px solid green;
}
.left {
flex: 1 0 auto;
border: 1px solid red;
}
add clear: both; after floated element.
<div class="right"></div>
<div style="clear: both"></div>
Add
html, body{
height: 100%;
min-height: 100%;
}
.your-container{
height: 100%;
}