So I have this html and this css. I want the .big elements be displayed in the corners of my .About
This is how it looks like so far using this code
The output of the code
I would like the first .big .box from the .left-box .container to be displayed on the top of .left-box .container and the first .big .box from the .right-box .container to be displayed on the top of .right-box .container. Rest of the div's should stay the same as they are.
.box {
width: 100%;
height: 300px;
position: relative;
border: 1px solid black;
}
.container {
display: inline-block;
width: 33%;
}
.big {
height: 400px;
}
.arrow {
border: 1px solid green;
position: absolute;
width: 20px;
height: 20px;
}
img {
position: absolute;
width: 100%;
height: 300px;
}
.top {
top:0
}
.middle {
top:50%;
margin-top:-10px;
}
.bottom {
bottom:0
}
.left {
left:0;
}
.center {
left:50%;
margin-left:-10px;
}
.right {
right:0;
}
<div class="About">
<div class="left-box container">
<div class="big box">
<div class="arrow bottom right"></div>
</div>
<div class="big box">
<div class="arrow top right"></div>
</div>
</div>
<div class="middle-box container">
<div class="box">
<div class="arrow bottom center"></div>
</div>
<div class="box">
<img src="images/marks.jpg" alt="marks" />
</div>
<div class="box">
<div class="arrow top center"></div>
</div>
</div>
<div class="right-box container">
<div class="big box">
<div class="arrow bottom left"></div>
</div>
<div class="big box">
<div class="arrow top left"></div>
</div>
</div>
</div>
Related
How can I make sticky sidebar, but start sticky after the whole right sidebar has been seen while scrolling. Because at the moment only when you go all the way down you can see the right side all parts
.wrapper {
display: flex;
gap: 24px;
position: relative;
}
.left {
width: 70%;
}
.right {
width: 30%;
}
.sticky {
position: sticky;
top: 10px;
}
.box {
border: 1px solid;
height: 300px;
}
.box1 {
height: 400px;
background: green;
}
.box2 {
height: 200px;
background: pink;
}
<div class="wrapper">
<div class="left">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="right">
<div class="sticky">
<div class="box1">
box 1
</div>
<div class="box2">
box 2
</div>
</div>
</div>
</div>
So I need both block1 and block2 when you start scrolling to be seen first, and after that to stay sticky. Can someone help please
My problem is both a design and code issue, I have a diagonal layout which consists of a paragraph of text paired with an image which is then flipped (image then paragraph) on the next row.
The problem is I don't know the height of the paragraph or the height of the image so how do I make it equally spaced for the end user?
Here is a fiddle that may help explain my question.
My code:
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
</div>
<div class="container">
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
<img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
</div>
</div>
.one{
height:200px;
background:red;
width:50%;
float:left;
}
.two{
float:left;
height:auto;
background:blue;
width:50%;
}
.three{
float:left;
height:400px;
background:blue;
width:50%;
}
.container{
height:auto;
display:flex;
flex-direction:row;
align-items:center;
}
img{
float:left;
width:100%;
}
Class one is the paragraph ( shorter paragraph )
Class .two is the picture
Class .three is a longer paragraph
as you can see row one and two are equally spaced but row three has a larger space which wont look good to the end user.
Any help is appreciated.
Drop the img and use background-image and background-size: cover. With that you can make the image to completely cover the space left.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
background: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce') center;
background-size: cover;
border: 1ps solid red;
width: 50%;
}
.three {
height: 400px;
background: blue;
width: 50%;
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
</div>
</div>
<div class="container">
<div class="two">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
</div>
</div>
Or if the whole picture should be visible, use background-size: contain instead.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
background-image: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce');
background-position: center center; /* or "left top", and so on */
background-repeat: no-repeat; /* or "repeat-y", and so on */
background-size: contain;
border: 1ps solid red;
width: 50%;
}
.three {
height: 400px;
background: blue;
background-repeat: no-repeat; /* or "repeat-y", and so on */
width: 50%;
}
.three + .two { /* where class .two comes after .three */
background-repeat: repeat-y; /* repeat vertically */
background-position: center top; /* start at "center top" */
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
</div>
</div>
<div class="container">
<div class="two">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
</div>
</div>
Updated based on a comment.
If the image shouldn't scale up, but scale down, you either need a script to detect the image size and toggle between background-size: contain (scale down) and background-size: auto (keep org. size), or, as shown below, using the img, combined with transform to center it. The latter won't allow to control repeat though.
Stack snippet
.one {
height: 200px;
background: red;
width: 50%;
}
.two {
position: relative;
width: 50%;
overflow: hidden;
}
.two img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.three {
height: 400px;
background: blue;
width: 50%;
}
.container {
display: flex;
}
<div class="container">
<div class="one">
<p>
</p>
</div>
<div class="two">
<img src="http://placehold.it/100" alt="">
</div>
</div>
<div class="container">
<div class="two">
<img src="http://placehold.it/800" alt="">
</div>
<div class="one">
<p>
</p>
</div>
</div>
<div class="container">
<div class="three">
<p>
</p>
</div>
<div class="two">
<img src="http://placehold.it/800" alt="">
</div>
</div>
I am trying to make a layout where #txt-bar and #main-content-area will overlap on #image. ( #txt-bar is overlapping on #image with following CSS ) but to achieve overlapping of #main-content-area on #image if I use top:-60px at #main-content-area then it will leave a gap between #main-content-area and #footer. I don't know how to solve this issue. Please help me.
/* CSS */
body {
position: absolute;
}
#top-bar {
background-color: black;
color: white;
}
#txt-bar {
height: 40px;
background-color: pink;
position: relative;
z-index: 4;
}
#link-bar {
background-color: red;
height: 40px;
z-index: 4;
}
#image {
position: relative;
z-index: 3;
}
.line {
width: 100%;
position: relative;
border-bottom: 4px solid black;
}
#main-content-area {
position: relative;
background-color: red;
top: -60px;
z-index: 4;
}
#footer {
background-color: green;
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" id="txt-bar">
<h1>Greetings</h1>
</div>
<div class="col-sm-6" id="link-bar">
<h1>Link bar </h1>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="img-responsive" />
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<h1>Main content area </h1>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<h1>Footer Element </h1>
</div>
</div>
</div>
Wrap all divs (#txt-bar #main-content-area and #image) in a parent div with position:relative then use position:absolute for #main-content-area and #txt-bar, this will solve your issues.
.wrap{position:relative;max-width:300px;}
#txt-bar {
height: 40px;
background-color: pink;
position: absolute;
top:10px;
width:100%;
}
#main-content-area {
position: absolute;
bottom:10px;
width:100%;
background-color: red;
}
<div class=wrap>
<div id=txt-bar>txt-bar</div>
<div id=image><img src=https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300></div>
<div id=main-content-area>main-content-area</div>
</div>
More Info
Probably a fairly basic solution to this, but I can't seem to figure it out... have set up a jsfiddle to demonstrate:
http://jsfiddle.net/AxKq8/1/
HTML
<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.box {
width: 50%;
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}
I have 3 divs. What I'd like to do is have the top of the green div align with the top of the blue div.
As you can see I tried floating the first two divs left, and the third div right. That didn't work, so tried a relative positioning. Also tried using clear aswell, but it's eluding me!
Any suggestions on how to make this work?
Thanks!
Jon
Positioned the third div absolute with top:0
#box-3 {
height: 300px;
float:right;
background-color: green;
position: absolute;
top:0px;
right:0px;
}
Working CODE:JSFIDDLE
You can put the blue and red box in a container, and then a green box in another container. Float the two containers rather than the boxes.
http://jsfiddle.net/AxKq8/9/
HTML
<div class="wrapper">
<div class="container">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
</div>
<div class="container">
<div id="box-3" class="box">
</div>
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.container {
float: left;
width: 50%
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
background-color: green;
}
Give this a try: JSFiddle
HTML:
<div class="wrapper">
<div class="box-group box">
<div id="box-1" class="box2"></div>
<div id="box-2" class="box2"></div>
</div>
<div class="box-group box">
<div id="box-3" class="box2"></div>
</div>
</div>
CSS:
.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }
I created columns with the .box-group class, I grouped the first two items into the first column div so the stacking and floating will appear properly.
[SOLVED]
Here's the Fiddle
<div id="container">
<div class="content">
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="column">
<div class="top">
TOP
</div>
<div class="bottom">
BOTTOM
</div>
</div>
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</div>
#container .content .column {
position: relative;
display:inline-block;
height: 100%;
width: 100px;
border: 1px solid red;
}
#container .content .top,
#container .content .bottom {
position: absolute;
background-color: #AAA;
}
#container .content .top {
top: 0;
}
#container .content .bottom {
bottom: 0;
}
#container {
min-height: 349px;
}
I have three inline columns, the left and right ones have the same dynamic height (they contain generated tables with a variable number of rows)
I want the middle column to have the same height as its neighbours and I want his TOP div to clamp to the top and BOTTOM div to clamp to the bottom.
I've read this thread but can't manage to make it work.
Any idea what I'm doing wrong ?
Thanks a lot !
EDIT
Using Sowmya's solution :
JS Fiddle
<div id="container">
<div style="position: relative;">
<div class="content">
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="column">
<div class="top">
TOP
</div>
<div class="bottom">
BOTTOM
</div>
</div>
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
#container .content .column {
display:table-cell;
height: 100%;
width: 100px;
border: 1px solid red;
vertical-align: top;
}
#container .content .top,
#container .content .bottom {
position: absolute;
background-color: #AAA;
}
#container .content .top {
top: 0;
}
#container .content .bottom {
bottom: 0;
}
Use display:table-cell; to .column
#container .content .column {
position: relative;
display:table-cell;
height: 100%;
width: 100px;
border: 1px solid red;
}
DEMO