I'm trying to make a div table with cells. Inside the cells I'd like to put another div which has circle shape. The problem which I've trying to solve is that I would like that when I resize the window of the browser, the div circle adapts to it and keeps the proportion.
As you can see in the images when I reduce the size of the window the size of the circle it's ok, but when the window it's in normal size the cirrcle it's too big and I don't know how to limit it.
https://gyazo.com/ebd2f44131dcc2e84b9d0e5cdaf12aed
reduced window
https://gyazo.com/6b8889f2d6c59b74bc7036061cf62627
https://gyazo.com/afb97aa2093e7331ae100420e1bac9c9
stylesheet.css
body,html{
height: 100%;
width: 100%;
}
.Table{
display: table;
position: relative;
margin: 0 auto 0 auto;
//border:solid;/////////////////////////////////////
// width: 100%;
// height: 100%;
background-color: yellow;
table-layout: fixed;
width:80%;
height:80%;
}
.Row{
display: table-row;
}
.Cell{
display: table-cell;
// border: 5px;
border:solid;
// border-color: black;
// border-radius: 25px;
//background-color: blue;
width: 33%;
height: 33%;
}
.circle {
width: 100%;
height:0;
padding-bottom: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="estils.css">
</head>
<body>
<div class="Table">
<div class="Row">
<div class="Cell" >eeee</div>
<div class="Cell" >aaaaa</div>
<div class="Cell" >iiii</div>
</div>
<div class="Row">
<div class="Cell" >eeee</div>
<div class="Cell" >aaaaa</div>
<div class="Cell" >iiii</div>
</div>
<div class="Row">
<div class="Cell" >
<div class="circle" ></div>
</div>
<div class="Cell" >
<div class="circle" ></div>
</div>
<div class="Cell" >
<div class="circle" ></div>
</div>
</div>
</div>
</body>
<html>
You might want to use media-queries for that.
#media (min-width: 1000px)
.circle {
width: 100px;
height: 100px;
display: block;
margin: 0 auto;
padding: 0;
}
would do the trick. But the #media (max-width: 1000px) depends on the browser window's width.
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I have the following problem:
I want to create a website where 2 divs fill out the entire screen, no matter what size the screen is. Generally, it works but only if I don't use padding or margin. If I use either one of those the scrollbar shows because of the div's need more space.
I tried to lower the height percentage to accommodate the padding/margin at the top and the bottom. For example, if I had an original size of 70% and I wanted a 5% margin/padding I changed it to 60% but it still couldn't fit the screen.
I know I could just hide the scrollbar but I want the divs to be exact. Is there a way to do this?
In my case, I would like the div with the topper class to be 25% and the div with the lower class to be 75% of the screen.
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/stylesheet.css">
<title>Home - Planner</title>
</head>
<body>
<div class="container">
<div class="topper">
<div class="header">
<h1>HOME</h1>
<hr class="short-hr">
<h3>Planner</h3>
</div>
<hr class="wide-hr">
</div>
<div class="lower">
<div class="card left">
<h2>Einkaufsliste</h2>
</div>
<div class="card right">
<h2>Kalender</h2>
</div>
<div class="card left">
<h2>ToDo - List</h2>
</div>
<div class="card right">
<h2>Einstellungen</h2>
</div>
</div>
</div>
</body>
</html>
stylesheet.css:
html, body {
height: 100%;
margin: 0px;
}
* {
text-align: center;
margin: auto;
}
.container {
height: 100%;
}
.topper {
height: 25%;
}
.header {
width: 25%;
height: 100%;
}
.lower {
height: 75%;
}
.card {
height: 35%;
width: 40%;
margin: 2.5%;
border: 2.5pt solid #000000;
border-radius: 15pt;
}
.left {
float: left;
}
.right {
float: right;
}
What you're trying to do, is pretty easy to achieve. Simply change the css of your class .container. Remove thei height of 100% and give it an absolute position with top, bottom, left and right of 0.
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
with that CSS change, the container will take all available space. However note, that such use is a bad habbit as it will only be semi-responsive. you need to have plenty breakpoints to prevent an overflow with small screens.
* {
text-align: center;
margin: auto;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.topper {
height: 25%;
}
.header {
width: 25%;
height: 100%;
}
.lower {
height: 75%;
}
.card {
height: 35%;
width: 40%;
margin: 2.5%;
border: 2.5pt solid #000000;
border-radius: 15pt;
}
.left {
float: left;
}
.right {
float: right;
}
<div class="container">
<div class="topper">
<div class="header">
<h1>HOME</h1>
<hr class="short-hr">
<h3>Planner</h3>
</div>
<hr class="wide-hr">
</div>
<div class="lower">
<div class="card left">
<h2>Einkaufsliste</h2>
</div>
<div class="card right">
<h2>Kalender</h2>
</div>
<div class="card left">
<h2>ToDo - List</h2>
</div>
<div class="card right">
<h2>Einstellungen</h2>
</div>
</div>
</div>
This is my html and css:
I want display 3 div on 1 line:
i set height of div = 300px
at div 2 i set height:1500px, but it auto expand div and not display scroll:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.mainContent {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.col {
display: table-cell;
width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
</style>
</head>
<body>
<div class="mainContent">
<div class="col">
part 1
</div>
<div class="col">
part 2
<div id="resultTable" style="height:1500px;">
</div>
</div>
<div class="col">
part 3
</div>
</div>
</body>
</html>
Why can't display scroll of div?
I think the issue is you're using table layout. If you set your column divs to display:block, and float:left; then you'll get the ability to scroll back.
<style>
.mainContent {
display: block;
width: 100%; /*Optional*/
}
.col {
display: block;
float:left;
width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
</style>
Try using Flex layout.
.mainContent {
display: flex;
flex-direction: row;
border-spacing: 10px; /*Optional*/
}
.col {
min-width: 400px;
overflow: scroll;
height: 300px;
border: 3px solid black;
}
<div class="mainContent">
<div class="col">part 1</div>
<div class="col">part 2
<div id="resultTable" style="height:1500px;">
</div>
</div>
<div class="col">
part 3
</div>
</div>
I have a html structure like this and some basic style
.container {
display: block;
width: auto;
/* this is must */
height: auto;
/* this is must */
max-width: 300px;
}
.container .row {
display: flex;
width: 100%;
height: auto;
}
.container .row .left {
display: inline-block;
width: 100px;
height: auto;
}
.container .row .right {
display: inline-block;
width: auto;
height: auto;
}
<div class="container">
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
The style may not working, I only pasted the basic part of it.
What I want to achieve is, the parent element has a max-width, it contains multiple rows, each row has two elements, 'left' and 'right'. I give a fixed width to 'left' element, and a min-width/max-width to 'right' element. I would like the width of the right element auto grow as the content grow until the max-width, but if the content is short, the right element shall also shrink.
I tried table and flex box, but no luck. Thanks for any help
The problem is because you have to specify the max-width to the .right class.
1) The overall container's max-width:300px and left one's width: is 100px, so the remaining 200px; you can give it to right row.
2) Have added background for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.container {
display: block;
width: auto; /* this is must */
height: auto; /* this is must */
max-width: 300px;
}
.container .row{
display: flex;
width: 100%;
height: auto;
background-color:Red;
}
.container .row .left{
display: inline-block;
width: 100px;
background-color:yellow;
}
.container .row .right{
display: inline-block;
height: auto;
background-color:green;
max-width: 200px;
overflow:hidden;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="left">qweqweqwe</div>
<div class="right">qweqweqwew<p>afdllssssssssdddddddddssssssssss</p><p>asdasdasdadsas</p></div>
</div>
<div class="row">
<div class="left">qweqweqwe</div>
<div class="right">qweqweqwe</div>
</div>
<div class="row">
<div class="left">qweqweqw</div>
<div class="right">qweqweqweqwe</div>
</div>
</div>
</body>
</html>
Find the codepen sample here and check it with your requirement. Also, let me know if there is something that you want to get from.
.container .row{
display: flex;
width: 100%;
height: auto;
}
.container .row .left{
display: inline-block;
width: 100px;
height: auto;
}
.container .row .right{
display: inline-block;
width: auto;
height: auto;
max-width: 150px;
overflow: hidden;
}
Add display: flex to your .row class and set min-width: 100px to .right - see a working jsfiddle here: https://jsfiddle.net/o3o9j4za/1/
<div class="container">
<div class="row">
<div class="left">1234</div>
<div class="right">4312</div>
</div>
<div class="row">
<div class="left">1235</div>
<div class="right">qweqwereqwr</div>
</div>
<div class="row">
<div class="left">5342</div>
<div class="right">3g43g3g3g</div>
</div>
.container {
display: block;
width: auto; /* this is must */
height: auto; /* this is must */
max-width: 300px;
}
.container .row{
width: 100%;
height: auto;
display:flex;
}
.container .row .left{
display: inline-block;
height: auto;
width: 100px;
background-color:#ff0;
}
.container .row .right{
display: inline-block;
width: auto;
min-width: 100px;
height: auto;
background-color:#f0f;
}
Note, that your flex container (.row) is affected by the max-width of .container.
(Edit: misread a bit - should be like you want it now?)
How about this flexbox solution? I think it comes closest to what you are looking for:
<div class="container">
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
<div class="row">
<div class="left">test left</div>
<div class="right">test right</div>
</div>
</div>
.container {
padding: 2px;
border: 1px solid green;
max-width: 300px;
}
.row {
display: flex;
padding: 2px;
border: 1px solid red;
max-width: 300px;
}
.left {
padding: 2px;
border: 1px solid blue;
width: 100px;
}
.right {
padding: 2px;
border: 1px solid purple;
width: 180px;
}
And the fiddle:
https://jsfiddle.net/xr7ebmsz/
I guess you can try this one for your class "right"
.right{
width:calc(100% - 100px);
}
I would like to write a CSS script that involves 4 div in addition to a fifth div as a container.
The Div 1 should be at the top as a title, Div 2 should be at the center of the right side of the container ,Div 4(Containing img src) should be at the center of the container , and Div 3 should be at the bottom of the image.
I had a script as a trial but it not like that I want( Iam beginner in CSS) .
<html xmlns="http://www.w3.org/1999/html">
<head>
<title> </title>
<meta charset="utf-8">
<style>
#siena img {
display: inline-block;
margin-left: 0px;
}
#Container
{
margin-bottom: 3pc;
text-align: center;
border-width:2px;
border-color: #46b8da ;
margin-right: 100px;
margin-left: 100px;
border-style: solid;
background-color :#c4e3f3;
padding :10%;
}
#link
{
display: inline-block;
}
#price
{
top:100px;
width:50%
margin:0 auto;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">
<h1 style="text-align: center;"> Text </h1>
<div id="Container" > <p>
<div id="siena" >
Text
<img src='http://www.traidnt.net/vb/attachments/480574d1272729780-no_pic.gif'>
<div id="price" >
price
</div>
</div>
<div id="link" >
<a href='https://www.google.com/?gws_rd=ssl' > </a>
</div>
</div>
</body>
</html>
Your markup looks invalid.
You have unecessary spaces within tags and unclosed p tags.
You can achieve what you want via this markup:
<div id="container">
<div id="header">Div 1</div>
<div id="content">Div 4</div>
<div id="side-content">Div 2</div>
<div id="footer">Div 3</div>
</div>
And then use CSS to position the elements:
#container {
width: 100%;
}
div {
border: 1pt solid black;
padding: 5px;
text-align: center;
}
#content {
width: 70%;
float: left;
}
http://jsfiddle.net/7dqagh7s/
Also, I would recommend using a StyleSheet rather than putting the code directly inline with the markup.
I tried to copy the image in css
.container{
width: 90%;
border: 1px solid brown;
height: 500px;
}
.top, .bottom{
margin-top: 10px;
width: 90%;
height: 100px;
border: 3px solid red;
margin-bottom: 10px;
}
.left, .right{
display: inline-block;
width: 50%;
border: 3px solid maroon;
height: 200px;
}
.right{
display: inline-block;
width: 40%;
margin-left: 5%;
}
<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom">bottom</div>
</div>
Edit since you asked about the image overlapping another div.
The following will make it so the image will not extend past it's container so the image wont overlap any other div.
.left img{
width: 100%;
max-width: 100%;
max-height: 100%;
}
Is that what you meant?