I have a chat nav bar with divs for different users in which there is a photo of the user. I want the photo to be a circle. I am doing it with padding-bottom and width, but the problem comes when the width:height ratio of the screen gets bigger the circle gets larger than the nav , because of the padding-bottom being calculated by the width. What is best approach to make this responsive for all screens?https://jsfiddle.net/n386ejzf/
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
}
.chats{
height: 20%;
width: 100%;
background: red;
}
.chat{
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img{
width: 10%;
padding-bottom: 10%;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Use viewport height units.
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
.chats {
height: 20%;
width: 100%;
background: red;
}
.chat {
float: left;
width: 20%;
height: 100%;
background: yellow;
display: flex;
align-items: center;
}
.img {
margin: auto;
width: 10vh;
height: 10vh;
background: blue;
border-radius: 50%;
}
<div class="chats">
<div class="chat">
<div class="img">
</div>
</div>
</div>
Related
I need to center a main div and append a fixed menu to the right of that item. I need the main div to stay in the center and the right menu to "fix" to the centered div.
Currently, I'm using flex to center the div, but this is resulting in both items centering (meaning the main div is not truly in the center).
This is the desired layout:
Current layout:
The code appears as below (I'm using React with styled components):
Container:
const DivContainer = styled.div`
display: flex;
justify-content: center;
position: relative;
z-index: 60;
width: 100%;
`;
Main Div:
const MainDiv = styled.div`
width: 300px;
padding: 35px 15px;
`;
Menu div:
const MenuDiv = styled.div`
display: flex;
cursor: pointer;
flex-shrink: 0;
flex-direction: column;
margin-top: 85px;
order: 10;
`;
This is rendered as the below:
<DivContainer>
<MainDiv />
<MenuDiv />
</DivContainer>
You could put the sidebar inside the container and push it out with a negative margin right
body,
html {
height: 100%;
margin: 0;
}
.container {
height: 100%;
width: 100%;
border: 2px solid yellow;
border-radius: 5px;
box-sizing: border-box;
margin: 5px;
display: grid;
place-items: center;
}
.center {
width: 200px;
height: 200px;
border: 2px solid yellow;
border-radius: 5px;
}
.sidebar {
width: 50px;
height: 200px;
outline: 2px solid magenta;
border-radius: 5px;
/* important */
float: right;
margin-right: -50px;
}
<div class="container">
<div class="center">
content
<div class="sidebar">
sidebar
</div>
</div>
</div>
ps: for the snippet click full page
You could just wrap it in a zero width div, with overflow visible:
#wrapper {
display: flex;
border: solid 3px green;
justify-content: center;
}
#main {
border: solid 2px orange;
width: 50%;
}
#no-width {
width: 0;
overflow: visible;
}
#menu {
width: 100px;
border: solid red 2px;
}
<body>
<div id="wrapper">
<div id="main">
Centered
</div>
<div id="no-width">
<div id="menu">
"Zero" width div, so doesn't affect centering
</div>
</div>
</div>
</body>
Wrap it in another div with same width as main div and set min-width for its child
.wrapper {
display: flex;
width: 300px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.main {
width: 300px;
min-width: 300px;
min-height: 200px;
background-color: aquamarine;
}
.menu {
width: 80px;
min-width: 80px;
min-height: 200px;
background-color: cadetblue;
position: relative;
}
<div class="container">
<div class="wrapper">
<div class="main"></div>
<div class="menu"></div>
</div>
</div>
The ul tag does not come after the previous div in the same line, (the one with the class Logo).
I want to show the ul tag after the logo tag, in the same line. However, the ul goes under the line that I want to show it in.
body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul></ul>
<div></div>
<div></div>
</nav>
</header>
</body>
ul and div elements are block-level, meaning they take 100% width and will stack on top.
In order to have them beside each other you will need to use floats, inline-block, flexbox, or grid.
I would suggest flexbox for this case.
Add display: flex to the direct parent element
body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
display: flex;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul><li>List Here</li></ul>
</nav>
</header>
</body>
just add display:inline-block to both the logo and the ul
body {
margin: 0px;
/* direction: rtl; */
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
display:inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
display:inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul></ul>
<div></div>
<div></div>
</nav>
</header>
</body>
flexbox is really the way to go. You need to add margin-top:100px to the ul
body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
display: flex;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
margin-top:100px;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul><li>List Here</li></ul>
</nav>
</header>
</body>
How I can make a box to be fixed within a div with scroll?
I'm trying like this:
HTML:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
background: black;
}
But the box is going along with the page, not only within the div.
What am i doing wrong here??? Can someone show me the way?
Thank you guys.
EDIT
Example -> https://jsfiddle.net/kzhuh7sv/embedded/result/
Try this solution https://jsfiddle.net/yyt8eope/2/
I added a div that wraps both the container div and the class='test' div at the same level so the test div can be absolute inside the wrapper and be always at a fixed position
<div id="wrapper">
<div class="main">
<div class="scroll-container">
<div class="container">
<div class="container2">
</div>
</div>
<div class="test">Fixed inside scroll container</div>
</div>
</div>
</div>
CSS:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.scroll-container{
position: relative;
height: 500px;
}
.container {
border: 1px solid green;
position: relative;
/*width: 946px;*/
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 500px;
height: 200px;
color: white;
position: absolute;
top:0;
left: 50%;
margin-left: -250px;
background: black;
z-index: 1;
}
Try getting rid of 'position: fixed;' and add this 'overflow: scroll;'.
JSFiddle.
EDIT
Changed the JSFiddle, has been updated.
You can't do it with position: fixed since it always ties to the viewport. You want it fixed within it's context.
http://jsfiddle.net/zq1m49wf/2/
The black box stays in place as container3 scrolls
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="container3"></div>
</div>
<div class="test"></div>
</div>
</div>
</div>
#wrapper {
position: relative;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.container {
position: relative;
height: 500px;
padding-top: 200px;
}
.container2 {
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container3 {
height: 1500px;
}
.test {
width: 500px;
height: 500px;
bottom: 0;
background-color: #000000;
position: absolute;
}
I want to create container div that has width between 800px to 1000px.
Inside, it has two div and want to fix left div to 250px.
For the right div I want it make width-resize automatically
jsfiddle examle
HTML
<div style="width: 100%;">
<div class="container">
<div class="left">
Left div<br />(fixed to 250px)
</div>
<div class="right">
Right div<br />(width fit to blue area left)
</div>
</div>
</div>
CSS
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
float: left;
}
This will do it. It uses calc (http://jsfiddle.net/vn84nm30/6/)
.right {
width: calc(100% - 250px);
background-color: #F00;
height: 200px;
float: left;
}
You could simply add display: flex to the parent, .container element:
Updated Example
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
display: flex;
}
Alternatively, you could set the display of the parent, .container element to table, and then set the children elements to display: table-cell. If you want the children elements to respect the width, set table-layout: fixed on the parent element:
Alternative Example Here
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
display: table;
table-layout: fixed;
}
.left {
width: 250px;
height: 200px;
background-color: #0F0;
display: table-cell;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
display: table-cell;
}
Solution
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width:100%;
background-color: #F00;
height: 200px;
}
<div style="width: 100%; display: table; border-collapse: collapse; width: 100%; min-width: 800px; max-width: 1100px;">
<div class="container">
<div class="left">Left div
<br />(fixed to 250px)</div>
<div class="right">Right div
<br />(width fit to blue area left)</div>
</div>
</div>
You can try to remove float:right on the red div :D or
Maybe like this: http://jsfiddle.net/vn84nm30/8/
Used table features ;)
top div : display: table;
container : display: table-row
removed float left
the height is decided by parent :D
Remove float: left from the right element.
.container {
width: 100%;
min-width: 800px;
max-width: 1100px;
background-color: #06F;
margin: 0 auto;
height: 420px;
padding: 10px 0px;
}
.left {
width: 250px;
float: left;
height: 200px;
background-color: #0F0;
}
.right {
width: 100%;
background-color: #F00;
height: 200px;
}
<div style="width: 100%;">
<div class="container">
<div class="left">
Left div<br />(fixed to 250px)
</div>
<div class="right">
Right div<br />(width fit to blue area left)
</div>
</div>
</div>
Is very simple:
HTML:
<div>
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
CSS:
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
Fiddler: http://jsfiddle.net/H2c6g/
How I do for the div use the 100% of height?
You can use width: 100% on the inner <section>s as long as you also define a height on the wrapping <div>. Try this CSS:
div { height: 400px; background: #ccc; }
.left { height: 100%; width: 200px; float: left; background: #c00; }
.right { width: 300px; float: right; height: 300px; background: #00c; }
.clear { clear: both; }
Working Fiddle
Just use:
body,html {
height: 100%;
}
And make the div's height: 100%
As seen in this updated fiddle
Hmm not sure if this is what you are trying to do
<div class="outer">
<section class="left">
</section>
<section class="right">
</section>
<div class="clear"></div>
</div>
div, section { border: 1px solid #000; }
.left { height: 100%; width: 200px; float: left; height: 200px; }
.right { width: 300px; float: right; height: 300px; }
.clear { clear: both; }
div.outer{
position:absolute;
height:100%;
}
You can use flexbox if you don't need to support older IE browsers.... Check it out below.
display:flex
Notice that I am only setting a height for the .left class the .right class matches the height.
http://jsbin.com/curoruni/1/edit
Here is how I would do it, not using any floats
<div id="wrapper">
<div class="left"></div><div class="right"></div>
</div>
And
#wrapper {
border: 1px solid red;
height: 500px;
width: 100%;
overflow: hidden;
position: absolute; top: 0; left: 0;
}
.left {
position: relative;
background-color: yellow;
display: inline-block;
height: 100%; width: 50%;
margin: 0px;
}
.right {
position: relative;
background-color: blue;
display: inline-block;
width: 50%; height: 100%;
margin: 0px;
}
http://jsfiddle.net/fU379/