HTML CODE
<body>
<div id="main">
<div class="box">
<div class="box-content left">
<img src="sydney.jpg" />
<h3>Sydney</h3>
<p>djadijoi djoiqj eqoijweoq eijqoeiqoeqeqe jeoiqe qeqoejqeqe qeuqqueqie qeqe qe</p>
</div>
<div class="box-content left">
<img src="sydney.jpg" />
<div class="box-info">
<h3>Sydney</h3>
<p>djadijoi djoiqj eqoijweoq eijqoeiqoeqeqe jeoiqe qeqoejqeqe qeuqqueqie qeqe qe</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
CSS CODE
#main{
width:100%;
border: 1px solid black;
}
#main .box{
border:1px solid red;
}
#main .box .box-content{
border: 1px solid green;
width:25%
}
#main .box .box-content img{
height: 200px;
width: 200px;
}
.left{
float:left;
}
.clear{
clear: both;
}
You set a fix widthto your images.
CSS
#main .box .box-content img{
height: 200px;
width: 100%;
}
Now it fits perfectly to your <div class="box-content"> jsfiddle
Related
How do I keep the two images contained in their responsive divs as I change the browser size?
.entry-header{
display:none;
}
#masthead{
height:12vw;
}
html{
height:55vw;
}
body{
height:53vw;
margin-top:2vw;
}
#page{
height:51.5vw;
/*border:solid 2px black;*/
}
#vision-table{
display:table;
margin:1.3509375vw 0;
/* border:solid 2px black; */
}
#vision{
background-color:#538231c7;
color:white;
height:3.71385vw;
padding:1.00215vw 2.01vw;
line-height:1.25;
font-size:1.5vw;
display:table-cell;
vertical-align:middle;
}
.row{
display: flex; /* equal height of the children */
justify-content:space-between;
/* border:solid 2px black;*/
}
.col{
/*flex:1; /* additionally, equal width */
width:32%;
background-color:#b3d7f8;
/* border:solid 2px black;*/
}
.col3{
height:6.67vw;
/*border:solid 2px black;*/
}
.top{
height:3.64vw;
/* border:solid 2px black;*/
}
.pic{
height:11.535vw;
border:solid 1px black;
}
.text{
height:8.5vw;
/*border:solid 2px black; */
}
.read{
height:6.67vw;
/* border:solid 2px black; */
}
#footer{
text-align:center;
}
.top h1{
font-size:1.6vw;
color:#538232;
text-align:center;
}
.wp-block-image {
line-height: 0;
max-width: 100%;
margin: 0;
text-align:center;
}
img{
width:21vw;
}
figure{
background-size:contain;
}
.pic{
background-size:contain;
}
#media only screen and (max-width: 1110px) {
#masthead{
height:16vw;
}
img{
width:28.639vw;
}
}
<div id="vision-table">
<div id="vision">Our Vision: A sustainable and healthy town of Weston, with engaged citizens committed to a thriving community, today and in the future.</div>
</div>
<div class="row">
<div id="col1" class="col">
<div class="top">
<h1>Feature Highlight</h1>
</div>
<div class="pic">
<figure class="wp-block-image">
<img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/Gas-Leak-Infographic--e1566766035812.png"></figure>
</div>
<div class="text"></div>
<div class="read"></div>
</div>
<div id="col2" class="col">
<div class="top">
<h1>Feature Action</h1>
</div>
<div class="pic">
<figure class="wp-block-image">
<img src="https://sustainablewestonma.000webhostapp.com/wp-content/uploads/2019/08/60805048_10217029527561784_8914643229203234816_n-1-e1566764730232.jpg"></figure>
</div>
<div class="text"></div>
<div class="read"></div>
</div>
<div id="col3" class="col">
<div class="col3 top">
<h1>Get Involved</h1>
</div>
<div class="col3 gi-button"></div>
<div class="col3 gi-button"></div>
<div class="col3 gi-button"></div>
<div class="col3 gi-button"></div>
</div>
</div>
Try this with images to make sure images never cross their container
.wp-block-image img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
I'm trying to place a calender inside a transparent div container, however I'm having some issues, i want each calender box to form a row that takes up 100% in width in the transparent box. So basically at the moment the page looks like this:
screenshot.
What you probably noticed is if you look at container with the "click on the images text" is that the box is wider than the rows under it.
This is the CSS code for the calender: Basically everything relating to .transbox has something to do with the transparent box. The calender days are the classes .weekdayssttart and weekdays. The remaining classes are the calender days with numbering. So since there is 7 days a week i just thought that I had to divide 100/7 which is 14.2857142857 and set each box type to that width in percentage. However this is the result i get: screenshot2. What I obviously notice is that the row is to small to contain the calender boxes, does anyone have an idea to fix this? Sorry for my bad english.
.transbox {
background: #fff;
padding: 2%;
width: 70%;
margin-left: 15%;
margin-bottom: 1%;
position: relative;
background-color:rgba(255,255,255,.9);
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.9);
overflow: auto;
}
.transbox p {
color: darkslategray;
margin-bottom: 2%;
font-size:13px;
}
.transbox img {
width:100%;
height: 100%;
}
.weekdaysstart {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.weekdays {
width: 14%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
float: left;
}
.hint {
width: 99%;
height: 20px;
background-color:floralwhite;
border: 1px solid darkslategrey;
text-align:center;
padding-top: 5px;
}
.one {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextrow {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
clear:left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.nextmonth {
background-color: floralwhite;
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
}
.lastrow {
width: 14%;
height: 100px;
float: left;
border: 1px solid darkslategrey;
color: darkslategrey;
background-color: floralwhite;
margin-bottom:2%;
}
.pancakes {
width: 14%;
height: 100px;
float:left;
background: url(images/pancakes.jpeg);
background-size: cover;
border: 1px solid darkslategrey;
}
.meatballs {
width: 14%;
height: 100px;
float:left;
border: 1px solid darkslategrey;
background: url(images/kotbulls.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Tasty recipes</title>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ul>
<li>HOME</li>
<li>RECIPES</li>
<li>CALENDAR</li>
<li class="tastyrecipes">Tasty Recipes</li>
</ul>
<h1>Calendar</h1>
<h3>November 2017</h3>
<div class = "transbox">
<div class="hint">
<p>Click on the image of a dish to go to its recipe-page.</p>
</div>
<div class="weekdaysstart">
<p>Monday</p>
</div>
<div class="weekdays">
<p>Tuesday</p>
</div>
<div class="weekdays">
<p>Wednesday</p>
</div>
<div class="weekdays">
<p>Thursday</p>
</div>
<div class="weekdays">
<p>Friday</p>
</div>
<div class="weekdays">
<p>Saturday</p>
</div>
<div class="weekdays">
<p>Sunday</p>
</div>
<div class="nextrow">
<p>30</p>
</div>
<div class="one">
<p>31</p>
</div>
<div class="one">
<p>1</p>
</div>
<div class="one">
<p>2</p>
</div>
<div class="one">
<p>3</p>
</div>
<div class="one">
<p>4</p>
</div>
<div class="one">
<p>5</p>
</div>
<div class="nextrow">
<p>6</p>
</div>
<a href="meatballs.html">
<div class="meatballs">
<p>7</p>
</div>
</a>
<div class="one">
<p>8</p>
</div>
<div class="one">
<p>9</p>
</div>
<div class="one">
<p>10</p>
</div>
<div class="one">
<p>11</p>
</div>
<div class="one">
<p>12</p>
</div>
<div class="nextrow">
<p>13</p>
</div>
<div class="one">
<p>14</p>
</div>
<div class="one">
<p>15</p>
</div>
<div class="one">
<p>16</p>
</div>
<div class="one">
<p>17</p>
</div>
<div class="one">
<p>18</p>
</div>
<div class="one">
<p>19</p>
</div>
<div class="nextrow">
<p>20</p>
</div>
<div class="one">
<p>21</p>
</div>
<div class="one">
<p>22</p>
</div>
<div class="one">
<p>23</p>
</div>
<div class="one">
<p>24</p>
</div>
<a href="pancakes.html">
<div class="pancakes">
<p>25</p>
</div>
</a>
<div class="one">
<p>26</p>
</div>
<div class="nextrow">
<p>27</p>
</div>
<div class="lastrow">
<p>28</p>
</div>
<div class="lastrow">
<p>29</p>
</div>
<div class="lastrow">
<p>30</p>
</div>
<div class="nextmonth">
<p>1</p>
</div>
<div class="nextmonth">
<p>2</p>
</div>
<div class="nextmonth">
<p>3</p>
</div>
</div>
</body>
</html>
Like Matthew JohnSon said, you could do this using flexbox. I'm not totally sure, but I believe the calc() function will let it fit.
.transbox {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.weekdaysstart, .weekdays {
width: calc(100% / 7);
}
Edit
I changed the names of the classes to those of your html classes.
You should use a clearfix container per each row.
https://css-tricks.com/snippets/css/clear-fix, and try to use flex instead of float, set each .row display: flex, and then set flex-grow: 1; flex-shrink: 1; flex-basis: auto; to the elements inside the row.
Please help me to create layout as specified on image below.
I have tried to achieve it but my knowledge of CSS is not enough and layout has to be done ASAP... I tried to play with CSS attributes like float, overflow, position:absolute, relative, etc but results were disappointing - divs overflow with each other, don't position properly and so on. Each div contains a lot of content - other divs, images, lists, etc.
Desired result:
<div style="float: left; width: 100px; height: 200px; background: #f00;">content...</div>
<div style="float: right; width: 200px; height: 300px; background: #0f0;">content...</div>
<div style="clear: both;"></div>
<div style="float: right; width: 100px; height: 300px; background: #00f;">content...</div>
<div style="clear: both;"></div>
<div style="float: right; width: 500px; height: 200px; background: #ff0;">content...</div>
<div style="clear: both;"></div>
<div style="width: 100%; height: 100px; background: #000;">content...</div>
<body>
<div class="box">
<div class="red">
</div>
<div class="green">
</div>
</div>
<!-- -->
<div class="box">
<div class="blue">
</div>
</div>
<!-- -->
<div class="box">
<div class="yellow">
</div>
</div>
<!-- -->
<div class="box">
<div class="black">
</div>
</div>
</body>
.box{
width:400px;
clear:both;
height:400px;
margin-top:10px;
}
.yellow{
background:yellow;
width:40%;
height:100%;
float:right;
}
.black{
background:black;
width:80%;
height:20%;
float:right;
}
.blue{
background:blue;
width:20%;
height:100%;
float:right;
}
.red{
background:red;
width:30%;
height:60%;
float:left;
}
.green{
background:green;
width:60%;
height:90%;
float:left;
margin-left:10%;
}
I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
CSS
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
Markup
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
Update
Float version
CSS
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
Demo Here
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
demo: http://jsfiddle.net/57M68/. I have tried a lot of things like float, margin, padding but I can't get the textbox to align vertically in the center of the black strip. Please help. The code:
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div style="display:inline-block"> <input type="text" ></input></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
You just need to add vertical-align: middle to your input div and to .logo_a:
.logo_a {
background:url("icon1.png");
vertical-align: middle;
}
http://jsfiddle.net/57M68/1/
The HTML goes like this
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq- ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div id="text"> <input type="text"></div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin- left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
And the css is added to the existing demo--
#text{display:inline;}
#text input{position:relative;
top:-43px;
left:110px;}