I have this two column layout, made with display: table and display: table-cell, and I want to put in the second column a div with horizontal scroll, but the table expands itself and the scroll goes to the entire page rather then the div.
HTML
<div class="wrapper">
<div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum.
</div>
<div id="two">
<div id="horizontal">
<img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />
</div>
</div>
</div>
CSS
.wrapper {
display: table;
table-layout: fixed;
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
display: table-cell;
width: 100%;
}
#horizontal {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
Here is the jsfiddle:
http://jsfiddle.net/cUCvY/2597/
In this example I'd like to have the horizontal scroll active on the div with the images inside and not on the page.
Hope i understood correctly:
.wrapper {
display: table;
table-layout: fixed;
width:100%
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
}
#horizontal {
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
http://jsfiddle.net/cUCvY/2600/
Related
I'm trying to create a 3-row layout (header, content, footer) using:
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%; //keep this to prevent content overflowing outside container
grid-gap: 2em;
grid-template-areas:
"header"
"content"
"footert";
I'm using align-self: end to have the footer always be at the bottom of the page.
The problem is, I want to make the footer sticky, so as the user scrolls up or down along the content, the footer always remains visible at the bottom.
If I use position: absolute or fixed though, this seems to break the footer out of the grid. Content continues to scroll over it like it wasn't there, and sometimes it also reduces the width of footer items.
Any ideas how to do this?
You could use position: sticky along with ::before pseudo-element to always keep some gap between the content and the footer.
Push the pseudo-element above the footer by translating it in negative Y-direction and then give it a background color same as that of the body. That will make it look like there's a gap between the footer and the content.
body {
margin: 0;
background: #fff;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: 30px 400px 30px;
grid-gap: 1em;
}
.header {
background: #22f;
}
.content {
background: #fc9;
}
.footer {
background: #ee1;
position: sticky;
bottom: 0;
}
.footer::before {
content: '';
position: absolute;
background: #fff;
width: 100%;
height: 1em;
transform: translateY(-100%);
}
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
Is this? Just add position: sticky and bottom:0. Also grid area is not needed.
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1500px auto;
grid-template-columns: 100%;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
}
.footer {
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
You can try like below:
.container {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-gap: 2em;
}
.header {
background: pink;
height: 50px;
}
.content {
background: aqua;
font-size:40px;
}
.footer {
box-shadow:0 -2em 0 0 #fff;
background: sandybrown;
height: 50px;
position: sticky;
bottom: 0;
}
body {
margin:0;
}
<div class="container">
<div class="header"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend enim sapien. Proin facilisis ornare mi, ut eleifend odio dictum vestibulum. Pellentesque arcu ex, vehicula eget porta at, maximus ac massa. In hac habitasse platea dictumst. Sed ultrices et massa a ultrices. Pellentesque scelerisque, neque vitae semper bibendum, risus dolor suscipit felis, id porttitor nisi justo et lectus. Mauris interdum ligula imperdiet nunc ornare, </div>
<div class="footer"></div>
</div>
Hi I'm struggling with this issue.
Desktop:
Div A
Div B
But in responsive the divs have to change their position like this:
Responsive:
Div B
Div A
I made a jsfiddle:
#a {
height: 50px;
width: 100%;
background-color: red;
}
#b {
height: 50px;
width: 100%;
background-color: green;
}
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
Is this possible?
You can use grid-row from CSS grid layout
section {
display: grid;
grid-auto-rows: minmax(50px, auto)
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
grid-row: 1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
Alternatives:
use order with also CSS grid layout
section {
display: grid;
grid-auto-rows: minmax(50px, auto)
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
order: -1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use column-reverse from flexbox layout (as suggested by #G-Cyr in comments below)
section {
display: flex;
flex-direction: column;
}
div {
height: 50px;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
section {
flex-direction: column-reverse;
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use flex-wrap/wrap-reverse with flexbox layout
section {
display: flex;
flex-wrap: wrap
}
div {
height: 50px;
flex: 0 100%
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
section {
flex-wrap: wrap-reverse
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
use order with flexbox layout
section {
display: flex;
flex-direction: column;
}
div {
height: 50px;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#media (max-width:768px) {
#b {
order: -1
}
}
<section>
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
</section>
If you need to support older browsers, you can do it this way as well. But this only works if the elements have a fixed height, otherwise you will have to play some other games.
#a {
height: 50px;
width: 100%;
background-color: red;
}
#b {
height: 50px;
width: 100%;
background-color: green;
}
#media (max-width:768px) {
#a {
position: relative;
top: 50px;
}
#b {
position: relative;
top: -50px;
}
}
<div id="a">
div 1
</div>
<div id="b">
div2
</div>
Here is another answer with 2 selector and a single rule :transform:scale(-1);
/* target the container and its direct-child */
div,
div>* {
transform: scale(-1);
}
#media (min-width:768px) {
div,
div>* {
transform: scale(1);
}
#a del {
text-decoration: none;
}
#a ins {
display: none;
}
<div>
<h1 id="a">HTML Ipsum Present<del>s</del><ins>ed</ins></h1>
<p id="b"><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
</div>
image
So I have a div full of main article content with a width of 600px and I would like to have these links as well at the side, I imagine it would be in the same div but I can't seem to get the right effect and need some help with this.
Thanks a lot.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="pagewrap">
<div id="logos">
<img id="logo" src="img/logo.png">
<h1 id="name">Company Name</h1>
<img class="socialmedia" src="img/facebook.png">
<img class="socialmedia" src="img/twitter.png">
<img class="socialmedia" src="img/googleplus.png">
</div>
<div id="header">
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li>Home</li>
<li>eBooks</li>
<li>Magazines</li>
<li>Movies</li>
<li>Help</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<p id="article-information">posted on 15 May 2015 by Author</p>
<img id="main-article-image" src="img/placeholder.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
justo. Donec interdum vestibulum libero. Nam laoreet dui sed
magna. Nam consectetuer mollis dolor. Aenean ligula.
liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
<div id="more-links-list">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
</div>
<div id="sidebar">
<h3>A guide to snoopsetting</h3>
<img class="aside-images" src="img/placeholder.png">
<h3>Welcome to the Surveillance State</h3>
<img class="aside-images" src="img/placeholder.png">
</div>
<div id="footer">
</div>
</div>
</bo
dy>
CSS
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#logo {
width: 20%;
height: auto;
position: relative;
right: 25px;
top: 50px;
}
#name {
position: relative;
bottom: 60px;
left: 170px;
font-style: italic;
font-size: 55px;
height: 30px;
}
.socialmedia {
position: relative;
width: 8%;
bottom: 155px;
height: auto;
float: right;
}
#main-article-image {
width: 600px;
height: 450px;
}
.aside-images {
width: 340px;
height: 255px;
}
#more-links-list {
display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#logos {
height: 160px;
}
#header {
height: 50px;
}
#content {
position: relative;
width: 600px;
float: left;
text-align: justify;
}
#more-links-list {
float:right;
padding: 10px;
margin-left:10px;
margin-bottom:10px;
background:#ddd;
}
#sidebar {
width: 340px;
float: right;
position: relative;
bottom: 34px;
}
#footer {
clear: both;
width: auto;
height: 100px;
}
#article-information {
margin: 0px;
}
h2 {
margin: 0px;
padding-top: 56px;
}
h3 {
margin: 0px;
padding-top: 38px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
width: 16.65%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
margin-bottom: 5px;
}
#footer {
background-color: #eee;
border-style: solid;
border-width: 1px;
}
You can do this by placing a div with float:right; style inside the div that holds your content (article text), I created this example for you:
https://jsfiddle.net/davoscript/tjf56jLw/4/
<p>
<!-- The floating box -->
<div id="more-links-list" style="float:right;">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
<!-- The article content -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>
Let me know if that works.
You should probably put the links into an <aside>. This could go below the code for the text in your div and then styled with either a float or positioning. It would then be a matter of getting your styling to allow the text to wrap under the links.
<article style="max-width:500px;" class="post" id="post-<?php the_ID(); ?>">
<div class="circle">
<div class="month"><?php the_time(d) ?></div>
<div class="year"><?php the_time('M Y');?></div>
</div>
<div class="thot">
<h4><?php the_title(); ?></h4>
<?php the_excerpt('Read More'); ?>
<hr />
</div>
</article>
<style>
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: white;
color:black;
line-height:35px;
}
.month{
font-size:60px;
font-weight:bold;
}
.year{
font-size:20px;
}
</style>
What is the best way to move the "thot" div next to the "circle" div?
("Cirle") [POST aka "thot div"]
Link http://ramovamusic.com/?page_id=165
Example: ramovamusic.com/example.jpg
So now that I understand your question. The problem is you have a set width on your article tag (500px) this needs to be increased so you can float your class circle and class thot. that way they will be next to each other.
Here is a working demo as to what I am talking about New Demo Working
Notice I removed the width on the article, added float right and width to class thot and float left on the circle. And now they are on the same line. You need to fiddle with it a bit to align it to your linking.
html:
<article style="" class="post" id="post-171">
<div class="circle">
<div class="month">20</div>
<div class="year">Mar 2015</div>
</div>
<div class="thot">
<h4>test 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus urna, mollis in nibh nec, fermentum rhoncus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ante arcu, laoreet ut efficitur vel, ornare sed risus. Cras eget interdum erat, finibus facilisis justo. Nam lorem mi, laoreet at dui non, rutrum semper felis. <a class="read-more" href="http://ramovamusic.com/?p=171">Read More</a></p>
<hr />
</div>
</article>
css:
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: red none repeat scroll 0% 0%;
color: #000;
line-height: 35px;
float:left;
}
.thot{
float:right;
width:60%;
}
Add float:left to your circle div and some right margin, and for the .date class, add:
.date {
transform: translateY(-50%);
width: 165px;
top: 50%;
position: relative;
}
for .thot class add:
.thot {
float:left;
width: 300px; /* or whatever width works for you */
}
and finally you need to clear floats:
.post:after {
content: '';
display: table;
clear:both;
}
Here you go, better to apply the circle in a span to keep all the text together! Otherwise it can end up getting tricky like you saw!
https://jsfiddle.net/75tn8yps/3/
div{
float:left;
}
span.circle{
border: 1px solid red;
border-radius: 100%;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 10px;
line-height: 95px;
text-align:center;
}
p{
text-align:center;
margin-top:40px;
}
Demo In Fiddle
I did change few things in the CSS File
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
color:white;
border-radius: 50%;
background: black;
color:black;
position:absolute;
}
.month{
font-size:40px;
font-weight:bold;
color:white;
line-height:90px;
}
.year{
font-size:20px;
color:white;
line-height:60px;
}
.thot{
border:1px solid black;
float:right;
width: calc(100% - 180px);
height:200px;
position:relative;
}
The new CSS. Check The fiddle.
i got a tricky situation here. im trying to center 3 divs inside my footer and they need to have dynamic width, like min-width.
[cotainer [first] [second] [third] /container]
my setup is this
<footer>
<div id="container">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
</footer>
footer #container { width: 800px; margin: 0 auto; }
#container #first,#container #second,#container #third
{
float: left;
min-width: 200px;
height: 25px;
background: /* image url */
padding: 4px;
margin: 0 20px 0 0;
}
#container #third { margin-right: 0; }
You should use display: table; and table-cell.
#container {
display:table;
}
#first, #second, #third {
display: table-cell;
width: 200px;
height: 40px;
border: 1px dashed #000;
}
Demo available here.
set container to display as:table and set it's margin to 0 auto.
#container {
display:table;
margn:0 auto;
whitespace: nowrap;
}
#first, #second, #third {
min-width: 200px;
float:left
...
}
Demo: http://jsfiddle.net/AZ4yT/1/
Edit: It gets left aligned in IE. so you might wanna use a workaround for that
What about using display: inline-block? You can see a jsFiddle of it here:
http://jsfiddle.net/S7bKT/1/
HTML
<div id="container">
<div id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam scelerisque euismod auctor. Sed pulvinar nulla eu
lorem iaculis ultrices. Mauris
</div>
<div id="second">Lorem ipsum dolor sit amet</div>
<div id="third">Sed pulvinar nulla eu lorem iaculis ultrices</div>
</div>
CSS
#container {
width: 500px;
background: #dedede;
margin: 0 auto;
text-align: center;
}
#first, #second, #third {
display: inline-block;
min-width: 50px;
max-width: 120px;
min-height: 100px;
zoom: 1; /* Fix for IE */
_display: inline; /* Hack for IE */
margin-right: 20px;
vertical-align: top;
}
#first {
background: #f00;
}
#second {
background: #0f0;
}
#third {
background: #00f;
}
#container div:last-child {
margin-right: 0;
}