I have two columns, in the left column I have made the .title extend the full width of the screen using negative margins.
On the right column I have .sidebar I would like this to appear below the extented .title div. Run the code snippet below and you'll see it starts on the same line. In other words I want the orange div to fall below the yellow div.
I don't want to use margin-top on the .sidebar because the height of .title in the left column varies.
I realise this is possible with javascript but I'm looking for a more robust solution just using html and css, is this possible?
I also created a fiddle if that's more convenient http://jsfiddle.net/2dLaw17r/1/
.container {
width:600px;
margin:0 auto;
clear:both;
padding:1em;
background:grey;
}
.left {
float:left;
width:60%;
}
.left .title {
margin:0 -500%;
padding:0 500%;
background: yellow;
}
.right{
float:right;
width:40%;
background:orange;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container clearfix">
<div class="left">
<article>
<div class="title">Title extends beyond container</div>
<p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
<article>
</div>
<div class="right">
<div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
</div>
</div>
Place a div inside the article that contains the article content. This way the title and content both remain inside the article. Next, float the article content left and the sidebar towards the right. The negative margin trick is no longer required:
.container {
width: 600px;
margin: 0 auto;
clear: both;
padding: 1em;
background: grey;
}
.title {
background: yellow;
/* eye candy only */
margin: 0 -1em;
padding: 0 1em;
}
.left {
float: left;
width: 60%;
}
.right {
float: right;
width: 40%;
background: orange;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container clearfix">
<article>
<div class="title">Title extends beyond container<br>And can grow in height</div>
<div class="content left">
<p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
</div>
</article>
<div class="sidebar right">
<p>items in this sidebar div should fall below the title div. Currently it starts on the same line.</p>
</div>
</div>
Issue is with your design and not CSS...if you plan your layout carefully you can avoid those negative margins altogether.Possible solution is suggested from my side is as below :
Redesign your markup and rename classes in more helpful manner :
working fiddle with updated markup
HTML
<div class="container clearfix">
<div class="left">
<div class="title">Title extends beyond container</div>
<div class="right">
<div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
</div>
<p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
</div>
</div>
CSS
html, body { /* always mention this in you CSS - rule of Thumb for CSS */
width:100%;
height:100%;
margin:0;
padding:0
}
.container {
width:100%; /* stretch div to take full width of parent - HTML, BODY*/
margin:0 auto;
clear:both;
padding:1em;
background:grey;
}
.left {
/* float:left;*/ /* not needed with updated layout :) */
width:100%;
}
.left .title {
/*margin:0 -500%;
padding:0 500%; /* nightmare is removed */ */
width:100%;
background: yellow;
}
.right {
float:right;
width:40%;
background:orange;
}
.clearfix:after {
content:"";
display: table;
clear: both;
}
Like Antoine says, you have to put the title, outside the left div.
.container {
width:600px;
margin:0 auto;
clear:both;
padding:1em;
background:grey;
}
.left {
float:left;
width:60%;
}
.title {
background: yellow;
}
.right{
float:right;
width:40%;
background:orange;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container clearfix">
<div class="title">Title extends beyond container</div>
<div class="left">
<p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
</div>
<div class="right">
<div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
</div>
</div>
You have to clear floats like:
.container {
width:600px;
margin:0 auto;
clear:both;
padding:1em;
background:grey;
}
.left {
float:left;
width:60%;
}
.left .title {
margin:0 -500%;
padding:0 500%;
background: yellow;
}
.right{
float:right;
width:40%;
background:orange;
clear: left;/*add clear left*/
margin-top: -60px;/*add negative top margin*/
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container clearfix">
<div class="left">
<div class="title">Title extends beyond container</div>
<p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
</div>
<div class="right">
<div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
</div>
</div>
Related
I am trying to build a react dashboard using Core UI's react template found here.
CSS
.top-stick {
position: sticky !important;
position: -webkit-sticky;
top: 5rem;
overflow-y: auto;
height: calc(100vh - 5rem);
}
JSX
<div className="animated fadeIn">
<Row className="app-scrollable-body">
<Col xs="12" sm="4" md="3" className="top-stick">
<Card className="toic">
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
<Col xs="12" sm="8" md="9">
<Card>
<CardHeader>Card title</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
</Row>
<div className="app-fixed-footer">
<span>
CoreUI © 2018
creativeLabs.
</span>
<span className="ml-auto">
Powered by{" "}
CoreUI for React
</span>
</div>
</div>
But on scroll the card does not seem to stick.
On inspecting the CSS is present. Also no overflow: hidden is there in the CSS Tree.
The issue is the use of overflow inside .app-body. It's a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element.
Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden (or even auto) thus the sticky behavior won't work.
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
If we remove the overflow, it will work as expected:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
If we keep the overflow within the wrapper but we move the scroll to the container element it will also work because there is no element with overflow set between the scroll and the sticky element:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
max-height:200px;
overflow:auto;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
Related: What are `scrolling boxes`?
I am trying to build a react dashboard using Core UI's react template found here.
CSS
.top-stick {
position: sticky !important;
position: -webkit-sticky;
top: 5rem;
overflow-y: auto;
height: calc(100vh - 5rem);
}
JSX
<div className="animated fadeIn">
<Row className="app-scrollable-body">
<Col xs="12" sm="4" md="3" className="top-stick">
<Card className="toic">
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
<Col xs="12" sm="8" md="9">
<Card>
<CardHeader>Card title</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
</Row>
<div className="app-fixed-footer">
<span>
CoreUI © 2018
creativeLabs.
</span>
<span className="ml-auto">
Powered by{" "}
CoreUI for React
</span>
</div>
</div>
But on scroll the card does not seem to stick.
On inspecting the CSS is present. Also no overflow: hidden is there in the CSS Tree.
The issue is the use of overflow inside .app-body. It's a bit tricky but there should be no overflow property set to any element between the element that has the scroll and the sticky element.
Here is a basic example to illustrate. The scroll is on the viewport and we have a wrapper with overflow:hidden (or even auto) thus the sticky behavior won't work.
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
If we remove the overflow, it will work as expected:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
If we keep the overflow within the wrapper but we move the scroll to the container element it will also work because there is no element with overflow set between the scroll and the sticky element:
.container {
display:flex;
align-items:flex-start;
border:2px solid green;
max-height:200px;
overflow:auto;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}
.wrapper {
overflow:hidden;
border:2px solid red;
}
<div class="wrapper">
<div class="container">
<div class="sticky"></div>
<div class="content"></div>
</div>
</div>
Related: What are `scrolling boxes`?
#wrapper should be a square with the width of the #text. Longer text should result in a larger square. Line breaks aren't necessary. How does this work in CSS? The HTML can be modified if needed.
http://codepen.io/anon/pen/XXOjJB
<div id="wrapper">
<div id="text">Lorem ipsum!</div>
</div>
This is how it should look like:
.wrapper-outer {
display: inline-block; /* make as wide as text */
vertical-align: top;
background-color: green;
}
.wrapper-outer:nth-child(2) {
background-color: tomato;
}
.wrapper-outer:nth-child(3) {
background-color: goldenrod;
}
.wrapper-inner {
height: 0; /* collapse the element */
padding: 50% 20px; /* top and bottom padding equal to half the width of parent; this gives us a height equal to the width of the parent */
}
.text {
transform: translateY(-50%); /* move text up to center; */
}
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="text">Lorem ipsum!</div>
</div>
</div>
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="text">A</div>
</div>
</div>
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="text">Lorem ipsum! Lorem ipsum! Lorem ipsum! Lorem ipsum!</div>
</div>
</div>
set padding in the child of wrapper
#text {
background-color: red;
display: inline-block;
padding-bottom: 50%;
padding-top: 35%;
}
check: https://jsfiddle.net/dLs9sj5y/
I have problem with position: absolute and floats...
As you can see in fiddle, when you resize browser, text from left side goes below the image, but what I want is to go above the image.
When I remove position: absolute on .image-ipad, it works like that, but in my project I need image to stick on left side, and text on right side (normal)
Code:
HTML
<section class="case eat-login">
<div class="row">
<h3 class="stick-right">Login Screen</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
<div style="clear:both;"></div>
</div>
</section>
CSS
.stick-right{
float:right;
clear:both;
}
.eat-login {
position: relative;
padding: 130px 0 130px;
clear: both;
}
.eat-login p{
text-align: right;
float: right;
clear: both;
width: 45%;
font-size: 15px;
font-family: "Proxima Nova";
color:#9e9d9d;
line-height: 25px;
}
img.image-ipad {
left:0px;
top:40px;
}
JSFiddle: http://jsfiddle.net/jt9jk2g0/6/
Thanks!
You could do it by using css #media queries for small screen size:
JSFiddle - DEMO
HTML:
<section class="case eat-login">
<div class="row">
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
<h3 class="stick-right">Login Screen</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div style="clear:both;"></div>
</div>
</section>
CSS:
.stick-right {
float:right;
clear:both;
}
.eat-login {
position: relative;
padding: 130px 0 130px;
clear: both;
}
img {
position: absolute;
}
.eat-login p {
text-align: right;
float: right;
clear: both;
width: 45%;
font-size: 15px;
font-family:"Proxima Nova";
color:#9e9d9d;
line-height: 25px;
}
#media (max-width: 500px) {
h3 {
margin-top:300px;
}
}
I am new to web design using tableless and I'm having problem positioning some elements on my page..
Here's the sample html: http://christianruado.comuf.com/sample.html alt text http://christianruado.comuf.com/images/screen.jpg
As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.
CSS:
.container {
width:88%;
}
#header {
background:#CCCCCC;
margin-bottom:5px;
padding-bottom:2px;
height:100px;
text-align:center;
}
#content {
background: #0099CC;
margin-bottom:5px;
}
#main {
margin: .5em 0 0 0;
text-align: left;
width:80%;
}
#right {
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
height: 100%;
min-height: 200px;
}
#right .top {
top:0;
display:block;
background-color:#CCCCCC;
}
#right .bottom {
bottom:0;
display:block;
background-color:#FFCCFF;
height:30px;
}
#center {
background:#00FF99;
padding: 5px 0 0 10px;
float:left;
}
#footer {
clear:both;
height:30px;
background-color:#CCFF33;
width:80%;
text-align:left;
}
HTML markup:
<div class="container showgrid">
<div id="header">
<h1>Header</h1>
</div>
<div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
<div id="main">
<div id="center">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Content here</p>
</div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
This is not exactly the answer to your problem, but it should get you on the right track.
Behold! The Holy Grail!
If that doesn't work, another technique you can use is to fake the column. This is done by vertically tiling a background image the width of your column behind where you want your column to be. It's not bad and can work in a pinch.
css :
#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer
{float:left;}
html :
div.header <br>
div.center + div.left <br>
div.footer + div.right
should be like this/