I have this layout:
<div id="container">
<div id="sidebar">
<div id="logo"></div>
<div id="box"></div>
</div>
<div id="content">
<div id="gallery">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
And here is the CSS:
#container {
background-color: black;
display:block;
position:absolute;
height:auto;
width:auto;
bottom:0;
top:0;
left:0;
right:0;
overflow:hidden;
background-size:auto 100%;
margin:50px;
}
#sidebar {
background-color: purple;
min-width: 250px;
width:250px;
max-width: 20%;
height:100%;
overflow:hidden;
float:left;
}
#logo {
height: 100px;
background-color: orange;
}
#box {
bottom: 20px;
font-family: sans-serif;
font-size: 10px;
color: grey;
margin: 20px;
padding: 10px;
background-color: white;
overflow-y: scroll;
text-align: justify;
}
#content {
display:inline;
width:75%;
margin-left: 300px;
padding: 0px;
margin:0px;
text-align: center;
background-color: green;
overflow-y: scroll;
}
#gallery {
margin-left: auto;
margin-right: auto;
display: table;
background-color: blue;
}
.thumb {
width: 200px;
height: 150px;
display: inline-block;
background-color: black;
margin: 20px;
border: 7px solid white;
overflow:hidden;
background-color: yellow;
}
I need the content of the #box and either #gallery or #content to be scrollable vertically.
Because my layout is responsible and the overflow of the #container is hidden I think there must be some problem with these features.
Here I created a jsFIddle to illustrate the problem.
You can add this in CSS #box
max-height : 100px ; /*for example*/
EDIT :
for you can use
overflow: auto;
in DIV you want to scroll
Related
I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at).
Thank you in advance :)
Adding code as you asked :) here is html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header></header>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body>
</html>
and here is css
#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;
}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;
}
if i make right div float:none then it moves the middle div
You need to use media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Enjoy
With media queries and flex.
Here is a snippet, (click on run then full screen).
<div class="flex">
<div class="sub c">1</div>
<div class="sub c">2</div>
<div class="doge c">3</div>
</div>
.flex{
display: flex;
flex-wrap: wrap;
}
.c{
height:20px;
width:20px;
border: 1px solid green;
box-sizing: border-box;
}
#media(max-width:600px){
.sub{
width: 50%;
}
.doge{
width: 100%
}
}
<div class="flex">
<div class="sub c"></div>
<div class="sub c"></div>
<div class="doge c"></div>
</div>
Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,
To perform what you are trying to do you will need to explore Media Queries.
Here is an example of what you are trying to do: JSFiddle
HTML
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
<div class="bottom">
Bottom content flexible width
</div>
</div>
CSS
.container {
height: 100px;
overflow: hidden;
}
.left {
float: left;
background: #00FF00;
width: 25%;
overflow: hidden;
height: 100%;
}
.right {
display: inline-block;
width: 50%;
background: #0000ff;
height: 100%;
}
.bottom {
float: right;
background: #ff0000;
display: inline-block;
width: 25%;
height: 100%;
}
#media only screen and (max-width: 900px) {
.container {
height: auto;
overflow: hidden;
}
.left {
float: left;
background: #00ff00;
width: 25%;
overflow: hidden;
height: 100px;
}
.right {
float: none;
width: 75%;
background: #0000ff;
height: 100px;
}
.bottom {
position: relative;
float: none;
background: #ff0000;
width: auto;
overflow: hidden;
height: 50px;
display: inherit;
}
}
Good luck!
It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.
As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.
Here's my take on it.
/* Styles go here */
body,html{
margin: 0;
padding: 0;
height:100%;
}
.wrapper{
height:100%;
width:100%;
padding: 20px;
}
.div1{
height:100%;
width:30%;
float:left;
background-color:orange;
}
.div2{
height:100%;
width:30%;
float:left;
margin-left:2%;
background-color:red;
}
.div3{
height:100%;
width:30%;
margin-left:2%;
float:left;
background-color:green;
}
#media(max-width:900px){
.wrapper{
height:100%;
width:100%;
clear:both;
}
.div1{
height:70%;
width:49%;
float:left;
background-color:orange;
}
.div2{
height:70%;
width:49%;
float:left;
background-color:red;
}
.div3{
height:30%;
width:100%;
float:left;
margin:20px 0 20px 0;
background-color:green;
}
}
<div class="wrapper">
<div class="div1"><p></p></div>
<div class="div2"><p></p></div>
<div class="div3"><p></p></div>
</div>
I have a problem with my CSS.
I am working on a website which I want to make my own CSS for, I tried to make it myself but I can not figure it out.
I am aiming for a website that looks like this
But currently looks like this:
I tried everything I could. I am using some CSS right now but it isn't working how I want it too.
html {
background: #ECF0F1;
}
.sidebar {
width: 20%;
height: 100%;
float: left;
background: #043D5D;
position: fixed;
top: 50px;
left: 0;
}
.sidebar p{
margin-left: 10px;
color: #FFF;
}
.nav{
float: left;
position: fixed;
width: 100%;
height: 50px;
background: #043D5D;
top:0;
left:0;
}
.nav .logo img{
height: 40px;
}
.content{
width: 80%;
height: 100%;
float: left;
top: 55px;
position: fixed;
margin-left: 21%;
}
Fiddle: https://jsfiddle.net/bqgpn6hj/
Is there a better way to do this? Thanks in advance!
Check out my jsfiddle here: https://jsfiddle.net/bqgpn6hj/1/
I hope it can be usefull for you.
Code below:
body {
background: #ECF0F1;
}
.clear {
clear:both;
}
.nav {
width:100%;
float: left;
background:red;
}
.logo{
width: 20%;
float:left;
}
.search {
width:78%;
float:left;
padding: 10px 1%;
text-align:right;
}
.sidebar {
width: 16%;
background: green;
float:left;
padding: 2% 2%;
}
.content {
width: 80%;
float:left;
position:relative;
background: yellow;
height: 466px;
}
.subbar {
background: gray;
height: 200px;
}
.content .bottom {
position:absolute;
bottom:0px;
background: blue;
width:90%;
padding: 5%;
}
And HTML
<body>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/40x40">EasyMusic
</div>
<div class="search">
<input type="text">
</div>
</div>
<div class="clear"></div>
<div class="sidebar">
<div class="subbar" id="1">
<p>Sidebar, links here</p>
</div>
<div class="subbar" id="2">
<p>Bottom</p>
</div>
</div>
<div class="content">
<p>Content, everything here</p>
<div class="bottom">
bottom
</div>
</div>
<div class="clear"></div>
</body>
This question has been asked may times but I am still having no luck with it. I have a container that loads thumbnails into. I am trying to have the thumbnails' margins set to auto but I have has no luck with this.
The thumbs will center inside the container but the margins will not.
.align-contents{
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.profile.align{
display: inline-block;
position:relative;
margin:auto auto;
}
.profile{
text-align:center;
height:auto;
}
.profile.align .PP{
width:60px;
height:60px;
border:solid 3px #FFF;
-moz-border-radius:200px;
-webkit-border-radius:200px;
border-radius:200px;
position:relative;
z-index:1;
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-image:url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status{
width:20px;
height:20px;
right:0px;
position:absolute;
bottom:0px;
border:solid 3px #FFF;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
background:blue;
z-index:2;
}
JS Fiddle
The thumbnails center in side the parent but is there a way I can set margin:auto so have the space between the divs set automatically
Flexbox can do that.
.align-contents {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
border: 1px solid red;
display: flex;
justify-content: space-between;
}
.profile.align {
position: relative;
border: 1px solid grey;
}
.profile {
text-align: center;
height: auto;
}
.profile.align .PP {
width: 60px;
height: 60px;
border: solid 3px #FFF;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
position: relative;
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status {
width: 20px;
height: 20px;
right: 0px;
position: absolute;
bottom: 0px;
border: solid 3px #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: blue;
z-index: 2;
}
<div class="align-contents">
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
<div class="profile align">
<div class="PP"></div>
<div class="status"></div>
</div>
</div>
The problem might be margin:auto auto; instead of margin:0 auto; in .profile-align. If that's not the case try changing it to margin: 50%;
I have a h1 and a p inside a div with display:flex.
The two are positioned side by side, but they have to be under each other.
It is about the elements with class jktitre and class jktxt inside (div)jkpage.
jkpage div is flex with jksidebar (side by side)
I did not expect that the text elements somehow inherit the flex property. Or something like that.
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
The CSS:
body{
background-color: lightgrey;
}
.jktitre{
margin-left:5%;
float:left;
display: block;
}
.jktxt{
margin-left:5%;
padding:10px;
float:left;
}
.jkrow{
width:100%;
display:flex;
}
.jkheader{
margin-top:20px;
height:150px;
width:100%;
background-color: #2d18a4;
}
.jknavbar{
height:45px;
width:100%;
background-color: black;
}
.jkpage{
height:400px;
width:75%;
background-color: #e7e7e7;
display:flex;
}
.jksidebar{
height:400px;
width:25%;
background-color: darkslategrey;
display:flex;
}
.jkfooter{
height:150px;
width:100%;
background-color: blue;
margin-bottom: 20px;
}
Add flex-direction: column to the parent element to display them under each other. The default value for it is row which shows the child elements from left to right(Side by side)
body {
background-color: lightgrey;
}
.jktitre {
margin-left: 5%;
float: left;
display: block;
}
.jktxt {
margin-left: 5%;
padding: 10px;
float: left;
}
.jkrow {
width: 100%;
display: flex;
}
.jkheader {
margin-top: 20px;
height: 150px;
width: 100%;
background-color: #2d18a4;
}
.jknavbar {
height: 45px;
width: 100%;
background-color: black;
}
.jkpage {
height: 400px;
width: 75%;
background-color: #e7e7e7;
display: flex;
flex-direction: column;
}
.jksidebar {
height: 400px;
width: 25%;
background-color: darkslategrey;
display: flex;
}
.jkfooter {
height: 150px;
width: 100%;
background-color: blue;
margin-bottom: 20px;
}
<div class="container">
<div class="jkheader"></div>
<div class="jknavbar"></div>
<div class="jkrow">
<div class="jkpage">
<h1 class="jktitre">BLABLABLA</h1>
<p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
</div>
<div class="jksidebar"></div>
</div>
<div class="jkfooter"></div>
</div>
Help me please, I can't understand result of my simply code:
<div id="wrapper-top">
<div class="wrapper">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
and css file:
#wrapper-top
{
width: 100%;
background-color: gray;
}
.wrapper
{
margin: 0 150px 0 150px;
}
#logo
{
width: 100%;
height: 50px;
}
#menu
{
width: 100%;
height: 50px;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
Why divs .block-3-1, .block-3-2 and .block-3-3 seem to be outside of div .wrapper.
I don't expected that because I want this blocks inside .wrapper.
http://jsfiddle.net/4yvLv853/1/
You need to contain the floated items in the #content div
One method (there are others as detailed here) is to use overflow:hidden
#content
{
width: 100%;
background-color: white;
overflow: hidden;
}
JSfiddle Demo
use clearfix
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
#wrapper-top
{
width: 100%;
background-color: gray;
border: solid blue 1px;
}
.wrapper
{
margin: 0 150px 0 150px;
border: solid brown 1px;
}
#logo
{
width: 100%;
background-color: white;
}
#menu
{
width: 100%;
background-color: navajowhite;
}
#content
{
width: 100%;
background-color: white;
}
.block-1-1
{
width: 100%;
text-align:center;
background-color: pink;
}
.block-3-1
{
float:left;
width:33%;
text-align:center;
background-color: violet;
}
.block-3-2
{
float:left;
width:34%;
text-align:center;
background-color: blueviolet;
}
.block-3-3
{
float:left;
width:33%;
text-align:center;
background-color: yellowgreen;
}
<div id="wrapper-top">
<div class="wrapper clearfix">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">block-1-1</div>
<div class="block-3-1">block-3-1</div>
<div class="block-3-2">block-3-2</div>
<div class="block-3-3">block-3-3</div>
</div>
</div>
</div>
Try
<div id="wrapper-top">
<div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">
<div class="block-1-1">text</div>
<div class="block-3-1">text</div>
<div class="block-3-2">text</div>
<div class="block-3-3">text</div>
</div>
</div>
</div>
I think the wrapper height is too small.
Alternatively, if you want the .wrapper div to stay the height it is, try changing the #content to
#content {
overflow-y: scroll;
overflow-x: hidden; //this gets rid of the pesky bottom scrollbar
}